Добавьте CSS ядра WordPress в editor-style.css

Содержание

Вопрос или проблема
Ответ или решение
Шаги для добавления WordPress Core CSS в editor-style.css
Ваш следующий шаг
Заключение

Вопрос или проблема

Я использую пользовательскую дочернюю тему (от Parabola, Cryout Creations, последняя версия), но, похоже, что файл editor-style.css не актуален. Вместо того чтобы переписывать всё, я хотел бы, чтобы он содержал все CSS, используемые на фронтенде, чтобы TinyMCE выглядел как можно ближе к опубликованной странице/статье (это важно).

Для этого я создал новый файл editor-style.css в своей дочерней теме, чтобы он заменял устаревший файл. Пока что он включает файл styles.css из моей темы, но в нём не хватает многих CSS из ядра WordPress (тот, что на 60-й строке в индексном файле: http://nouveau.domaineloupia.com).

Так как же добавить этот “основной CSS” в мой файл editor-style.css? И будет ли это наилучший способ сделать это? Я видел много информации о функции add_editor_style, но не знаю, могу ли я использовать её для того, что хочу, и как.

как я могу это сделать?

Чтобы добавить стили, которые влияют на TinyMCE, вам нужно сделать следующее:

add_action( 'admin_init', 'editor_styles' );
function editor_styles() {
       add_editor_style( get_stylesheet_directory_uri() . 'editor-style.css' );
}

По сути, это загрузит файл editor-style.css, расположенный в корне вашей дочерней темы.

Ответ или решение

Чтобы добавить CSS WordPress Core в файл editor-style.css и обеспечить согласованность стилизации редактора TinyMCE с вашим опубликованным контентом, необходимо выполнить несколько шагов. В этом руководстве мы подробно разберем, как эффективно интегрировать стили, а также объясним, как использовать функцию add_editor_style для загрузки пользовательских стилей.

Шаги для добавления WordPress Core CSS в editor-style.css

Создание файла editor-style.css:

Убедитесь, что ваш файл editor-style.css создается в корневом каталоге вашей дочерней темы. Если файла еще нет, создайте его.
Добавление основной стилизации WordPress Core:

WordPress Core включает стандартные стили, которые применяются к редакторам контента. Эти стили можно подключить, добавив следующие строки в ваш файл editor-style.css. Вам нужно будет вручную вставить стили, которые вы хотите использовать, в файл. Чтобы узнать, какие стили использовать, вы можете просмотреть исходный код вашего сайта на фронтенде или обратиться к файлам стилей WordPress Core, включая wp-includes/css/editor.css.

Например, вы можете добавить стили для заголовков, абзацев и других элементарных элементов:
```
/* Пример добавления стилей из WordPress Core */
h1, h2, h3, h4, h5, h6 {
   font-family: Arial, sans-serif; /* Укажете свои шрифты */
   margin: 1em 0;
}

p {
   line-height: 1.5;
   font-size: 16px; /* Пример размера шрифта */
}
```
Включение editor-style.css в административной панели:

Для подключения вашего файла editor-style.css необходимо использовать хук admin_init и функцию add_editor_style. Добавьте следующий код в файл functions.php вашей дочерней темы:
```
add_action( 'admin_init', 'custom_editor_styles' );
function custom_editor_styles() {
   add_editor_style( 'editor-style.css' );
}
```
Этот код загружает файл editor-style.css, расположенный в корне вашей дочерней темы, когда вы открываете редактор.
Проверка и тестирование:

После добавления необходимых стилей и кода, проверьте редактор WordPress, открыв любой пост или страницу. Когда вы начнете редактировать содержимое, убедитесь, что стили отображаются так, как вы намеревались. Если стили отсутствуют, убедитесь, что путь к файлу editor-style.css указан правильно и что файл доступен.

Ваш следующий шаг

Важным аспектом является то, что поддержание стилей актуальными — это непрерывный процесс при изменении темы или плагинов. Регулярно проверяйте стиль в редакторе и обновляйте файл editor-style.css по мере необходимости, чтобы поддерживать визуальную схему вашего сайта в редакторе TinyMCE.

Заключение

Подключение CSS WordPress Core в ваш editor-style.css — это замечательный способ поддерживать единый визуальный стиль между редактором контента и вашим опубликованным содержимым. С помощью описанных выше шагов вы сможете сделать редактирование более комфортным и интуитивно понятным, что положительно скажется на вашей производительности как контент-креатора.