Плагины        25 марта 2014        497         10

Как улучшить функции визуального редактора wordpress? Плагин Ultimate TinyMCE

Всем привет!

Сегодня я расскажу вам про плагин 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, тем самым расширив его стандартные возможности! Желаю всем удачи! Пока и до скорых встреч!

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

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

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

Обсуждение: 10 комментариев
  1. Я, как раз являюсь противником лишних плагинов, но ставить этот не буду хотя бы по той причине, что для поисковиков идеальной странице является страница для печати, т.е. без лишних стилей и т.п..
    Для «страницы для печати» вполне хватает стандартной панели WordPress.

    [Ответить]

    Александр Иванович

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

    [Ответить]

    Александр

    Вы правы, Александр Иванович, многим эта информация пригодиться. Я просто высказал свое мнение.

    [Ответить]

    Ответить
  2. Николай!
    Год назад у меня была проблема с шаблоном.
    Его внешний вид мне нравился, но размер шрифта был очень маленьким. Это я видел сам и об этом говорили в комментариях почти все посетители. Решить эту проблему исправлением кода шаблона мне не удалось по разным причинам. После долгих поисков я решил проблему с помощью плагина Supreme Google Webfonts.
    А вот изучив Вашу статью я немного пожалел, что она не появилась год назад. Плагин Ultimate TinyMCE решил бы мою проблему и не только эту.
    Спасибо за статью!

    [Ответить]

    Николай Коротков

    Всегда пожалуйста, Александр Иванович!

    [Ответить]

    Ответить
  3. А я, читая Ваши статьи, Николай, просто поражаюсь — сколько же возможностей открывается при создании сайта у знающего человека!
    А шрифты ведь и правда бывают неудобочитаемыми: то слишком мелкими, а то и сам их вид отталкивает от чтения.
    Но, оказывается, всё что не удовлетворяет — можно исправить.

    [Ответить]

    Иван

    Ирина!
    Я полностью согласен с вами!
    Я совсем недавно попал на блог к Николю, но уже почерпнул массу полезного.

    [Ответить]

    Ответить
  4. Действительно, оказывается, что всё не удовлетворяющее тебя можно настроить, а всё поломанное тобой по причине малых знаний исправлено. Не зря говорят: «Знание — сил» Хотя я больший сторонник лозунга: «Знание и сила»

    [Ответить]

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

    [Ответить]

    Ответить
  6. У меня проблема с данным плагином, нету изображений кнопочек в визуальном редакторе, при наведении на пустое место появлятся титл кнопки но ее не видно. Хотя данный плагин был рекомендован моей темой, кстати подобная беду у меня и с другими анологичными плагиними, в нете нигде не могу найти решения, у всех все работает (((

    [Ответить]

    Ответить

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Поиск по блогу
Подписка на обновления

Введите Ваш e-mail:

rss

twitter

 google

Интересная информация
Хостинг от Макхост

ВОСПОЛЬЗУЙТЕСЬ ПРИ РЕГИСТРАЦИИ КУПОНОМ "blogiseo" И ПОЛУЧИТЕ 3 МЕС. БЕСПЛАТНОГО ИСПОЛЬЗОВАНИЯ ХОСТИНГА ПО ТАРИФУ МАК-10.