Расширение возможностей редактора WordPress. Плагин TinyMCE Advanced.

Опубликовано: 01.09.2018

Оглавление:

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

Визуальный редактор wordpress (TinyMCE Advanced)

Для начала давайте посмотрим, как выглядит стандартное меню редактора Wordpess. Для начала мы узнаем, как создавать новую запись. В панели меню выбираем пункт Записи – Добавить новую .

Как увеличить возможности визуального редактора движка WordPress

Перед вами откроется окно редактора записей и страниц Вордпресс. В верхней части текстового поля мы видим одну-единственную строку меню.

Если вы работали в текстовом редакторе Microsoft Word, то легко узнаете иконки знакомых кнопок. В верхней части располагается кнопка «Добавить медиафайл», с помощью которой мы можем добавлять на нашу страницу картинки, аудио и видеофайлы. Ниже идет выпадающий список, в котором мы можем назначить тип заголовка. Далее – стандартный набор функций: работа со шрифтом, кнопки назначение маркированного и нумерованного списка, цитата, выравнивание по (левому краю/ середине/ правому краю), вставить/удалить ссылку или тег «далее» и кнопка показа/скрытия панели инструментов. Если нажать эту последнюю кнопку, то в нашем меню появится вторая строка, где мы увидим дополнительные функции – работа с цветом текста, отступами, кнопки «Отменить» и повторить и другие.

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

Установка плагина.

Процедура установки плагинов довольно подробно описана в статье «Как закрыть доступ к сайту плагином» . Ничего сложного тут нет. Идем в боковую панель, выбираем «Плагины – Добавить новый». В текстовом окне «Поиск плагинов» вбиваем название нашего плагина — TinyMCE Advanced. Ищем!

После того, как наш плагин нашелся, нажимаем кнопку «Установить». Если вдруг нам пишут, что плагин не совместим с нашей версией WordPress – обновляемся до последней версии. Когда плагин установится, нажимаем кнопку « Активировать ». Через несколько секунд наш плагин появится в списке установленных плагинов. Давайте нажмем кнопочку « Настроить » и посмотрим, какие же настройки есть у этого плагина.

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

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

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

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

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

Я себе настроил вот такую панель инструментов. Мне удобно – все под рукой.

Какие новые возможности редактора у нас появились при установке плагина TinyMCE Advanced? Давайте вкратце рассмотрим их.

Возможность выбора разных типов шрифтов и их размеров. За эти функции отвечают два выпадающих списка: «Семейство шрифтов» и «Размеры шрифтов». Шрифты из стандартного набора шрифтов Windows. Очень нужная функция. Не нужно применять никакие стили к тексту, лезть в файлы шаблонов, а двумя кнопками в редакторе оформить текст так, как вам нужно.

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

Появилась кнопка «Найти и заменить», которая вызывает следующую панельку (см. скриншот ниже).

Появилась возможность вставлять простые таблицы. Конечно же, это не сложные эксель-таблицы, но для потребностей простых блоггеров таких таблиц вполне достаточно. Инструмент «Таблица» вызывается либо одноименной кнопочкой, либо одноименным пунктом в панели меню. Задаете нужное количество столбцов и строк, и редактор строит вам таблицу. После ее создание можно щелкнуть правой кнопкой по таблице и поменять свойства ячеек, строк или столбцов.

Расширены возможности списков. Теперь можно делать различные виды списков.

с установкой плагина появляется такая полезная функция, как «Просмотр блоков».

С помощью этой функции вы сможете визуально оценить, как на самом деле оформлен текст вашей статьи. Не всегда можно понять, как в редакторе оформлен ваш текст — автоматически появляются какие-то отступы и пробелы, хотя вы ничего не задавали. Это происходит потому, что редактор WordPress теги переносов строк и абзацев задаются автоматически. Все это сделано для удобства пользователей. Когда вы нажимаете клавишу «Enter», любой написанный вами выше текст оборачивается в теги абзаца. Причем эти теги вы не увидите, даже если перейдете на вкладку «Текст».

Из картинки выше видно, что два первых абзаца взяты в теги абзаца <p>, а цитата взята в теги абзаца и теги цитаты <blockquote>. Нумерованный список завернут в теги <ol>. Когда человек только начинает разбираться с сайтостроением и не знаком со многими тонкостями, это поведение редактора может его озадачить, поэтому важно знать, как работает редактор записей и страниц WordPress. Может быть, даже лучше перед созданием первой записи изучить главные теги HTML для оформления текста. Если вы создаете новый шаблон или при редактируете стили уже имеющегося у вас шаблона, это очень важно.

Плагин TinyMCE Advanced позволяет увидеть настоящий исходный код текста вашей статьи без вырезанных тегов. За включение функции отвечает кнопка «Исходный код». Либо можно выбрать пункт «Исходный код» в панели меню в разделе «Инструменты».

Допустим, во вкладке «Текст» написанный вами текст выглядит вот так:

А если мы будем использовать функцию «Исходный код», то увидим:

Здесь мы видим текст нашей записи с уже расставленными редактором тегами абзацев. Именно такой код будет в опубликованной на сайте записи. Редактор во вкладке текст опускает все простые теги (абзацев, отступов, переносов строк), чтобы облегчить работу новичкам. Но иногда это несоответствие кода во вкладке «Текст» и исходного вида записей может раздражать. Для начала новичкам сойдет и такой расклад — ведь редактор автоматически расставляет теги для работы с текстом. Позже, когда вы немного разберетесь в коде, то сумеете отредактировать файл стилей, чтобы оформлять записи так, как нужно именно вам.

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

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

Давайте теперь вернемся снова в настройки плагина TinyMCE Advanced и рассмотрим оставшиеся настройки под панелью неиспользованных кнопок .

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

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

При включенной функции стандартный диалог заменяется на:

Нужно ли вам это — решайте сами. Мне не нужно.

Пункт ниже («Альтернативный диалог ссылок») позволяет заменить простой диалог ссылок на расширенный. Ниже на картинках показан диалог, открываемый при нажатии на кнопку вставки ссылок до и после применения данной функции. По сути, второй вариант удобен тем, что открывает сразу одно окно, где находятся все настройки, в то время как в первом варианте, чтобы перейти к настройкам ссылок, нужно открывать дополнительное окно, нажав на кнопку «Настройки» с иконкой колесика. Во втором варианте появляется возможность ввести тег Nofollow , а также функция «Открывать в новом окне» заменена на выпадающий список «Цель». Мне по нраву первый вариант, поэтому я оставляю эту функцию отключенной.

Последний пункт «Размеры шрифта» и описание к нему говорит само за себя.

Настройки ниже — это параметры для продвинутых пользователей. Сейчас мы не будем их рассматривать и вернемся к ним, когда вы станется «продвинутым пользователем». А на сегодня у меня все. Надеюсь, эта статья помогла вам, и теперь после установки плагина TinyMCE Advanced работать над созданием новых записей вам станет удобнее и приятнее. До скорых встреч. На следующем занятии мы научимся создавать первую запись на своем блоге .