Пользовательская настройка редактора стилей WordPress

С завидной регулярностью, примерно 2 или 3 раза в год, разработчиками выпускается новая версия WordPress. И в каждой из них обязательно в числе прочих изменений вводятся либо новые функции, либо дополнения и улучшения для уже существующих.

В этой статье мы рассмотрим один из разделов системы, которым, без сомнения, время от времени пользуются многие веб-мастера. Речь идет о редакторе стилей.

В модификациях WordPress до версии 3.0, где эта возможность была введена впервые, чтобы увидеть, как ваш пост выглядит в окне браузера пользователей, нужно было обновить страницу.

Это связано с тем, что описание стилей в редакторе WordPress TinyMCE существенно отличается от стилей, заданных общими настройками сайта.

Общие настройки задаются в файле styles.css текущей темы. В то время как редактор стилей определяется функциями WordPress.

Как вы можете видеть на рисунке ниже, редактор WordPress использует для отображения контента шрифт Serif. В то время как общими настройками предусмотрено использование шрифтов семейства Sans Serif.

В версии WordPress 3.0 реализована возможность настроить редактор стилей так, чтобы он соответствовал стилям вашей темы.

Давайте рассмотрим на практике, как это делается.

Функция изменения редактора стилей

Новые стили можно добавлять в редактор с помощью функции add_editor_style (). Для этого сначала нужно создать отдельную таблицу новых стилей для Вашего редактора. Если вы назвали ее editor-style.css, то добавить этот набор в файл functions.php вашей темы можно с помощью следующего кода:

add_editor_style('editor-style.css');

Эта таблица должна содержать стили для всех элементов вашего сайта. Таких, как абзацы, заголовки, ссылки и изображения. Но если вы не уверены, что именно нужно в нее включить, можно поступить следующим образом:

Скопируйте содержание файла стилей одной из тем WordPress по умолчанию (например, TwentyTen) в свой новый файл editor-style.css.

Затем вы можете редактировать в нем те элементы, которые хотите изменить под свою тему. А чтобы задать размеры tinyMCE вы можете добавить в свою новую таблицу стилей следующий код:

html .mceContentBody {  
    max-width: 640px;  
    padding: 10px;  
}

Вот и все. Теперь таблица стилей вашего редактора будет включать все элементы, предусмотренные по умолчанию.

Редактор стилей для Post Types

В версии WordPress 3.0 реализована также функция Post Types, которая значительно расширяет возможности создания контента разных типов. По умолчанию WordPress поддерживает создание двух типов контента: Страницы и Записи (посты). Используя Post Types, вы сможете создать два дополнительных типа: Продукты и Портфолио. Они предусматривают возможность более гибкой пользовательской настройки.

Например:

Чтобы добавить новый Редактор стилей для Вашего Post Types, вы можете добавить следующий код в файл functions.php:

function my_theme_add_editor_styles() {
    global $post;
    $post_type = get_post_type($post->ID);
    $editor_style = 'editor-style-' . $post_type . '.css';
    add_editor_style( $editor_style );
}
add_action('pre_get_posts', 'my_theme_add_editor_styles' );

Теперь в директории с темой вашего сайта создана новая таблица стилей со следующим названием editor-style-{post_type}.css.

Если вы ходите задать другое имя, то просто поменяйте значение переменной $ editor_style.

Больше о возможностях пользовательской настройки редактора стилей вы можете прочитать, перейдя по ссылке WordPress.org Codex.