
Добавляем кнопки в редактор WordPress
Здравствуйте уважаемые читатели блога history-of-blog.ru. В прошлой статье мы рассмотрели как добавить css стиль для текста в наш шаблон, который позволил нам красиво выделять какие-либо заметки или цитаты. Эту статью можно считать продолжением, так как сейчас мы добавим кнопку в редактор WordPress, к которой привяжем стиль, созданный в прошлой статье.
Кнопки в редакторе WordPress – что это и зачем они нужны.
Кнопки в редакторе WordPress позволяют быстро и без особых трудностей разнообразить текст: например сделать шрифт жирным, выделить курсивом или же вообще показать какой-либо абзац как цитату.
В WordPress предусмотрено два редактора:
- Визуальный редактор:
- HTML редактор:
Добавляем кнопку в HTML редактор WordPress.
Так как через правку кода можно сделать практически что угодно, кнопку мы будем добавлять именно в HTML редактор. На самом деле это очень просто!

Теперь перейдем непосредственно к установки кнопки для этого стиля:
1. Через ftp или прямо из панели управления хостингом “свяжитесь” с Вашим блогом – я выбрал второй вариант. Откройте папку /public_html/wp-includes/js. В этой папке находите файл quicktags.js и удаляете его! Не бойтесь, ничего страшного не произойдет, хотя я сам на всякий случай сохранил его на компьютер (можете сделать тоже самое).
2. Теперь находим файл quicktags.dev.js и переименовываем его в quicktags.js.
На блоге Владимира Жданова я узнал, что эти файлы на самом деле идентичны, только файл quicktags.js для обычных пользователей, то есть со стандартным набором кнопок, а файл quicktags.dev.js - для разработчиков. Тем самым оставляя один файл мы можем прописать в нем свои дополнительные кнопочки – и мы уже будем разработчиками

3. Окрываем только что переименованный файл quicktags.js через редактор, либо же прямо из панели управления хостингом (я все еще придерживаюсь второго варианта) и прокручиваем файл до конца. В самом конце находим следующие строки:
edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>','b'); edButtons[20] = new qt.TagButton('em','i','<em>','</em>','i'), edButtons[30] = new qt.LinkButton(), // special case edButtons[40] = new qt.TagButton('block','b-quote','\n\n<blockquote>','</blockquote>\n\n','q'), edButtons[50] = new qt.TagButton('del','del','<del datetime="' + _datetime + '">','</del>','d'), edButtons[60] = new qt.TagButton('ins','ins','<ins datetime="' + _datetime + '">','</ins>','s'), edButtons[70] = new qt.ImgButton(), // special case edButtons[80] = new qt.TagButton('ul','ul','<ul>\n','</ul>\n\n','u'), edButtons[90] = new qt.TagButton('ol','ol','<ol>\n','</ol>\n\n','o'), edButtons[100] = new qt.TagButton('li','li','\t<li>','</li>\n','l'), edButtons[110] = new qt.TagButton('code','code','<code>','</code>','c'), edButtons[120] = new qt.TagButton('more','more','<!--more-->','','t'), edButtons[130] = new qt.SpellButton(), edButtons[140] = new qt.CloseButton()
Каждая строчка отвечает за кнопку в HTML редакторе.
Наша цель добавить в файл еще одну строчку, чтобы в редакторе появилась новая кнопка. Для этого в указанных местах:
- 1. Ставим запятую.
- 2. Добавляем строчку:
edButtons[150] = new qt.TagButton('rmka','rmka','<div class="po-statiya">','</div>','rmka');
rmka (1,2 и 5 параметр) – это название нашей кнопки. 3 и 4 параметры – это те теги, в которые будет заключен наш текст после нажатия кнопки.
Жмем сохранить.
Все! Теперь переключившись в HTML редактор можно наблюдать новую кнопку:
Для того чтобы ей воспользоваться просто выделите текст и нажмите на кнопку и стили автоматически применяться к нему:

Похожие статьи:
-
Владимир Жданов | 26.04.2012 в 15:08
Я-то знаю ) Кому-то проще пользоваться визуальным редактором. Мне например
-
-
-
Владимир Жданов | 26.04.2012 в 15:31
Я минут 40 плакал!
-
Евгений | 26.04.2012 в 15:31
Антон, статья класс, то что надо и все понятно.
Это просто комментаторы чудят, “неправильные” комментарии тебе тут оставляют. -
BG | 27.06.2012 в 15:21
Визуальный редактор не всегда ведет себя корректно. Приходится работать и, главное опубликовывать в редакторе html, иначе бывают неожиданные правки кода на странице.
-
Владимир Жданов | 26.04.2012 в 15:05
Порадовало ….и мы уже будем разработчиками
-
Евгений | 26.04.2012 в 15:29
Антон, как раз то что надо, сейчас закончу свой мега пост и начну разбираться.
-
Владимир Жданов | 26.04.2012 в 15:39
А у меня вроде депрессия кончилась. Снова могу писАть
-
Olenkac | 28.11.2012 в 23:35
что такое невезёт и как с этим бороться…
и куда я опять не посмотрела, что у меня от всего проделанного никакой реакции?!)))
-
Olenkac | 28.11.2012 в 23:55
да это понятно. в данном случае меня сам процесс познания и постижения увлекает)))
в визуальный редактор по рецепту дружественного вам блога кнопки вставила, но и тут без косяка не обошлось… распрыгались по всей панели и попрятали часть родных кнопок)
а в хтмл ну никак не хочет проявляться… уже стопиццот раз переделывала, и в разных редакторах открывала – тишина…и тем не менее, спасибо за вашу работу! надо полазить, мож ещё чего интересного откопаю)))
-
fgsggs | 29.05.2016 в 8:47
Подскажите пожалуйста как быть если нужно сделать вставку в текст статьи — кода из нескольких строчек?
получается вставить только если пишу весь код в одну строчку!
а в две строчки и более не работает
Класс! Прям зачитался
Отлично получилось. WordPress, оказывается, очень прост!
Теперь надо научиться добавлять новые кнопки в визуальные редактор!