Добавление собственных кнопок на панель редактора в WordPress

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

Речь пойдет о редакторе TinyMCE Advanced, и на его панель мы добавим новую кнопку, которая будет оборачивать выделенный текст в шорткод.

Перед тем, как что-то редактировать, делайте резервные копии файлов и убедитесь, что у вас есть к ним доступ не из админки. Можно допустить такую ошибку в php-файле, что «ляжет» и админка.

Создадим на рабочем столе файл newbuttons.js со следующим содержимым:

title — это текст, который будет всплывать при наведении курсора на кнопку.

image — изображение кнопки, у меня это 25х25 пикселей. Если картинка будет находиться по другому пути, естественно, нужно указать ваш путь и, конечно, ваше имя файла.

Следующей строкой — выполняемое действие, в нашем случае, скрипт выводит открывающий тег, затем сам контент, затем закрывающий тег.

btn — это пользовательское имя, можно задать свое, но тогда его нужно будет заменить и в следующих php-кодах.

Скрипт нужно сохранить в кодировке utf-8 без BOM. Лучше для этих целей пользоваться продвинутыми редакторами, например, Notepad++.

Создадим иконку кнопки в любом графическом редакторе. По данному примеру это будет файл T.png

Настало время загрузить файлы на сервер.

Вы можете загружать их в любые папки, все зависит от того, как у вас все разложено и каков порядок. В моем случае, картинка заливается в папку pic, что в корне сайта, а скрипт в папку /wp-includes/js/.

Полпути пройдено. Теперь в админке открываем файл functions.php и в самый его конец (это не принципиально, главное, не втиснуть в тело другого скрипта, иначе будет боль) прописываем следующее:

В этом коде встретились уже знакомые имена btn, T_tag. Если вы их меняли в JS, нужно сменить и тут.

По сути, в этом коде мы создаем плагин и подключаем его. Здесь же видим путь в файлу скрипта, так что прошу не напутать.


Ну вот и все. Сохраняем изменения, перезагружаем страницу и видим новую кнопку в редакторе :)





Запись опубликована в рубрике Полезности на разную тематику с метками , , . Добавьте в закладки постоянную ссылку.


Что еще можно почитать

Алимханов А. — Only Love Can Break My Heart (Modern Talking Extended 80’s Cover) (Апрель 1, 2017)
Just We Two (Modern Talking Cover) (Март 12, 2017)
Воспроизвести видео на PictureBox (Декабрь 4, 2015)
Скрыть и отобразить курсор в системе (Декабрь 7, 2015)
Ляка на новогодней елке (Декабрь 25, 2015)


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