Редактор постов в WordPress, как следует из его названия, позволяет редактировать посты и контент. По умолчанию он не позволяет добавлять пользовательские классы CSS. Если вы хотите добавить собственные стили или классы CSS, единственный способ – это переключиться в текстовый режим и добавить его в код HTML.
Поскольку WordPress настолько настраиваемый, есть способы сделать вашу жизнь проще, добавив настраиваемые параметры стиля для редактора сообщений WordPress. Используя эти пользовательские параметры, вы можете применять стили CSS всего несколькими щелчками мыши. Вам больше не нужно переключаться в текстовый режим или запоминать все классы CSS, которые входят в ваши сообщения, чтобы они выглядели лучше.
Есть несколько способов добавить пользовательские параметры стиля в редактор сообщений WordPress. Первый – использовать бесплатный плагин, а второй – добавить фрагмент кода. Оба метода работают очень схожим образом, поэтому следуйте тому, с которым вам удобно.
Примечание: прежде чем продолжить, я предполагаю, что вы знаете базовые HTML и CSS и можете понимать такие вещи, как классы CSS, элементы уровня блока, элементы HTML, атрибуты и т. д.
1. Использование плагина
Гайд в разделе Интернет "Как добавить пользовательские параметры стиля в WordPress Post Editor" содержит информацию, советы и подсказки, которые помогут изучить самые важные моменты и тонкости вопроса….
Самый простой способ добавить пользовательские параметры стилей в редакторе сообщений WordPress – это использовать плагин под названием TinyMCE Custom Styles.
Хорошая особенность этого плагина в том, что он автоматически создает таблица стилей редактора, куда вы можете добавлять собственные стили CSS. Это очень полезно, когда вы хотите увидеть стили интерфейса, связанные со ссылками, изображениями, формами, кнопками и т. Д., Примененные внутри редактора сообщений.
1. Для начала загрузите, установите и активируйте пользовательские стили TinyMCE, как и любой другой плагин WordPress. После активации перейдите на страницу настроек плагина, перейдя в «Настройки» -> «Пользовательские стили TinyMCE».
2. Сразу же, плагин будет отображать сообщение об ошибке с просьбой выбрать, где вы хотели бы разместить файл таблицы стилей редактора. В зависимости от вашей темы вы можете выбрать один из трех вариантов. Внимательно прочитайте эти варианты и выберите тот, который подходит именно вам. В моем случае я выбрал второй вариант, потому что я использую собственную дочернюю тему Genesis. Нажмите кнопку «Сохранить все настройки», чтобы сохранить изменения.
3. Прокрутите вниз и нажмите кнопку Добавить новый стиль. Теперь введите имя стиля, выберите тип (например, встроенный, блок или селектор), введите значение типа, а затем класс CSS.
4. На правой стороне не забудьте выбрать, является ли элемент Wrapper или нет. Если вы выберете эту опцию, стиль создаст новый элемент уровня блока вокруг выбранного элемента уровня блока в редакторе сообщений.
5. Если вы хотите, вы можете даже напрямую добавить пользовательские стили CSS, нажав Добавить новый стиль, появляющийся в категории CSS Styles. Однако я рекомендую вам добавить эти стили в файл editor-style.css, расположенный в каталоге вашей темы (если вы выбрали второй вариант, как я, на втором шаге). Это облегчает управление.
6. Когда вы закончите, нажмите кнопку Сохранить все настройки, расположенную в конце страницы.
7. Это оно. Отныне вы увидите новое выпадающее меню под названием Форматы в редакторе постов. В этом выпадающем меню вы можете найти вновь добавленную опцию пользовательского стиля наряду с другими предварительно настроенными. Чтобы использовать стиль, просто нажмите на него, и необходимый код CSS будет автоматически добавлен в редактор сообщений. Вы видите этот код в текстовом режиме.
8. Если вы добавили необходимые стили в файл editor-style.css, эти стили будут отражены в редакторе записей при использовании параметра стиля из раскрывающегося меню.
В будущем, если Если вы отключите или удалите плагин, редактор стилей не будет удален. Однако вы больше не можете получить доступ к пользовательским параметрам в редакторе сообщений.
2. Ручной метод
Если вы не хотите использовать плагин, то вы можете добиться того же, добавив простой фрагмент кода в ваш файл functions.php. Это состоит из двух частей: одна предназначена для добавления кнопки на панель инструментов для вставки кода CSS, а вторая – для создания стиля CSS в редакторе записей.
Добавление пользовательских кнопок стилей CSS на панель инструментов
Добавьте следующее в конец вашего файла functions.php. Этот код фактически предоставляется самим WordPress.
// Функция обратного вызова для вставки ‘styleselect’ в функцию массива $ buttons my_mce_buttons_2 $ buttons array_unshift $ button, ‘styleselect’, return $ buttons, // Зарегистрируйте наш обратный вызов в соответствующем фильтре add_filter ‘mce_buttons_2’, ‘my_mce_buttons_2’ , // Функция обратного вызова для фильтрации функции настроек MCE my_mce_before_init_insert_formats $ init_array // Определение массива style_formats $ style_formats = array // Каждый дочерний массив является форматом со своим собственным массивом настроек ‘title’ = & gt, ‘.translation’, ‘block ‘= & gt,’ blockquote ‘,’ classes ‘= & gt,’ translation ‘,’ wrapper ‘= & gt, true, массив’ title ‘= & gt,’ ⇠.rtl ‘,’ block ‘= & gt,’ blockquote ‘, ‘classes’ = & gt, ‘rtl’, ‘wrapper’ = & gt, true, массив ‘title’ = & gt, ‘.ltr⇢’, ‘block’ = & gt, ‘blockquote’, ‘classes’ = & gt, ‘ltr ‘,’ wrapper ‘= & gt, true,,, // Вставить массив, JSON ENCODED, в’ style_formats ‘$ init_array [‘ style_formats ‘] = json_encode $ style_formats, вернуть $ init_array, // Присоединить обратный вызов к’ tiny_mce_before_init ‘add_fil ter ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’,
Вам необходимо настроить код, чтобы он отражал ваши параметры стиля. В приведенном выше коде каждый массив является отдельной опцией стиля. Введите название стиля рядом с названием, тип блока рядом с блоком, класс CSS рядом с классами, и, если элемент является оболочкой, введите true рядом с оболочкой. Если это не так, введите false.
Каждый раз, когда вы хотите добавить новую опцию стиля, просто продублируйте массив и измените поля. В моем случае я заполнил первый массив, отражающий мой параметр «Синяя кнопка».
Как только вы закончите настройку, сохраните и загрузите исправленный файл functions.php на свой сервер.
Создать таблицу стилей редактора
Создайте файл с именем editor-style.css. Теперь добавьте соответствующие стили CSS, которые вы хотели бы видеть в редакторе постов. Не забывайте, что классы CSS, которые вы создаете в файле editor-style.css, должны совпадать с классами CSS в приведенном выше коде параметров стиля.
Теперь откройте ваш файл functions.php themes и добавьте следующий код .
// Добавить пользовательскую функцию таблицы стилей редактора mte_add_editor_styles add_editor_style ‘editor-style.css’, add_action ‘init’, ‘mte_add_editor_styles’,
Загрузить оба файла editor-style.css и functions.php на ваш сервер. Вот и все, что нужно сделать. Отныне вы можете использовать опции пользовательских стилей из редактора сообщений WordPress.
Вы можете увидеть стили, применяемые в режиме реального времени.
Прокомментируйте ниже и поделитесь своими мыслями и опытом, касающимся использования вышеуказанных методов для добавления пользовательских настроек стиля в редакторе сообщений WordPress.
Эта статья полезна? Да Нет
Создание интерактивного длинного рассказа, рассказывающего о содержании, на WordPress
В этой электронной книге рассказывается об интерактивном длинном рассказе: что это такое, зачем вам нужно использовать его и его преимущества, как его создать и как доступно инструменты, которые помогут вам создать свой первый длинный контент.
Получите это сейчас!Больше электронных книг
Комментарии (1)
- Tweet