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

У цій статті ми розглянемо один із розділів системи, яким, без сумніву, час від часу користуються багато веб-майстра. Мова йде про редакторі стилів.

У модифікаціях WordPress до версії 3.0, де ця можливість була введена вперше, щоб побачити, як ваш пост виглядає у вікні браузера користувачів, потрібно було оновити сторінку.

Це пов’язано з тим, що опис стилів в редакторі WordPress TinyMCE істотно відрізняється від стилів, заданих загальними налаштуваннями сайту.

Загальні настройки задаються у файлі styles.css поточної теми. У той час як редактор стилів визначається функціями WordPress.

Як ви можете бачити на малюнку нижче, редактор WordPress використовує для відображення контенту шрифт Serif. У той час як загальними налаштуваннями передбачено використання шрифтів сімейства Sans Serif.

Користувацьке налаштування редактора стилів WordPress

У версії 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;
}

От і все. Тепер таблиця стилів вашого редактора буде включати елементи, передбачені за замовчуванням.

Користувацьке налаштування редактора стилів WordPress

Редактор стилів для 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.

Переклад статті How to Customize WordPress Editor Styles був підготовлений дружною командою проекту Сайтостроение від А до Я.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here