HERTZ-GSM

Технологии. Компьютеры. Электроника.

Как добавить кнопку в редактор WordPress

Сегодня речь пойдёт о том, как добавить кнопку в редактор WordPress. И в визуальный редактор, и в текстовый HTML. Это очень удобно! Когда вы оформляете статью в редакторе WordPress, то пользуетесь стандартным набором кнопок. Но их далеко не всегда достаточно. Я, например, порой использую подчёркнутый текст, верхний и нижний регистры, изменяю семейство шрифтов и их размеры. Но таких кнопок в стандартном редакторе WordPress нет, а каждый раз вручную прописывать код, особенно если во многих местах, просто лень. Поэтому проще один раз добавить все необходимые кнопки в редактор WordPress и больше не утруждать себя лишними действиями.

Сделать это совершенно несложно. Тут есть три варианта: изменить сам файл панели редактора WordPress; использовать плагины; добавить кнопки через редактор, просто вставив код в файл functions.php.

Первый способ я отбрасываю сразу по двум причинам. Во-первых, WordPress регулярно обновляется и после обновления всё вернётся на прежние места, и заново нужно будет лезть в файл и изменять его. Во-вторых, на старых версиях WordPress это срабатывало, но буквально недавно я для интереса снова попробовал влезть в этот файл (точно не помню какой именно, кому интересно — поищите сами в Интернете, вроде quicktags.dev.js и quicktags.js) и поменять его, но это ничего не дало, на панели ничего не изменилось. Так что забудем про данный способ — его я привёл просто так, на всякий случай, для осведомления.

Плагины я тоже не рассматриваю, т.к. они лишь создают лишнюю нагрузку и занимают место. Предпочитаю обходиться без них по мере возможности. Тот, кто хочет использовать плагины, пусть ищет их в Интернете, а я перехожу к третьему варианту.

Так как в WordPress существует два редактора — визуальный и текстовый HTML, то добавлять нужные нам кнопки будем в оба. Итак, код будем прописывать в функциях темы — файл functions.php. В консоли WordPress переходим в меню «Внешний вид» -> «Редактор» -> Функции темы (functions.php) и в открывшемся файле в конце будем добавлять наш код.

Как добавить кнопку в визуальный редактор WordPress

В визуальном редакторе WordPress изначально показываются только стандартные кнопки.

Но, помимо них, есть ещё и скрытые. Чтобы их открыть, прописываем в functions.php вот такой код:

function add_more_buttons($buttons){
$buttons[]='underline';
$buttons[]='superscript';
$buttons[]='subscript';
$buttons[]='fontselect';
$buttons[]='fontsizeselect';
return$buttons;
}
add_filter("mce_buttons_3","add_more_buttons");

Сохраняем и получаем результат:

Как видим, появилась третья строчка с функциями, которые мне нужны: подчёркивание, верхний и нижний регистры, семейство шрифтов и размер шрифтов (теги underline, superscript, subscript, fontselect и fontsizeselect соответственно). Функций много, можете указать те, которые нужны именно вам. Список я приведу ниже.

В принципе, дополнительная третья строчка нам ни к чему, поэтому проще разместить всё на второй. Для этого меняем параметр mce_buttons_3 на mce_buttons_2 и наши кнопки окажутся на второй строке панели. К сожалению, на первую строку их переместить не получится.

Зато можно заменить ненужную стандартную кнопку на нашу.

К примеру, стандартная кнопка «Горизонтальная линия» нам не нужна, заменим её на семейство шрифтов. Для этого в квадратных скобках нашего параметра $buttons[]=’fontselect’ укажем цифру 1 (т.к. отсчёт ведётся с нуля) -> $buttons[1]=’fontselect’. Теперь вместо кнопки «Горизонтальная линия» у нас будет кнопка «Семейство шрифтов».

Вот список поддерживаемых тегов (в некоторых версиях WordPress могут работать не все):

backcolor  — цвет фона
blockquote — цитата
bold  — жирный
bullist  — маркированный список
charmap  — произвольный символ
code  — исходный код
copy  — копировать
cut  — вырезать
fontselect  — семейство шрифтов (выпадающий список)
fontsizeselect  — размер шрифтов (выпадающий список)
forecolor  — цвет текста
formatselect  — формат (выпадающий список: абзац, заголовки)
justifycenter  — по центру
justifyfull  — по ширине
justifyleft  — по левому краю
justifyright  — по правому краю
hr  — горизонтальная линия
indent  — увеличить отступ
italic  — курсив
link  — вставить/изменить ссылку
newdocument  — новый документ (по сути, удаление всего текста)
numlist  — нумерованный список
outdent  — уменьшить отступ
paste  — вставить
pastetext  — вставить как текст
redo  — повторить (вперед)
removeformat  — очистить форматирование
strikethrough  — перечеркнутый
styleselect  — стили (выпадающий список: абзац, заголовки)
superscript  — верхний регистр
subscript  — нижний регистр
underline  — подчеркнутый
undo  — отменить (назад)
unlink  — удалить ссылку

Как добавить кнопку в текстовый HTML редактор WordPress

Изначально в текстовом HTML-редакторе WordPress ты также видим стандартные кнопки.

Чтобы добавить кнопку в текстовый HTML редактор WordPress, будем работать с тем же файлом functions.php. К примеру, нам нужно вывести на панель кнопки H1, P, U — заголовок первого уровня, абзац и подчёркнутый текст. Вставляем в functions.php такие строки:

if( !function_exists('_add_my_quicktags') ){
function _add_my_quicktags()
{ ?>
<script type="text/javascript">
QTags.addButton( 'h1', 'H1', '<h4>', '</h4>' );
QTags.addButton( 'p', 'P', '<p>', '</p>' );
QTags.addButton( 'u', 'U', '<u>', '</u>' );
</script>
<?php }
add_action('admin_print_footer_scripts', '_add_my_quicktags');
}

Сюда можно добавить любой HTML-тег таким образом:

QTags.addButton( ‘Название кнопки на латинице’, ‘Название кнопки в редакторе (можно на русском)’,
‘Открывающая часть тэга’, ‘Закрывающая часть тэга’ );

Обязательно стоит упомянуть, что помимо обычного использования стандартных тегов, можно добавлять и классы. К примеру, если нам нужна кнопка, которая будет выделять текст красным цветом (Так её и назовём — Red), то добавим её такой строчкой:

QTags.addButton( 'red', 'Red', '<span style="color:#ff0000">', '</span>' );

А если потребуется, например, абзац, подчёркнутый, зелёными буквами на чёрном фоне — назовём его, к примеру, Abzac — то, соответственно:

QTags.addButton( 'abzac', 'Abzac', '<p style="text-decoration: underline; color:#00ff00; background:#000000">', '</p>' );

Все кнопки в HTML-редакторе будут добавляться в конец панели. Таким образом у нас получился вот такой результат:

Как видите, ничего сложного нет.
Теперь вы знаете, как добавить кнопку в редактор WordPress.


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Защита от спама: *

Подписаться на RSS-ленту

Подпишитесь по e-mail

Архивы