Расширенный визуальный редактор WordPress TinyMCE Advanced и плагин AddQuicktag для добавления кнопок панели форматирования

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Очевидно, что функционала редактора Вордпресс (как визуальной его части, так и текстовой), встроенного по умолчанию, недостаточно для того, чтобы с максимальным комфортом писать грамотные статьи для своего сайта или блога, не отвлекаясь на какие-то дополнительные телодвижения.

Поэтому сегодняшний пост посвящен плагинам WordPress, которые расширяют возможности этого инструмента, благо разработчики позаботились об этом. Речь пойдет, во-первых, о TinyMCE Advanced, который заменит родной визуальный редактор (вкладка «Визуально»), тем более, что еще с ранних версий WP он не всегда работает корректно и выдает ошибки.

TinyCME Advanced и AddQuicktag для расширения функционала редактора WordPress

Ну и во-вторых, мы рассмотрим настройки AddQuicktag, способного дополнить недостающий комплект HTML кнопок в раздел «Текст». Кстати, для меня именно этот плагин окончательно склонил чашу весов в пользу применения текстового редактора, поскольку с его помощью можно добавить практически любые символы языка гипертекстовой разметки (не только теги).

Плагин TinyMCE Advanced для WordPress — настройки и использование

Итак, если, несмотря на все «танцы с бубнами», в WordPress не работает визуальный редактор, но вы все равно решили применять в дальнейшем исключительно вкладку «Визуально», поскольку нет ни желания, ни времени возиться с тегами, то попробуйте упомянутый TinyMCE Advanced.

Его можно скачать с официального сайта, откуда, к слову, я рекомендую брать все необходимые плагины. Устанавливаете расширение по известной схеме (в этой публикации вы найдете описание всех действий с плагинами WP).

Затем в разделе «Настройки» — «TinyMCE Advanced» найдете два блока (вверху действующий набор кнопок, который будет установлен по умолчанию, а внизу «запасной» арсенал):

Настройка заключается в перетаскивании нужных кнопок из нижней части в верхнюю. И, наоборот, если какие-то опции вам не нужны, то можете спокойно их разместить внизу. Тут же можно отключить меню, которое по умолчанию включено, просто сняв галочку.

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

Скажем, если вам необходимо подчеркнуть фрагмент текста, а в наборе по умолчанию нет необходимой кнопки, то этот недочет можно восполнить, выбрав из раскрывающегося списка «Формат» пункт «Подчеркнутый». Естественно, предварительно нужно выделить нужное слово или словосочетание:

Или же вы пожелаете вставить в текст какую-нибудь химическую формулу. В таком случае в том же разделе выбираете «Нижний индекс» и применяете его к тому символу, который будет объектом данного действа:

Также в дефолтном наборе нет опции «Исходный код». Ее находим в разделе «Инструменты», щелкнув по соответствующей строчке:

Для чего вообще это нужно? Дело в том, что если вы работаете в визуальном редакторе и переходите в область HTML редактора WordPress, то текст там отразится без некоторых тегов форматирования, а иногда это необходимо. Ну, к примеру, мы форматируем заголовок какого-нибудь подраздела статьи:

Если теперь перейти со вкладки «Визуально» в «Текст», то картина будет следующей:

После использования кнопки «Исходный код» тот же фрагмент после перехода во вкладку текстового редактора обретет недостающие теги:

Надеюсь, это понятно, идем дальше. В принципе, назначение всех кнопок форматирования интуитивно понятно, тем более, что плагин TinyMCE Advanced весьма качественно переведен на русский язык. При подводе курсора к любой кнопке как в настройках, так и в окне самого расширенного редактора появляются всплывающие подсказки.

Достаточно сказать, что TinyMCE Advanced позволяет:

  • выделять текст жирным, курсивом, подчеркиванием;
  • помещать цитаты;
  • размещать маркированные и нумерованные списки;
  • выравнивать текст по левому, правому краю и по центру;
  • вставлять и удалять ссылки;
  • осуществлять возврат на несколько шагов назад и вперед (отменять либо повторять ранее произведенные действия);
  • выбирать шрифт, его размеры, цвет;
  • увеличивать-уменьшать отступ;
  • отменять форматирование;
  • вставлять тег «more» («читать далее»).

По этой причине нет смысла подробно разбирать весь функционал. Остановлюсь лишь на тех кнопочках по умолчанию, которые могут вызвать трудности у начинающих пользователей, но которые могут оказаться весьма полезными.

Если вы активируете кнопочку «Вставить как текст», то все скопированное содержание будет вставляться в чистом виде. Это может пригодиться, если вы пожелаете дополнить написанное фрагментом, который вы скопировали из документа Word, и вставить его без форматирования:

В случае необходимости поместить какой-либо спецсимвол HTML жмете соответствующую кнопку «Произвольный символ»:

Из появившегося диалогового окна выбираете нужный знак, который будет вставлен в окно редактора TinyMCE Advanced:

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

Если кликните по значку вопроса, то получите список «горячих клавиш» в качестве альтернативного варианта, которые помогут отображать нужные вам символы.

Дополнительные настройки TinyMCE Advanced

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

Поэтому разберем немного и этот аспект. Итак, пониже основных опций идут три блока, первым из которых является «Параметры»:

В принципе, здесь все корректно переведено на русский язык и интуитивно понятно. По умолчанию включен лишь пункт «Список настроек стилей», который вносит разнообразие в создание маркированных и нумерованных списков, что вполне полезно для всех без исключения.

Я лишь попробовал активировать второй сверху пункт, но родное контекстное меню того же Хрома мне понравилось больше.

Опция «Альтернативный диалог ссылок» позволяет добавить туда атрибут nofollow, но это можно сделать и с помощью добавления соответствующей кнопки, о чем было сказано выше. Так что тут каждый решает сам, насколько это удобнее.

Последний пункт этого блока позволит вам заменить имеющийся размер шрифта на один из указанных тут.

Вторым идет блок «Дополнительные параметры»:

Тоже не вполне бесполезные настройки. Например, активированная опция «Создание меню классов CSS» дает возможность загрузить стили CSS, которые содержатся в файле editor-style.css и служат для отображения элементов, расположенных на странице редактора.

«Сохранять тэги параграфов». Обычно при переходе из текстового редактора в визуальный и обратно теги абзацев p и тег переноса </br> не сохраняются. Это опция сохраняет полностью код гипертекстовой разметки. Но при включении этой функции нужно быть внимательными и вначале протестировать корректность ее работы.

«Включить вставку исходного кода изображения» — эту опцию я даже не тестировал, поскольку она годится только для самых мелких картинок и к тому же не работает в моем любимом Google Chrome (здесь читайте об установке и настройках этого браузера).

Ну и третий блок — «Управление», где можно осуществить импорт и экспорт настроек, отметить галочками усовершенствования для редактора (которые, впрочем, включены уже по умолчанию), а также в любой момент восстановить дефолтные настройки:

В завершение этой части статьи очень качественный видеоролик, который поможет вам надежнее усвоить материал по данной теме:

Добавление недостающих кнопок форматирования в редактор текста Вордпресс посредством AddQuicktag

Кажется, я уже не раз упоминал, что в самом начале своей интернет деятельности по созданию блогов на WordPress я был разочарован вкладкой «Визуально», поскольку ее применение создавало некоторые неудобства, связанные с ошибками в отображении содержания страницы.

Поэтому после нескольких неудачных попыток выправить ситуацию я сразу же приступил к освоению текстовой версии (вкладка «Текст») редактора WP, что ускорило приобретение навыков в практическом освоении языка гипертекстовой разметки (тут читайте о том, что такое HTML).

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

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

После установки AddQuicktag (тут ссылка на скачивание, а при описании WordPress TinyMCE Advanced я предоставил линк на материал, в котором вся информация о порядке установки и всех возможных действиях с плагинами) переходите к его настройке:

Вписываем названия кнопок панели форматирования так, как вам будет удобнее их идентифицировать. Можно указать заголовок (всплывающую подсказку), который будет проявляться после сохранения настроек при подводе курсора к панели форматирования в окне редактора (но это не обязательно):

Далее указываем начало и конец HTML тегов (тут вы можете найти их примеры) и прописываем порядок расположения конкретной кнопки на панели форматирования.

Здесь еще есть опция «Access Key» (хоткей), которая не является ничем иным как возможностью определить «горячие клавиши». Но, к великому сожалению, она почему-то не работает, поэтому я, например, оставил это поле пустым.

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

  • «Визуально» — в визуальный редактор WordPress;
  • post — собственно во вкладку «Текст» для написания статей на страницах записей;
  • page — в текстовый редактор при заполнении контентом статических страниц;
  • attachment — для веб-страниц вложения;
  • comment — для формы комментариев, чтобы пользователям было удобнее вводить свои сообщения;
  • edit comment — для редактирования комментариев в админ панели;
  • widgets — для заполнения содержанием виджетов.

Но здесь надо иметь ввиду, что по умолчанию кнопочки будут работать только для постов, статических страниц и формы комментариев.

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

В принципе, можно отметить все чекбоксы, хуже точно не будет. Чтобы сделать это единым махом, просто поставьте галочку в колонке «✔»:

Вот пример выполненных настроек для тега абзаца p, который является, пожалуй, самым востребованным при написании постов:

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

К примеру, я практически для каждого объемного поста использую оглавление для подразделов, поэтому посчитал уместным поместить эту частичку кода на панель форматирования, чтобы вставлять ее одним кликом:

Теперь при переходе в текстовый редактор и нажатии на кнопочку «div class=»ogl»» шаблон оглавления появится в окне редактирования:

Мне остается лишь вписать заголовки разделов статьи и проставить нужные ссылки. Кроме всего прочего, я нередко применяю при написании постов типографские кавычки, поэтому и такое форматирование добавил на панель HTML-редактора:

Также я установил кнопки тегов заголовков H2 и H3, «nofollow» для вставки одноименного атрибута во внешние ссылки (поскольку Вордпресс такой возможности не предоставляет), операторов [php][/php], между которыми у меня вставляются фрагменты HTML, CSS или PHP кода с подсветкой, оформляемые замечательным плагином SyntaxHighlighter Evolved:

Если на странице настроек AddQuicktag проследовать чуть ниже, то вы встретите раздел Remove Core Quicktag buttons, который содержит список имеющихся в текстовом редакторе кнопочек, которые можно удалить с панели форматирования, если отметите нужные галочками.

В разделе Enhanced Code Quicktag buttons есть еще возможность добавить дополнительное форматирование, включая тег <pre></pre>, в который можно заключить любой код или фрагмент текста.

Тут же можно активировать весьма полезную опцию «htmlentities»,что даст возможность кодировать и декодировать любой спецсимвол. Продемонстрирую это на практике. Допустим, вам нужно просто отобразить на странице какой-нибудь тег, скажем, p.

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

А вот ежели закодировать его с помощью специальных знаков (тут информация о кодировании и декодировании спецсимволов и мнемоник, а также их полная таблица), используя кнопку «HTML Entities»:

То на странице в браузере такая запись отразится как <p></p>. Как вы понимаете, обратная операция производится посредством кнопочки «Decode HTML».

Ну и в заключение хочу отметить, что в AddQuicktag можно также экспортировать и импортировать настройки, используя созданные для этой цели файлы.

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

Работа в интернете
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. scorp13

    Если при переходе из режима html редактора в визуальный у вас «ломается» код, можно просто отключить визуальный редактор для такой страницы.
    Более детально — https://www.scorp13.com/workflow/kak-v-wordpress-otklyuchit-redaktor-dlya-opredelyonnyh-stranic.html

    Ответить
  2. Albertych:

    Вот тебе здаравенское такое СПАСИБО за AddQuicktag!

    Ответить
    1. Игорь Горнов автор

      Albertych: да всегда пожалуйста.

      Ответить
  3. Александр

    А как запретить использовать полную страницу html для документа tinymce?

    Ответить
    1. Игорь Горнов автор

      Александр, не понял вопроса, уточните, что Вы имеете ввиду.

      Ответить
      1. Александр

        Да уже разобрался. Просто после сохранения страницы прописывались в тексте структура html документа (мета теги, тег boby и т.д.)/
        Был просто включен плагин fullpage, удалил его и всё.

        Ответить
        1. Игорь Горнов автор

          А, теперь понятно.

          Ответить