Всем привет!

Сегодня я расскажу вам про плагин Ultimate tinyMCE, позволяющий значительно расширить функции стандартного визуального редактора wordpress.

как добавить кнопку в редактор wordpress

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

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

Итак, начнем! Все кто работает с движком wordpress, прекрасно знают, как выглядит рабочая панель стандартного визуального редактора:

плагин ultimate tinymce-1

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

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

Плагин Ultimate TinyMCE. Совершенствуем визуальный редактор wordpress

Скачать плагин Ultimate TinyMCE можно на этой странице. Далее, устанавливаем его на свой блог и активируем. Кто не знает, как устанавливаются плагины, почитайте эту статью. После установки и активации плагина, в административной панели вашего ресурса появится дополнительная вкладка Ultimate TinyMCE:

как добавить кнопку в редактор wordpress-2

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

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

Для того чтобы та или иная кнопка отобразилась в рабочей панели визуального редактора, достаточно в столбце «Enable», напротив нужной кнопки установить галочку. Помимо этого плагин предлагает самостоятельно выбрать расположение кнопок, что можно сделать в столбце «Row Selection»:

как добавить кнопку в редактор wordpress-3

Как вы, наверное, заметили, все кнопочки в панели редактора располагаются в две строки, но благодаря Ultimate tinyMCE можно увеличить количество строк до четырех, но не больше. Этому способствует значение «ROW», что в переводе означает «Строка».

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

Если из списка выбрать, например значение «ROW 3», кнопка с функцией переместится на третью строку. Я думаю, это понятно! Активировав все дополнительные функции (я насчитал 53) и раскидав их по строкам, у меня получилась вот такая картина:

плагин ultimate tinymce-4

Впечатляет, не правда ли? И забыл упомянуть, что при добавлении или удалении какой-либо функции, не забывайте в самом низу плагина нажимать кнопку «Update Buttons Options» для сохранения настроек.

Как расширить функционал визуального редактора wordpress с помощью кода

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

Итак, какие функции можно добавить с помощью кода и как это сделать?

1. Можно добавить «Семейство шрифтов», т.е. вы сможете выбрать из списка нужный вам шрифт и написать им целый пост или небольшой отрывок. Для реализации данной функции, откройте на редактирование файл functions.php (путь до файла: корневая папка вашего блога/wp-content/themes/название темы (шаблона)/functions.php).

Внимание: перед редактированием файла functions.php обязательно делайте резервную копию во избежание неверных действий!

Открыв файл, найдите в самом конце тег: ?> и сразу перед ним вставьте вот этот код:

add_filter('mce_buttons_2', 'add_fontselect_row_2' );
 function add_fontselect_row_2( $mce_buttons ) {
 $pastetext = array_search( 'pastetext', $mce_buttons );
 $pasteword = array_search( 'pasteword', $mce_buttons );
 $removeformat = array_search( 'removeformat', $mce_buttons );
 unset( $mce_buttons[ $pastetext ] );
 unset( $mce_buttons[ $pasteword ] );
 unset( $mce_buttons[ $removeformat ] );
 array_splice( $mce_buttons, $pastetext, 0, 'fontselect' );
 return $mce_buttons;
 }
 add_filter('tiny_mce_before_init', 'restrict_font_choices' );
 function restrict_font_choices( $initArray ) {
 $initArray['theme_advanced_fonts'] =
 'Andale Mono=andale mono,times;'.
 'Arial=arial,helvetica,sans-serif;'.
 'Arial Black=arial black,avant garde;'.
 'Book Antiqua=book antiqua,palatino;'.
 'Comic Sans MS=comic sans ms,sans-serif;'.
 'Courier New=courier new,courier;'.
 'Georgia=georgia,palatino;'.
 'Helvetica=helvetica;'.
 'Impact=impact,chicago;'.
 'Symbol=symbol;'.
 'Tahoma=tahoma,arial,helvetica,sans-serif;'.
 'Terminal=terminal,monaco;'.
 'Times New Roman=times new roman,times;'.
 'Trebuchet MS=trebuchet ms,geneva;'.
 'Verdana=verdana,geneva;'.
 'Webdings=webdings;'.
 'Wingdings=wingdings,zapf dingbats'.
 '';
 return $initArray;
 }


Сохраните файл и переместите его обратно в папку с темой вашего блога с заменой старого.

2. Добавляем кнопки горизонтального разделителя, верхнего и нижнего индекса, размер шрифта, изменение стилей и цвет фона. Для этого все в тот же файл functions.php, перед тем же тегом ?> добавляем следующий участок кода:

function add_more_buttons($buttons) {
 $buttons[] = 'hr';
 $buttons[] = 'del';
 $buttons[] = 'sub';
 $buttons[] = 'sup';
 $buttons[] = 'fontselect';
 $buttons[] = 'fontsizeselect';
 $buttons[] = 'cleanup';
 $buttons[] = 'styleselect';
 $buttons[] = 'backcolor';
 return $buttons;
 }
 add_filter("mce_buttons_3", "add_more_buttons");


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

как добавить кнопку в редактор wordpress-5

На этом у меня все и теперь вы тоже знаете, как добавлять функциональные кнопки в редактор wordpress, тем самым расширив его стандартные возможности! Желаю всем удачи! Пока и до скорых встреч!

-->Подписаться на обновления блога<--

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

С уважением, Николай Коротков