Добавляем кнопку в HTML редактор WordPress

Здравствуйте, друзья. пользуетесь ли вы HTML редактором в WordPress так, как пользуюсь им я? Со временем мне стало не хватать стандартных функций, а писать код каждый раз вручную, отнимает очень много времени. Напомню вам, что эта статья тоже участвует в марафоне на блоге, о котором прочитаете, перейдя по ссылке. Добавить кнопку в HTML редактор WordPress можно самостоятельно и без хлопот. Для визуального оформления текста на страницах я иногда использую специальные блоки текста, оформленные по особому. Один из них имеет светло-зеленый фон и несет информационный характер. Пример его можете посмотреть с статье: Создание блога на WordPress. И второй блок, который несет предупреждение или предостережение, его пример можно посмотреть в статье: Создание HTML карты сайта для WordPress.

Добавить в HTML редактор WordPress свою кнопку можно двумя способами. Первый, это найти на сервере файл quicktags.js, который находится в папке js каталога wp-includes. В конце этого файла найти этот код:

1
2
3
4
5
6
7
8
9
10
11
12

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','

edButtons[150] = new qt.TagButton('short','short','<div class="shartcode">','</div>','div'),

Но такой способ добавления кнопок в HTML редактор WordPress, не совсем подходит нам потому что мы редактируем файлы самого ядра WordPress, а это значит, что после его обновления, все вернется на свои места и никаких кнопок, к которым уже к тому времени успеем привыкнуть, мы не увидим. Поэтому мы будем использовать второй способ, в котором файлы движка останутся нетронутыми. Редактировать мы будем файл WordPress темы functions.php. Все, что потребуется сделать, это вставить небольшой кусок кода в этот файл. Вот код, который работает у меня:

1
2
3
4
5
6
7
8
9
10

if( !function_exists('_add_my_quicktags') ){
function _add_my_quicktags()
{ ?>
<script type="text/javascript">
QTags.addButton( 'short', 'short', '<div class="shortcode">', '</div>' );
QTags.addButton( 'warn', 'warn', '<div class="warn">', '</div>' );
</script>
< ?php }
add_action('admin_print_footer_scripts', '_add_my_quicktags');
}

Всего, в HTML редактор WordPress у меня добавлено 4 кнопки. В примере показано только 2. Это потому, что на странице конфликтует код.

Таким образом можно добавлять кнопки в HTML редактор WordPress и не бояться, что все слетит при обновлении. Использовать кнопки очень просто. При добавлении текста, нужно выделить его мышкой и нажать необходимую кнопку в редакторе. После чего этот текст будет заключен в теги, которые вы прописали для этой кнопки. Можно , например, добавлять на страницу красивые таблицы CSS. Желаю удачных экспериментов. Можно использовать это на своем сайте. Если что-то непонятно, спрашивайте. Поделитесь этой записью в социальных сетях. Спасибо.