Добавление собственных кнопок на панель редактора в 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, нужно сменить и тут.

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


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





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


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

Открытие разных книг Excel в разных окнах (Май 13, 2016)
Графика. Текст с градиентной заливкой (Декабрь 4, 2015)
Создать каталог с подкаталогами без их перебора в цикле (Декабрь 4, 2015)
Увеличить визуальное быстродействие (прорисовку формы) (Декабрь 4, 2015)
Italo Disco 1987 (Июль 1, 2016)


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