Как добавить дополнительные кнопки в редактор Tinymce WordPress

Как добавить дополнительные кнопки в редактор Tinymce WordPressКогда я вот в этом посте случайно 🙂 написал обзор плагинов, позволяющих добавлять кнопки редактирования текста в комментариях, чтобы все было в wysiwyg стиле tinymce, то я там упомянул Wysiwyg-редактор CKEditor For WordPress. Который кнопки, конечно, добавляет, но при этом до неузнаваемости меняет стандартный редактор TinyMCE, а вернее — подменяет его собою, и не могу сказать, что он мне очень уж сильно понравился. Слишком уж он навороченный, и не могу сказать, что эстетически сильно привлекательный. Тем не менее, некоторые кнопочки из него были бы полезны и в стандартном редакторе, например, я не отказался бы добавить в TinyMCE кнопку якорь, выделение цветом, суперскрипт и сабскрипт, которые там по умолчанию отсутствуют.

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

Стандартный вид

 

Так что, приступим-с. Сначала — для тех, кто не ищет легких путей 🙂  Т.е., хотя я ни разу ни программист, полезем ломать код — тем более, опция добавления этих кнопок присутствует в TinyMCE изначально.

Берем файл  functions.php из папки с нашей темой, у меня, к примеру, он лежит по пути /httpdocs/wp-content/themes/coffeedesk/. Делаем его бэкап, и в самый конец файла добавляем код следующего вида, утащенный мною с одного англоязычного ресурса:

mce_buttons_3 означает, что мы вставляем эти дополнительные кнопки третьим рядом, остальное — понятно из комментариев. Если мало указанных кнопок, то на сайте TinyMCE есть список всех кнопок, которые можно добавить таким образом.

Таким образом, у нас получается что-то в таком духе:

Добавляем кнопки третьим рядом

Однако что делать, если по эстетическим причинам нам не нравится третий ряд кнопок, и пустующее пространство в первом и втором ряду? Методом проб и ошибок выясняется, что можно весьма несложно модифицировать данный код:

Таким образом,  mce_buttons будет означать, что мы вставляем эти дополнительные кнопки в первом ряду, а  mce_buttons_2 — во втором. И вот что у нас получится:

Распределяем кнопки по двум рядам

Вроде ничего, можно оставить и так, да только хочется их, эти кнопочки, получше отсортировать,  чтобы шли по порядку и блоками. Для чего необходимо добавить и поправить еще файлик advanced-wysiwyg.php, и editor_template.js. Кто хочет подробно разобраться — описано вот здесь и здесь, ну и гугль c форумом по TinyMCE, конечно, в помощь.

Но мы же не будем дальше страдать фигней, исследуя сферических коней в вакууме, а просто вернем на место исходный  functions.php, да поставим плагин TinyMCE Advanced — это, наверное, самый простой и правильный путь, с которого и надо было начинать. Также его официальная страница находится здесь. Он дает возможность добавить, удалить, и расположить по порядку (то бишь — сортировать) все кнопки в Tinymce editor, просто таская их мышкой в настройках. И вот как красиво все в результате получилось. Как говорится, найдите десять отличий, кликнув на картинке, и после того, как она выплывет на пол-экрана, попереходите между ними стрелочками:

Используем TinyMCE advanced

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

TinyMCE Advanced в три ряда

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

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
3 комментария
  1. Большое спасибо. Очень полезная информация 🙂

  2. Спасибо! Интересует добавление свой кнопки с шорткодом, можно и как?

  3. Спасибо, помогло, все доходчиво и доступно, благодаря вам теперь могу менять размер и стиль шрифтов в записи. Если можно вопрос не в тему: у меня в атрибутах страницы отображается только  выбор порядка, родительская и шаблон не отображается. Отключал плагины, менял тему не помогает. Как (и куда) добавить (восстановить) эти функции?

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

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


Subscribe without commenting

QR Code Business Card