Будучи разработчиками, мы привыкли смотреть на строки и строки кода в моноширинном шрифте и в то же время «видеть», как будет выглядеть страница в браузере. Тем не менее, нам легко не заметить тот факт, что существует немало не разработчиков.
Стиль редактора — это отличная функция, которая позволяет вам сопоставить внешний вид содержимого публикации в редакторе TinyMCE с тем, что показано посетителям сайта. Он чрезвычайно прост в использовании, но если ваша тема имеет параметры шрифта и особенно если он использует Google Fonts, стиль редактора требует немного дополнительной работы для стилизации текста на основе значений параметров шрифта.
План
В дополнение к загрузке editor-style.css с использованием функции add_editor_style() , мы должны сделать следующие вещи:
- Сообщите TinyMCE, какие параметры шрифта в настоящее время активны
- При необходимости загрузите таблицы стилей Google Fonts
- Наконец, добавьте стили оформления в наш редактор-style.css
Прежде чем делать что-либо из этого, у администратора сайта уже должен быть способ выбрать, какие шрифты они хотели бы использовать. Вы можете использовать API настроек или, если вы один из самых крутых ребят, настройщик тем, но объяснение того, как работать с любым из них, не является темой этого руководства.
Чтобы запустить этот проект, я буду использовать тему «Подчеркивание» и шаблонный шаблон Theme Customizer. Это даст мне стартовую тему и способ быстро добавить параметры в Theme Customizer, но как вы справитесь с этой частью, полностью зависит от вас.
Добавление параметров шрифта в настройщик темы
Итак, я скачал свежую копию темы Underscores , добавил к ней Boilerplate Theme Customizer Boilerplate, и теперь я готов добавить некоторые опции в Theme Customizer, используя Customizer Boilerplate. Это идет прямо в файл functions.php темы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
/**
* Options array for Theme Customizer Boilerplate
*
* @link https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate
* @return array Theme options
*/
add_filter( ‘thsp_cbp_options_array’, ‘thsp_theme_options_array’, 1 );
function thsp_theme_options_array() {
// Using Customizer Boilerplate helper function to get default required capability
$thsp_cbp_capability = thsp_cbp_capability();
$options = array(
// Section ID
‘thsp_typography_section’ => array(
‘existing_section’ => false,
‘args’ => array(
‘title’ => __( ‘Typography’, ‘cazuela’ ),
‘description’ => __( ‘Select fonts’, ‘cazuela’ ),
‘priority’ => 20
),
‘fields’ => array(
‘body_font’ => array(
‘setting_args’ => array(
‘default’ => ‘open-sans’,
‘type’ => ‘option’,
‘capability’ => $thsp_cbp_capability,
‘transport’ => ‘refresh’,
), // End setting args
‘control_args’ => array(
‘label’ => __( ‘Body font’, ‘cazuela’ ),
‘type’ => ‘select’, // Select control
‘choices’ => array(
‘arial’ => array(
‘label’ => ‘Arial’
),
‘open-sans’ => array(
‘label’ => ‘Open Sans’,
‘google_font’ => ‘Open+Sans:400italic,700italic,400,700’
),
‘pt-sans’ => array(
‘label’ => ‘PT Sans’,
‘google_font’ => ‘PT+Sans:400,700,400italic,700italic’
)
),
‘priority’ => 1
) // End control args
),
‘heading_font’ => array(
‘setting_args’ => array(
‘default’ => ‘open-sans’,
‘type’ => ‘option’,
‘capability’ => $thsp_cbp_capability,
‘transport’ => ‘refresh’,
), // End setting args
‘control_args’ => array(
‘label’ => __( ‘Heading font’, ‘cazuela’ ),
‘type’ => ‘select’, // Select control
‘choices’ => array(
‘georgia’ => array(
‘label’ => ‘Georgia’
),
‘open-sans’ => array(
‘label’ => ‘Open Sans’,
‘google_font’ => ‘Open+Sans:400italic,700italic,400,700’
),
‘droid-serif’ => array(
‘label’ => ‘Droid Serif’,
‘google_font’ => ‘Droid+Serif:700’
)
),
‘priority’ => 2
) // End control args
),
) // End fields
)
);
return $options;
}
|
Как вы можете заметить, глядя на этот массив, я добавляю опцию основного шрифта и опцию заголовочного шрифта в настройщик тем с тремя возможными вариантами для каждого — Arial, Open Sans и PT Sans для основного шрифта, Georgia, Open Sans и Droid Serif для заголовочного шрифта.
Для Google Fonts есть значение google_font которое я буду использовать позже для загрузки таблиц стилей Google Fonts.
Сообщая TinyMCE, какие шрифты выбраны в настоящее время
Если мы собираемся динамически изменять шрифты в редакторе TinyMCE, основываясь на том, что пользователи выбирают в настройщике тем, мы должны передать некоторую информацию объекту TinyMCE.
Например, если в качестве основного шрифта выбран Open Sans, то добавление класса « body-open-sans » к редактору поможет. Это можно сделать, используя tiny_mce_before_init фильтра tiny_mce_before_init и изменив значение body_class в массиве настроек TinyMCE.
Проверьте встроенные комментарии:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/**
* Passes custom typography classes to Tiny MCE editor
*
* @param $thsp_mceInit array
* @uses thsp_cbp_get_options_values() helper function defined in /customizer-boilerplate/helpers.php
* @return $thsp_mceInit array
*/
function thsp_tiny_mce_classes( $thsp_mceInit ) {
// Use Theme Customizer Boilerplate helper function to retrieve theme options
$thsp_theme_options = thsp_cbp_get_options_values();
/**
* $thsp_mceInit array stores its body classes as a string
*
* Whitespace character is used as separator between classes,
* so when adding classes they must have a space before them
*/
$thsp_mceInit[‘body_class’] .= ‘ body-‘ .
$thsp_mceInit[‘body_class’] .= ‘ heading-‘ .
return $thsp_mceInit;
}
add_filter( ‘tiny_mce_before_init’, ‘thsp_tiny_mce_classes’ );
|
Это добавит пользовательские классы в редактор TinyMCE, как вы можете видеть на этом скриншоте:
Пользовательские классы (body-open-sans и heading-droid-serif) в редакторе WordPress TinyMCE Если вы хотите увидеть весь массив настроек TinyMCE, ознакомьтесь с этим списком .
Опять же, я использую Boileplate Theme Customizer Boilerplate и некоторые его функции, чтобы ускорить процесс, от того, как вы справляетесь с опциями вашей темы, зависит от вас.
Загрузить таблицы стилей Google Fonts
У некоторых шрифтов в массиве опций, которые я передал на google_font Theme Customizer, было google_font значение google_font . Это помогает определить, нужно ли загружать таблицу стилей Google Fonts и каков ее URL. Используя эту информацию, теперь вы можете подключиться к фильтру mce_css и добавить пользовательские таблицы стилей в окно редактора TinyMCE:
$mce_css — это список разделенных запятыми URI таблиц стилей, поэтому, если $mce_css стилей Google Fonts содержит запятую, вы должны использовать вместо нее объект HTML. Поскольку я добавил опцию как для основного текста, так и для заголовочного шрифта, мне придется проверить оба, чтобы увидеть, требуется ли им таблица стилей Google Fonts:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/**
* Load Google Fonts to use in Tiny MCE
*
* @param $mce_css string
* @uses thsp_cbp_get_options_values() defined in /customizer-boilerplate/helpers.php
* @uses thsp_cbp_get_fields() defined in /customizer-boilerplate/helpers.php
* @return $mce_css string
*/
function thsp_mce_css( $mce_css ) {
$theme_options = thsp_cbp_get_options_values();
$theme_options_fields = thsp_cbp_get_fields();
// Using Theme Customizer Boilerplate to retrieve theme font options values
$body_font_value = $theme_options[‘body_font’];
$heading_font_value = $theme_options[‘heading_font’];
// Using Theme Customizer Boilerplate to retrieve all theme options
$body_font_options = $theme_options_fields[‘thsp_typography_section’][‘fields’][‘body_font’][‘control_args’][‘choices’];
$heading_font_options = $theme_options_fields[‘thsp_typography_section’][‘fields’][‘heading_font’][‘control_args’][‘choices’];
// Check protocol
$protocol = is_ssl() ?
// Check if it’s a Google Font
if ( isset( $body_font_options[$body_font_value][‘google_font’] ) ) {
// Commas must be HTML encoded
$body_font_string = str_replace( ‘,’, ‘,’, $body_font_options[$body_font_value][‘google_font’] );
$mce_css .= ‘, ‘ .
}
// Check if it’s a Google Font
if ( isset( $heading_font_options[$heading_font_value][‘google_font’] ) ) {
// Commas must be HTML encoded
$heading_font_string = str_replace( ‘,’, ‘,’, $heading_font_options[$heading_font_value][‘google_font’] );
$mce_css .= ‘, ‘ .
}
return $mce_css;
}
add_filter( ‘mce_css’, ‘thsp_mce_css’ );
|
Добавление стилей шрифтов в editor-style.css
После двух последних шагов это самая легкая часть. В редакторе TinyMCE теперь есть пользовательские классы, основанные на активных параметрах шрифта, и таблицы стилей Google Fonts загружаются при необходимости. Все, что осталось сделать, это добавить некоторые стили font-family в editor-style.css :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
/* Body fonts */
.body-arial {
font-family: Arial, sans-serif;
}
.body-open-sans {
font-family: «Open Sans», sans-serif;
}
.body-pt-sans {
font-family: «PT Sans», sans-serif;
}
/* Headings */
.heading-georgia h1,
.heading-georgia h2,
.heading-georgia h3,
.heading-georgia h4,
.heading-georgia h5,
.heading-georgia h6 {
font-family: Georgia, serif;
}
.heading-open-sans h1,
.heading-open-sans h2,
.heading-open-sans h3,
.heading-open-sans h4,
.heading-open-sans h5,
.heading-open-sans h6 {
font-family: «Open Sans», sans-serif;
}
.heading-droid-serif h1,
.heading-droid-serif h2,
.heading-droid-serif h3,
.heading-droid-serif h4,
.heading-droid-serif h5,
.heading-droid-serif h6 {
font-family: «Droid Serif», serif;
}
|
Теперь этот метод может не иметь особого смысла, если ваша тема позволяет пользователям выбирать из «600+ Google Fonts». Однако знание того, что WordPress основан на принципе « Решения, а не опции», и предложение более 600 вариантов только для одного из вариантов, имеет еще меньше смысла.
Если вы предпочитаете сохранять параметры своей темы в здравом уме, принимая некоторые решения, я надеюсь, вы по достоинству оцените этот метод добавления Google Fonts в редактор TinyMCE. Ваши отзывы приветствуются.