Доброго времени суток всем, кто интересуется блогом SEOBID.NET! Сегодняшнюю стать я посвящу строению визуального редактора WordPress, его работе, назначению полей и кнопок, а также улучшению его функционала. Да, на первый взгляд кажется, что работает wordpress текстовый редактор просто. Так оно и есть, но это верно только для тех, кто уже научился управляться со всеми кнопочками и полями.

Новичкам же здесь легко заблудиться, особенно тем, кто до этого работал на других движках и не привык еще к WordPress. А отличия действительно есть, и довольно большие – я работал и с Джумлой, и с DLE, и с другими CMS, поэтому знаю, что говорю.

Стандартный визуальный редактор wordpress в любой версии движка одинаковый, поэтому неважно, обновляли вы свою CMS WordPress, или нет. Вот как выглядит визуальный текстовый редактор для вордпресс:

визуальный текстовый редактор для вордпре

Редактор можно переключать в режим HTML, но работу этого функционала мы рассмотрим ниже, а пока давайте разберем, что к чему в визуальном функционале. Итак:

  1. Первое поле – сода вы вписываете заголовок вашей будущей статьи.
  2. Кнопка «Добавить медиафайл». То есть, вы можете добавить картинку, видео или аудиофайл в запись. Ваш wordpress редактор страниц может также добавить ссылку на изображение или тот же видео- или аудиофайл с другого веб-ресурса.
  3. Кнопка «Сохранить» не публикует запись, а сохраняет ее в черновике. То есть, сохранив стать как черновик, вы всегда можете ее отредактировать или дополнить, а потом только опубликовать. В этом же блоке вы можете изменить видимость записи – установить ей статус «На утверждении», «Открыто», «Прилепить на главную страницу», «Защищено паролем», «Личное» или «Опубликовано».
  4. Кнопка «Опубликовать» говорит сама за себя – если ваша запись полностью готова для того, чтобы появиться на странице блога, вы публикуете ее нажатием этой кнопки.
  5. Поле ввода текста, который вы будете форматировать при помощи блока №9.
  6. Следующий блок, который имеет текстовый редактор для wordpress – выбор рубрики или подрубрики. Если вы публикуете статью, а подходящей рубрики нет – вы можете здесь же создать новую рубрику или подрубрику. Или выбрать несколько подходящих рубрик.
  7. Поле «Метки». Выбор меток для записи из существующего списка или создание новых меток.
  8. Поле «Задать миниатюру». Это понятно – если шаблон поддерживает вывод миниатюр, то они будут отображаться в анонсах записей при выводе рубрик или архивов.
  9. Также визуальный редактор wordpress имеет блок редактирования текста с множеством кнопок и полей. Здесь вы можете выравнивать текст по левой или правой стороне, по центру или по ширине. Вставлять цитаты и простой текст, можно также убирать форматирование и создавать подзаголовки <h1>… <h6>. Работа с шрифтом – можно изменять цвет шрифта, менять цвет текстового поля, выделять текст жирным или курсивом, подчеркивать, назначать ссылки тексту и изображениям. Здесь же можно создавать маркированные и немаркированные списки и вставлять символы, которые не предусмотрены в других редакторах.

Как видите, стандартный визуальный редактор тем wordpress имеет немало, но и н очень много настроек. Чтобы расширить его возможности, был разработан специальный плагин визуальный редактор wordpress под названием TinyMCE Advanced. Он имеет много дополнительных настроек и возможностей, которые мы сейчас и будем изучать.

Плагин TinyMCE Advanced

Установка этого расширения – стандартная, поэтому останавливаться на ней не будем. Перейдем сразу к настройкам плагина wp редактор TinyMCE Advanced:

Настройки плагина wp редактор TinyMCE Advanced

  1. В первом блоке вы будете сразу видеть, как будет выглядеть ваш визуальный wordpress редактор страниц, когда вы станете публиковать запись. Настроек очень много. То есть, вы можете добавить много дополнительных кнопок путем их перетаскивания из блока № 2 в блок № 1. Вот и все настройки.
  2. Блок № 2 – здесь вы видите те кнопки и поля, которые можно добавить в стандартный визуальный редактор стилей и текста, расширив тем самым его возможности.
  3. В блоке № 3 вы можете настроить дополнительные параметры. Это:
    1. Импорт стилей в формате css. Если ваша тема не поддерживает индивидуальные стили для редактора, то вы можете создать CSS-файл с именем редактора style.css и загрузить его в папку с шаблоном темы. После этого действия можно включить этот параметр.
    2. Загрузить CSS стили, используемые в редакторе style.css и заменить форматы кнопок и подменю.
    3. Markdown — текстовый шаблон плагина. Полностью не разобрался, так как плохо дружу с английским. Понял так – можно назначить свои маркеры для форматирования текста, а подробнее – по ссылке, которая есть в этом пункте. Прекрасно обхожусь и без этих настроек.
    4. Убирать тэги <p> И <br /> теги при сохранении и возможность посмотреть их в текстовом редакторе. Это позволит использовать более продвинутое кодирование в HTML-редакторе без серверной фильтрации. Но эта настройка может иногда глючить, как утверждают сами разработчики, поэтому я ее не использую. Перенос строк в HTML-редакторе будет по-прежнему влиять на результат. То есть, не будет наблюдаться пустых строк при переносе строк внутри HTML-тэгов, или при вставке нескольких тэгов <br />.
    5. Изменение размера шрифта. Можно менять «Размер доступных шрифтов»: 8 px, 10 px, 12 px, 14 px, 16 px, 20 px, 24 px, 28 px, 32 px, 36 px.
    6. Включить рамку для картинок. С этой опцией плагин визуальный редактор wordpress будет работать только в Firefox и Safari. Эти браузеры поддерживают вставку изображений прямо в редакторе и конвертируют их в base64. Для больших картинок эта настройка работать не будет, но может быть полезна для очень маленьких изображений весом не более 2-3 кБ. Помните – эти картинки в медиа-библиотеке вашего WordPress сохраняться не будут.

TinyMCE Advanced новые кнопки

После того, как я установил плагин визуальный редактор стилей и текста TinyMCE Advanced и добавил новые возможности стандартному редактору, моя страница для создания записи стала выглядеть так, как показано на скриншоте выше.

Много нужных и полезных настроек, в частности, редактор таблиц wordpress, который мне, например, часто бывает нужен, но в стандартном редакторе нет визуальной возможности менять размеры таблицы, ее цвет и т.д.

Теперь давайте изучим работу визуального редактора в текстовом режиме, то есть – в режиме HTML. Кнопка переключения расположена справа в редакторе.

TinyMCE Advanced HTML

Вот как выглядит HTML wordpress редактор постов – это отформатированный текст в формате HTML. Часто и такое отображение бывает необходимо, особенно, если вам нужно вставить именно HTML код.

И последняя возможность, которую предоставляет текстовый редактор вордпресс в любом формате отображения – вы можете развернуть его на весь экран кнопкой, которая находится прямо под кнопкой «Текст», переключающей редактор в HTML режим. Вот и все, пожалуй, о редакторе и его настройках.

После публикации 2-3 статей вы вполне освоитесь с его возможностями и не будете долго думать, какие кнопки вам нужно нажимать, чтобы правильно отформатировать запись. До встречи!