Все привет! Сегодня на seo-mayak.com очень интересный урок на тему, как добавить свои кнопки в редактор TinyMCE WordPress.
По умолчанию редактор TinyMCE имеет ограниченный функционал, который можно и нужно расширить для облегчения собственного труда.
В начале своей деятельности в качества веб-мастера, в силу своей некомпетентности, я понятия не имел о возможности настроить редактор, как говориться, под себя.
Для расширения функционала TinyMCE я пробовал использовать различные плагины, коих предостаточно, но быстро от них отказался, так как они создавали не хилую нагрузку на сервер.
Позже я выяснил, что некоторые функции редактора 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]
Сохраняем файл в кодировке:
Больше в функции ничего настраивать не надо.
Шаг №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» с любой картинкой или буквой, это неважно. У меня получилось вот такое изображение:
Шаг №6. В папке «js» создаем новую папку и называем ее «images» и закидываем в нее созданное изображение.
Шаг №8. В файле newbuttons.js в шестой строке прописываем название изображения.
В итоге получаем вот такой результат:
Теперь, если выделить любой участок текста и нажать на кнопку, то текст автоматически обернется в заданные теги.
Я старался как можно подробней описать все шаги по внедрению своей кнопки в редактор 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;}
Конечно надо создать еще одно изображение кнопки и закинуть его на сервер по вышеописанной инструкции. Вот она, наша вторая кнопочка:
Все последующие кнопки вставляются по аналогичному сценарию.
В самом начале статьи я обещал Вам показать как включаются «спящие» функции редактора 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");
Вот что в итоге должно получиться:
Возможно этот урок не из самых простых, но зато результат Вас порадует. Мы, без использования «тяжелых» плагинов, добавили свои кнопки в стандартный редактор WordPress, тем самым значительно расширив его функционал.
На сегодня у меня все. Как Вам статья?
С уважением, Виталий Кириллов
Статьи по теме:
Кнопка в редактор TinyMCE для ajax-ссылки
Добавление кнопок в html редактор WordPress
Интересная информация по добавлению дополнительных кнопок в редактор TinyMCE.Спасибо.
Ум меня TweetMeme Retweet Button. Мне эта статья не подходит или можно так же все вставлять и в этот плагин?
Анна, я с TweetMeme Retweet Button не знаком и точно не могу сказать.
Извиняюсь, что вклиниваюсь). Анна, лично я давно этот плагин удалила. Он регулярно глючил, да и просто неудобный. Могу вам посоветовать установить кнопки социальных сетей с помощью онлайн сервисов. Там легко можно выбрать кнопки нужных вам социальных сетей. Можете на моем блоге посмотреть. Если понравятся, ссылкой поделюсь).
Спасибо, Виталий! Как всегда оперативно, доступно, подробно и интересно. Попробую реализовать у себя на сайте.
Пожалуйста Наталья!
Виталий, у меня почему-то не получилось реализовать все так, как надо. Добавились не те кнопки, для которых я создала рисунки, а стандартные с надписями в неправильной кодировке (до меня потом дошло, что надо было js файл в другой кодировке сохранять), ну и кноки маленькие, а надписи длинные, в общем я не стала больше заморачиваться и нашла более простое решение… без создания плагина, редактирования function.php и создания изображений. Всего-навсего в файле quicktags.js, что в папке wp-includes/js нужно добавить одну строку:
[php]edButtons[150]=new c.TagButton("z","z","","","z");[/php]
Это, правда, для html-редактора, которым я и пользуюсь. Ну, и неудобно при обновлении водрпресс.
Наталья, я этот способ знаю, но я не стал его предлагать читателям, как раз из-за того, что после каждого обновлениям WordPress надо редактировать файл quicktags.js. Я действительно забыл сказать в статье про кодировку. Спасибо, что подсказали, сейчас поправлю.
После прочтения статьи у меня возникло два вопроса:
1. Как узнать, какой именно у меня стоит редактор и что это именно TinyMCE WordPress?
2. Если я надумаю поменять шаблон темы, сделанные кнопочки останутся, или придется их ставить по-новому?
Очень нужная вещь эти кнопочки, прям руки чешутся уже себе их добавить, так ведь намного больше экономится время! Жду ответов! Спасибо за такую ценную информацию))
1. TinyMCE — это стандартный редактор WordPress. Если Вы его не меняли на другой, то у Вас именно TinyMCE.
2. Конечно придется все делать заново и боюсь это коснется не только кнопок.
Вначале подумала, что TinyMCE — это плагин. А оказалось, что это редактор стандартный. Попробую следовать Вашим инструкциям и добавить кнопки.
Здравствуйте Светлана! Обязательно попробуйте.
В TinyMCE advanced не работает. Как там создать свою кнопку, не подскажете?
К сожалению не подскажу!
Совет бодрый! Но у меня не вышло с первого раза! Пришлось внимательно перечитать статью и только тогда лед тронулся и все получилось!
Статья супер 🙂
У меня вопрос к вам как знатоку.
Вчера неожиданно обнаружил, что в WP набор кнопок отличается для администратора и Редактра.
У администратора — 2 строчки, а у Редактора всего одна.
Что за хрень такая? Вы не можете подсказать, как добавить вторую строчку для Редактора?
Заранее благодарю!
Олег, к сложению я не сталкивался с данной проблемой.
Добрый день! Подскажите пожалуйста, как добавить кнопку со своим определеным цветом
Игорь вы имеете цвет кнопки, или цвет фона, который кнопка будет добавлять?
Виталий, здравствуйте!
Скажите, а такое выделение, как у вас (серый цвет и лампочка), как сделать?
Способ в статье понятен, но он довольно простой. А то, что я спрашиваю, гораздо сложнее для меня. Куда и что нужно добавить, чтобы поставилась картинка?
Картинки в CSS добавляются в качестве фона, например:
Картинка должна находиться в папке с темой, в отдельной папочке images.
Вот Виталий, огромное Вам спасибо! Сколько подобных мануалов перелопатил — ничего не получалось. А тут всё просто и понятно изложено, а главное работоспособно — сразу всё получилось как надо. Вставил сразу две кнопки!
Спасибо!
Скажите пожадуйста, почему у меня возникает ошибка: Fatal error: Call to undefined function add_action() in /wp-includes/functions.php on line 4823
Значит у Вас ошибка в файле functions.php в строке 4823. Ошибка в синтаксисе языка.
После переноса кода в functions.php, который расположен в папке с темой заработало.
Ещё такой вопрос: а как ещё добавить кнопку на вкладку «текст»?
Это темя для целой статьи. Как нибудь напишу об этом, а пока Google в помощь.
Здравствуйте! Сработает ли данный метод оборачивания если вместо []….[/] использовать …?
Хотел использовать данный метод для обертки видео с ютубы под адаптивный шаблон
Здравствуйте! Думаю должено сработать.
Здравствуйте! Подскажите пожалуйста, как переносить цветной текст в статью Вордпресс? Потом сложнее раскрашивать
Здравствуйте, у меня не отражаются кнопки верхнего и нижнего индекса, а так же якорь. И еще, можно как нибудь добавить кнопку «Таблица»?
Спасибо.
Игорь, кнопку «Таблица», можно добавить с помощью плагина TinyMCE Advanced. По поводу остальных кнопок, точно не могу сказать, возможно с выходом новых версий WordPress данные кнопки больше не поддерживаются.
Мне просто хотелось убрать плагин вообще ))
Здравствуйте! Сделал всё как написано у вас но результата нет кнопка не появляется Это может зависеть от версии вордпресса стоит последняя!?
Алексей, скорее всего просто где-то ошибка, у меня все работает, хотя может шаблон и конфликтовать в чем-нибудь.
Доброго времени!
У меня вопрос не по теме. Подскажите пожалуйста, каким образом делать ссылку в тексте по типу «тут» и «там»? Это тот случай, когда этот участок текста выделен иным цветом и при нажатии на него происходит переход по скрытой ссылке.
Делается это с помощью стилей.
Примерно так:
Ultimate TinyMCE-а в этом плагине нельзя сделать изменения, чтобы при обновлении WordPress не восстанавливать заново. Или вносить все изменения в functions.php Дочерней темы?
Можно и в дочернею тему, если functions.php в ней подключен.
Здравствуйте!
Я внес в конец functions.php дочерней темы ваш код для дополнительных возможностей редактора, но у меня ничего не добавилось.
Почему?
Видать путь до файла js надо было по-другому указать…
А как изменить шрифт внутри редактора wordpress (чтобы он был таким же, как на сайте) а так же — уменьшить ширину редатора до 620px.