» » » Добавляем свои кнопки в редактор TinyMCE WordPress
logotip

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

Все привет! Сегодня на seo-mayak.com очень интересный урок на тему, как добавить свои кнопки в редактор TinyMCE WordPress.

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

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

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

knopki v tinymce

Позже я выяснил, что некоторые функции редактора WordPress просто не активны и их надо включать. В конце статьи я расскажу как это делается.

Безусловно стоит научиться добавлять свои кнопки в редактор WordPress, этим вы значительно упростите себе жизнь!

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

Вы когда-нибудь создавали плагины самостоятельно? Я думаю, что нет. Тогда самое время написать плагин собственными руками. Поехали!

Регистрация плагина в WordPress

Итак, поставим перед собой такую задачу, добавить кнопку в 3 ряд. Т.е. мы будем создавать еще один ряд кнопок, для удобства их использования.

Шаг№1. С помощью редактора Notepad++ (о функциях редактора читайте здесь) открываем для редактирования файл functions.php и в самый конец перед знаком «?>» вставляем следующее:

function mayak_button()
 {
 if ( current_user_can('edit_posts') && current_user_can('edit_pages') )
 {
 add_filter('mce_external_plugins', 'mayak_plugin');
 add_filter('mce_buttons_3', 'mayak_register_button');
 }
}

add_action('init', 'mayak_button');

Немного поясню, в строчке:

add_filter('mce_buttons_3', 'mayak_register_button');

Мы указали номер ряда кнопок в редакторе:

mce_buttons_3

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

Мы, немного опережая события, зарегистрировали плагин, который еще пока не создали. Так давайте его уже создадим.

Создания плагина для добавления кнопок в редактор WordPress

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

Шаг №2. В редакторе Notepad++ создаем новый файл, который назовем «newbuttons.js». Расширение «.js» файлу ставить обязательно потому, что плагин написан на языке JavaScript.

В созданный файл вставляем следующий код:

(function() {
 tinymce.create('tinymce.plugins.mayak', {
 init : function(ed, url) {
 ed.addButton('yellow', {
 title : 'Желтый фон',
 image : url+'/images/Название изображения.png',
 onclick : function() {
 ed.selection.setContent('[yellow]' + ed.selection.getContent() + '[/yellow]');
 }
 });
 },
 createControl : function(n, cm) {
 return null;
 },
 });
 tinymce.PluginManager.add('mayak', tinymce.plugins.mayak);
})();

Теперь давайте разберемся, что тут надо переделать под себя.

В четвертой строке функции:

ed.addButton('yellow', { 

В одинарных кавычках (‘yellow’) мы пишем название кнопки, чтобы не путаться, указываем короткий код, за вывод которого будет отвечать данная кнопка.

В пятой строке, опять же в одинарных кавычках, пишем title для кнопки. В данном случаи при наведении курсора на кнопку в редакторе всплывет подсказка — «Желтый фон».

В шестой строке нам надо будет указать путь до изображения кнопки, которое надо будет создать в фотошопе, но об этом чуть позже.

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

[yellow]Выделенный участок текста[/yellow]

Сохраняем файл в кодировке:

zapret po ip4

Больше в функции ничего настраивать не надо.

Шаг №3. С помощью FTP клиента Filezilla закидываем его в папку «js», которая находится в папке с Вашей темой. Если такой папки нет, то надо ее создать.

Итак, плагин мы написали, теперь его надо подключить к файлу funtions.php. Чуть ниже кода, который мы вставили на первом шаге, вставляем следующее:

function mayak_plugin($plugin_array){
 $plugin_array['mayak'] = get_bloginfo('template_url').'/js/newbuttons.js';
 return $plugin_array;
}

Шаг №4. Далее нам надо зарегистрировать в редакторе TinyMCE нашу новую кнопку. В файл functions.php вставляем такую функцию:

function mayak_register_button($buttons){
 array_push($buttons, "yellow");
 return $buttons;}

Во-второй строке функции в двойных кавычках пишем название кнопки, которое мы прописали в плагине на 2 шаге.

Шаг №5. В фотошопе создаем изображение кнопки размером 20х20 пикселей в формате «.png» с любой картинкой или буквой, это неважно. У меня получилось вот такое изображение:

bitton

Шаг №6. В папке «js» создаем новую папку и называем ее «images» и закидываем в нее созданное изображение.

Шаг №8. В файле newbuttons.js в шестой строке прописываем название изображения.

В итоге получаем вот такой результат:

knopki tinymce1

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

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

Ну хорошо, а если потребуется добавить несколько кнопок, то как тогда быть, неужели придется писать еще один плагин?

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

Как добавить в редактор несколько кнопок

Итак, чтобы добавить в редактор вторую и последующие кнопки, надо в файле newbuttons.js после 10 строки, где находятся знаки «});» вставить такой код:

ed.addButton('privet', {
 title : 'Приветствие',
 image : url+'/images/privet.png',
 onclick : function() {
 ed.selection.setContent('[privet]' );
}
 });

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

Целиком функция должна выглядеть следующим образом:

function() {
 tinymce.create('tinymce.plugins.mayak', {
 init : function(ed, url) {
 ed.addButton('yellow', {
 title : 'Желтый фон',
 image : url+'/images/Название изображения.png',
 onclick : function() {
 ed.selection.setContent('[yellow]' + ed.selection.getContent() + '[/yellow]');
 }
 });
 ed.addButton('privet', {
 title : 'Приветствие',
 image : url+'/images/Название изображения.png',
 onclick : function() {
 ed.selection.setContent('[privet]');
 }
 });
 },
 createControl : function(n, cm) {
 return null;
 },
 });
 tinymce.PluginManager.add('mayak', tinymce.plugins.mayak);
})();

Затем в файле functions.php регистрируем новую кнопку. В уже имеющуюся функцию просто добавляем еще одно название:

array_push($buttons, "privet");

Целиком функция должно выглядеть так:

function mayak_register_button($buttons){
 array_push($buttons, "yellow");
 array_push($buttons, "privet");
 return $buttons;}

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

knopki tinymce2

Все последующие кнопки вставляются по аналогичному сценарию.

В самом начале статьи я обещал Вам показать как включаются «спящие» функции редактора TinyMCE. Сказано -сделано!

Как включить дополнительные кнопки в редакторе TinyMCE WordPress

Как я уже говорил эти дополнительные функции уже прописаны в редакторе, только они не активированы.

Чтобы их активировать в файл functions.php надо вставить следующий код:


function add_more_buttons($buttons) {
 $buttons[] = 'fontselect'; // разные шрифты
 $buttons[] = 'fontsizeselect'; // размеры шрифтов
 $buttons[] = 'styleselect'; // стили
 $buttons[] = 'backcolor'; // цвет фона
 $buttons[] = 'sup'; // верхний индекс
 $buttons[] = 'sub'; // нижний индекс
 $buttons[] = 'anchor'; // якорь
 $buttons[] = 'hr'; // разделительная черта
 return $buttons; }
add_filter("mce_buttons_4", "add_more_buttons");

Вот что в итоге должно получиться:

knopki tinymce3

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

На сегодня у меня все. Как Вам статья?

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

Статьи по теме:

Кнопка в редактор TinyMCE для ajax-ссылки
Добавление кнопок в html редактор WordPress

Комментарии: 41

  1. Александр:

    Интересная информация по добавлению дополнительных кнопок в редактор TinyMCE.Спасибо.

    Ответить
  2. Анна:

    Ум меня TweetMeme Retweet Button. Мне эта статья не подходит или можно так же все вставлять и в этот плагин?

    Ответить
    • Виталий Кириллов:

      Анна, я с TweetMeme Retweet Button не знаком и точно не могу сказать.

      Ответить
    • Sasha:

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

      Ответить
  3. Наталья:

    Спасибо, Виталий! Как всегда оперативно, доступно, подробно и интересно. Попробую реализовать у себя на сайте.

    Ответить
    • Виталий Кириллов:

      Пожалуйста Наталья!

      Ответить
      • Наталья:

        Виталий, у меня почему-то не получилось реализовать все так, как надо. Добавились не те кнопки, для которых я создала рисунки, а стандартные с надписями в неправильной кодировке (до меня потом дошло, что надо было js файл в другой кодировке сохранять), ну и кноки маленькие, а надписи длинные, в общем я не стала больше заморачиваться и нашла более простое решение… без создания плагина, редактирования function.php и создания изображений. Всего-навсего в файле quicktags.js, что в папке wp-includes/js нужно добавить одну строку:
        [php]edButtons[150]=new c.TagButton("z","z","","","z");[/php]
        Это, правда, для html-редактора, которым я и пользуюсь. Ну, и неудобно при обновлении водрпресс.

        Ответить
        • Виталий Кириллов:

          Наталья, я этот способ знаю, но я не стал его предлагать читателям, как раз из-за того, что после каждого обновлениям WordPress надо редактировать файл quicktags.js. Я действительно забыл сказать в статье про кодировку. Спасибо, что подсказали, сейчас поправлю.

          Ответить
  4. Елена:

    После прочтения статьи у меня возникло два вопроса:
    1. Как узнать, какой именно у меня стоит редактор и что это именно TinyMCE WordPress?
    2. Если я надумаю поменять шаблон темы, сделанные кнопочки останутся, или придется их ставить по-новому?

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

    Ответить
    • Виталий Кириллов:

      1. TinyMCE — это стандартный редактор WordPress. Если Вы его не меняли на другой, то у Вас именно TinyMCE.
      2. Конечно придется все делать заново и боюсь это коснется не только кнопок.

      Ответить
  5. Светлана:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Светлана! Обязательно попробуйте.

      Ответить
  6. Евгений:

    В TinyMCE advanced не работает. Как там создать свою кнопку, не подскажете?

    Ответить
    • Виталий Кириллов:

      К сожалению не подскажу!

      Ответить
  7. Алекс:

    Совет бодрый! Но у меня не вышло с первого раза! Пришлось внимательно перечитать статью и только тогда лед тронулся и все получилось!

    Ответить
  8. Олег:

    Статья супер 🙂
    У меня вопрос к вам как знатоку.
    Вчера неожиданно обнаружил, что в WP набор кнопок отличается для администратора и Редактра.
    У администратора — 2 строчки, а у Редактора всего одна.
    Что за хрень такая? Вы не можете подсказать, как добавить вторую строчку для Редактора?
    Заранее благодарю!

    Ответить
    • Виталий Кириллов:

      Олег, к сложению я не сталкивался с данной проблемой.

      Ответить
  9. Игорь:

    Добрый день! Подскажите пожалуйста, как добавить кнопку со своим определеным цветом

    Ответить
    • Виталий Кириллов:

      Игорь вы имеете цвет кнопки, или цвет фона, который кнопка будет добавлять?

      Ответить
  10. Val:

    Виталий, здравствуйте!

    Скажите, а такое выделение, как у вас (серый цвет и лампочка), как сделать?
    Способ в статье понятен, но он довольно простой. А то, что я спрашиваю, гораздо сложнее для меня. Куда и что нужно добавить, чтобы поставилась картинка?

    Ответить
    • Виталий Кириллов:

      Картинки в CSS добавляются в качестве фона, например:

      background:url(images/картинка.jpg)
      

      Картинка должна находиться в папке с темой, в отдельной папочке images.

      Ответить
  11. Александр Каратаев:

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

    Ответить
  12. Артём:

    Скажите пожадуйста, почему у меня возникает ошибка: Fatal error: Call to undefined function add_action() in /wp-includes/functions.php on line 4823

    Ответить
    • Виталий Кириллов:

      Значит у Вас ошибка в файле functions.php в строке 4823. Ошибка в синтаксисе языка.

      Ответить
      • Артём:

        После переноса кода в functions.php, который расположен в папке с темой заработало.
        Ещё такой вопрос: а как ещё добавить кнопку на вкладку «текст»?

        Ответить
        • Виталий Кириллов:

          Это темя для целой статьи. Как нибудь напишу об этом, а пока Google в помощь.

          Ответить
  13. Алексей:

    Здравствуйте! Сработает ли данный метод оборачивания если вместо []….[/] использовать …?
    Хотел использовать данный метод для обертки видео с ютубы под адаптивный шаблон

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Думаю должено сработать.

      Ответить
  14. Андрей:

    Здравствуйте! Подскажите пожалуйста, как переносить цветной текст в статью Вордпресс? Потом сложнее раскрашивать

    Ответить
  15. Игорь:

    Здравствуйте, у меня не отражаются кнопки верхнего и нижнего индекса, а так же якорь. И еще, можно как нибудь добавить кнопку «Таблица»?
    Спасибо.

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Игорь:

        Мне просто хотелось убрать плагин вообще ))

        Ответить
  16. Алексей:

    Здравствуйте! Сделал всё как написано у вас но результата нет кнопка не появляется Это может зависеть от версии вордпресса стоит последняя!?

    Ответить
    • Виталий Кириллов:

      Алексей, скорее всего просто где-то ошибка, у меня все работает, хотя может шаблон и конфликтовать в чем-нибудь.

      Ответить
  17. Андрей:

    Доброго времени!
    У меня вопрос не по теме. Подскажите пожалуйста, каким образом делать ссылку в тексте по типу «тут» и «там»? Это тот случай, когда этот участок текста выделен иным цветом и при нажатии на него происходит переход по скрытой ссылке.

    Ответить
    • Виталий Кириллов:

      Делается это с помощью стилей.
      Примерно так:

      .class {
          position: absolute;  
          top: 0;  
          left: 0;  
          display: block;  
          width: 100%;  
          height: 100%;  
          text-decoration: none;  
          z-index: 1;  
      }
      
      Ответить
  18. Николай:

    Ultimate TinyMCE-а в этом плагине нельзя сделать изменения, чтобы при обновлении WordPress не восстанавливать заново. Или вносить все изменения в functions.php Дочерней темы?

    Ответить
    • Виталий Кириллов:

      Можно и в дочернею тему, если functions.php в ней подключен.

      Ответить
  19. Николай:

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

    Ответить
    • Виталий Кириллов:

      Видать путь до файла js надо было по-другому указать…

      Ответить
  20. Николай:

    А как изменить шрифт внутри редактора wordpress (чтобы он был таким же, как на сайте) а так же — уменьшить ширину редатора до 620px.

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS