Wordpress редактор - добавление кнопок в html редактор wordpress
Заметки по Wordpress

WordPress редактор – добавление кнопок

Wordpress редактор - добавление кнопок в html редактор wordpress

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

Видеоурок: WordPress редактор – добавление кнопок

[spoiler name=”Необходимые данныеДля открытия – нажмите“]

Добавление своих кнопок в HTML редактор wordpress

В интернете есть много решений данной проблемы. Как всегда от банального самого легкого способа установки плагина до добавления вручную данных кнопок вручную. Но данные реализация ручной правки плохи тем, что предлагают вносить имения в файлы самого движка wordpress. Из чего следует, что при обновление wordpress эти файлы все заменится и кнопки пропадут. А это не есть хорошо.

И по этому мы добавим свои кнопки в HTML редактор через функцию wordpress.

И так приступи к добавлению своих кнопок. Для этого нужно просто отредактировать файл functions.php вашей темы:

if( !function_exists('_add_my_quicktags') ){
function _add_my_quicktags()
{ ?>
<script type="text/javascript">
QTags.addButton( 'p', 'p', '<p>', '</p>' );
QTags.addButton( 'br', 'br', '<br>', '<br>' );
QTags.addButton( 'h3', 'H3', '<h3>', '</h3>' );
QTags.addButton( 'h4', 'H4', '<h4>', '</h4>' );
</script>
<?php }
add_action('admin_print_footer_scripts', '_add_my_quicktags');
}
Пример добавление кнопки
[crayon] QTags.addButton( ‘Название кнопки на латинице’, ‘Название кнопки в редакторе’,
‘Открывающая часть тэга’, ‘Закрывающая часть тэга’ );
[/crayon]

C такой легкостью можно добавлять свои кнопки в редактор wordpress.
 

БОНУС: Выводим скрытые кнопки в визуальный html редактор wordpress

Wordpress редактор - добавление кнопок в html редактор wordpress

В визуальном html редакторе WordPress, по умолчанию, присутствует минимальное необходимое количество кнопок, отвечающих за обработку введенного текста. Этот тот самый минимум, который необходим для простой обработки используемое чаще всего. Однако Вы можете, если вам понадобится немного большая функциональности и гибкости от визуального html редактора добавить скрытые кнопки встроенные уже редактор WYSIWYG.

 
Для этого так же открываем и добавляем код в файл functions.php вашей темы:
[crayon lang=’php’]function enable_more_buttons($buttons) {
$buttons[] = ‘hr’;
$buttons[] = ‘sub’;
$buttons[] = ‘sup’;
$buttons[] = ‘fontselect’;
$buttons[] = ‘fontsizeselect’;
$buttons[] = ‘cleanup’;
$buttons[] = ‘styleselect’;
return $buttons;
}
add_filter(“mce_buttons_3”, “enable_more_buttons”);[/crayon]

После этого у вас появится третий ряд кнопок на панели редактора WYSIWYG в WordPress

[/spoiler]
 

Надеюсь, вы найдете этот прием полезным, и он облегчит вам использование редактора WordPress!

 
 

Новые посты

Выводим дополнительные поля профиля в worpress

Гордеев Игорь

Админка WordPress настройка под клиента

Реклама и баннеры в wordpress после заголовков

Гордеев Игорь

19 комментариев

Александр 22.02.2012 / 04:28

Игорь, ваша функция не работает 🙁

Ответить
Гордеев Игорь 22.02.2012 / 09:31

Какая именно у вас не работает, Александр?

1 вариант – работает только в html редакторе
2 вариант – работает только в визуальном редакторе
Оба варианта были проверены лично и используются по сей день. Значит, Александр вы где-то допустили ошибку.

Ответить
Сергей 2606 01.03.2012 / 03:07

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

Ответить
Сергей 16.04.2012 / 12:47

Спасибо за видеоурок. Отличный способ расширить возможности редактора WordPress. В редакторе всегда требуются новые кнопки.

Ответить
Олег 20.04.2012 / 16:14

Можете исправить код, а то не скопировать…

Ответить
Гордеев Игорь 20.04.2012 / 19:07

Спасибо Олег за сообщение об ошибке, такое бывает иногда в wordpress при обновлении плагинов. Все исправил теперь код отображается корректно.

Ответить
Олег 20.04.2012 / 19:24

Бывает. Спасибо

Ответить
Мила 24.06.2012 / 21:46

У меня не работает добавление кнопок в html редактор.

Версия wordpress последняя.
Пробовала на денвере и на хостинге.
Отключала все плагины, тестировала на самой простой теме – без встроенных скриптов.

Кнопки не появляются. А жаль…
Отличный был бы способ – если бы работал 🙁 .

Ответить
Гордеев Игорь 26.06.2012 / 15:40

способ отличный и рабочий. приеду с отпуска могу посмотреть, что у вас к чему.

Ответить
Мила 28.06.2012 / 00:09

Спасибо, буду ждать.
Напишите, пожалуйста в комментариях, когда вернетесь из отпуска.

Ответить
Мила 16.08.2012 / 01:54

Игорь, вы уже вернулись из отпуска?

Ответить
Гордеев Игорь 16.08.2012 / 11:40

прошу прощения, Мила. забыл сообщить, что я вернулся из отпуска. Скиньте мне вашу тему на e-mail я вам подправлю.

Ответить
Наталья 29.11.2012 / 22:06

А есть ли возможность в визуальный редактор кнопки добавлять как в первой части? Когда на код в хтмл-редакторе смотришь все сливается, неудобно там работать с маленькими шорткодами.
За бонус огромная благодарность! Как же мне он был нужен раньше. Наконец открылись многие возможности. Большое спасибо!!!

Ответить
Гордеев Игорь 30.11.2012 / 11:29

Есть для плагины точно… как-то попадались на глаза. Кодом не встречал.

Ответить
Наталья 29.11.2012 / 22:12

Еще вопрос. после обновления WP все на месте останется, помню в каком то файле у меня после обновления виджеты комментариев ВК и фэйсбук пропали, кажется как раз в функшионе.

Ответить
Гордеев Игорь 30.11.2012 / 11:30

При обновление WP шаблоны не обновляются. А functions.php находится в шаблоне, следовательно он не обновляется.

Ответить
Олег 25.01.2015 / 13:01

Спасибо! Помог! Самое крутое решение и простое!

Ответить
Максим 24.11.2015 / 15:55

Отличное решение, но я бы еще добавил возможность вызова и добавления своих пользовательских функций, но как в общем статья информативная.

Ответить
артем 29.12.2016 / 02:25

отличное решение, все чётко работает, большое спасибо!

Ответить

Оставить комментарий