n-wp.ru — блог о WordPress
Как сделать визуальный редактор WYSIWYG-редактором | n-wp.ru

Как сделать визуальный редактор WYSIWYG-редактором

В комментариях к посту, описывающему как добавить свои стили оформления в визуальный редактор, Grawl заметил, что было бы неплохо использовать свое оформление постов в визуальном редакторе, чтобы то, что вы пишите, отображалось в редакторе точно так же, как и на страницах блога. Так работает Windows Live Writer — он может отображать содержимое постов именно в таком виде, в каком оно выводится в блоге. Так почему бы не сделать то же самое и в стандартном визуальном редакторе, сделав его настоящим WYSIWYG-редактором? Преображение визуального редактора в WYSIWYG-редактор состоит из трех простых шагов.

Шаг 1 — добавление стилей

Откройте файл functions.php, и добавьте в него строчку:

custom-editor-style.css — этот файл должен находиться в папке с темой.

Шаг 2 — описание стилей

Нужно узнать, какой стиль оформления используется в вашей теме. Обычно содержимое постов описывается классом post. Например:

Узнать это можно, изучив код файла single.php. Будем считать, что посты оформляются так, как указано в примере. Значит нужно добавить в файл custom-editor-style.css оформление различных элементов, которые вы используете в визуальном редакторе. Откройте этот файл, вставьте в него, например, такое оформление:

Чтобы в визуальном редакторе все выглядело так же, как и в блоге, оформление всех этих элементов так же должно быть точно таким, как и в блоге. Узнать, как оформлены элементы HTML в вашем блоге можно, изучив файл style.css.

Шаг 3 — активация индивидуального оформления в визуальном редакторе

Оформление создано, подключено к основному стилю, осталось только задействовать его в визуальном редакторе. Для этого откройте файл functions.php и добавьте в него код:

После этих трех шагов содержимое визуального редактора будет выглядеть точно так же, как и после его публикации в блоге, то есть визуальный редактор станет по-настояшему WYSIWYG-редактором (What You See Is What You Get — что вижу, то и получу).

Об этом же самом, только по-английски, написано тут: Make the Visual Editor Actually WYSIWYG

Как сделать визуальный редактор WYSIWYG-редактором

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

2 комментария

  • Странно почему то не вышло…
    Отображается часть (одна кнопка), хотя стиль в custom-editor-style.css — воткнул весь из темы (и частично пробовал). Правда шорткоды которые используются «интенсивно» тоже имеют свой стиль и их также втыкал…
    А можно ли указать в
    add_editor_style(‘custom-editor-style.css’); — стиль темы и к шорткодам, а не пихать все в отдельный стиль?

/* ]]> */