Главная » Wordpress » Как добавить свои кнопки в HTML редактор WordPress?

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

2014-10-14 / Вр:10:53 / просмотров: 9470

Сегодняшняя статья поможет облегчить работу блогеру при написании статей. В HTML редакторе блогер может добавить свои кнопки, которые он часто будет использовать. Вот, например, вы часто используете в HTML редакторе WordPress тег <H3></H3>, и каждый раз прописывать тег для заголовка <H3> забирает у вас время. Для этого стоит один раз установить кнопку, которая будет при нажатии автоматически добавлять к заголовку <H3></H3>.

Если включить фантазию, вы сможете вывести не только HTML теги, но и рекламный код, шоркод, таблицы и т.д.

Итак, приступим.

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

Чтобы добавить кнопки в HTML редактор WordPress, нужно сделать маленькое изменение, а точнее, добавление кода в файл «functions.php» вашей темы. Откройте «functions.php» и добавьте в самый конец перед знаком «?>»вот этот код:

if( !function_exists('bloggood_ru_quicktags') ){
function  bloggood_ru_quicktags()
{ ?>
<script ENGINE="text/javascript">
QTags.addButton( 'Название кнопки на латинице', 'Название кнопки в редакторе', 'Открывающая часть тэга', 'Закрывающая часть тэга' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'bloggood_ru_quicktags');
}

Давайте рассмотрим строчку №5 и настроим кнопку. Для примера выведем в HTML редактор WordPress тег <p></p>.
Настройки:

Название кнопки на латинице – пропишем <p>
Название кнопки в редакторе - пропишем <p>
Открывающая часть тэга - пропишем <p>
Закрывающая часть тэга - пропишем </p>

В общем, это будет выглядеть вот так:

QTags.addButton( 'p', 'p', '<p>', '</p>' );

Готовый код:

if( !function_exists('bloggood_ru_quicktags') ){
function bloggood_ru_quicktags()
{ ?>
<script type="text/javascript">
QTags.addButton( 'p', 'p', '<p>', '</p>' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'bloggood_ru_quicktags');
}

Результат:

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

Вот так можно добавить несколько кнопок:

if( !function_exists('bloggood_ru_quicktags') ){
function bloggood_ru_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', 'bloggood_ru_quicktags');
}

Теперь научимся добавлять кнопки в визуальный html редактор wordpress.

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

Бывает парой недостаточно возможностей, которые нам предлагаются в визуальном html редакторе WordPress по умолчанию. Вы можете вывести скрытые кнопки, которые встроены в редактор WYSIWYG. Кстати, об этом я подробней расписывал вот в этой статье.

Откройте файл functions.php вашей темы и вставьте вот такой код:

function bloggood_ru_buttons($buttons) {
  $buttons[] = 'hr';
  $buttons[] = 'sub';
  $buttons[] = 'sup';
  $buttons[] = 'fontselect';
  $buttons[] = 'fontsizeselect';
  $buttons[] = 'cleanup';
  $buttons[] = 'styleselect';
  return $buttons;
}
add_filter("mce_buttons_3", "bloggood_ru_buttons");

В панели редактора WYSIWYG появится третий ряд с дополнительными кнопками:

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