Добавляем кнопки в редактор 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 редактор можно наблюдать новую кнопку:
Для того чтобы ей воспользоваться просто выделите текст и нажмите на кнопку и стили автоматически применяться к нему:
