Home • WEB Мастеру • Статьи • Hack #3. Добавляем кнопки в текстовый html-редактор

Hack #3. Добавляем кнопки в текстовый html-редактор Функция для WordPress без плагина

📝 Пост № 50 от 13 октября 2021 | В категории WEB Мастеру, Статьи | Комментариев нет

wp-hook Как известно, в WordPress есть свой html редактор, предназначенный для написания и стилизации статей. Работает он в двух вариантах: в визуальном и текстовом.

Визуальным вариантом пользоваться не всегда удобно, т.к. он нередко «ломает» код, а в текстовом варианте пользоваться гораздо удобней, если вы мало-мальски «шарите» в верстке. Но, все равно, не хватает иногда дополнительных кнопок, при помощи которых, не теряя времени, можно вставлять любые переменные или даже полностью код, фрагменты повторяющегося текста, и многое другое…

Для этого есть два варианта. Первый — воспользоваться отличным плагином AddQuicktag и второй — вставкой простой функции в файл functions.php вашей темы. Оба варианта рабочие и имеют право на существование, как отдельно, так и вместе.

С плагином AddQuicktag вы можете ознакомиться здесь, а ручной метод вставки кнопок в html-редактор WordPress мы рассмотрим ниже.

И так, код:

// Добавляем кнопки в текстовый html-редактор
add_action( 'admin_print_footer_scripts', 'add_sheensay_quicktags' );
function add_sheensay_quicktags() {
   if (wp_script_is('quicktags')) :
?>
    <script type="text/javascript">
      if (QTags) {  
        // QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

        QTags.addButton( 'sheens_p', 'p', '<p>', '</p>', 'p', 'Параграф', 1 );
        QTags.addButton( 'sheens_h2', 'h2', '<h2>', '</h2>', 'h', 'Заголовок 2 уровня', 2 );
	QTags.addButton( 'sheens_h3', 'h3', '<h3>', '</h3>', 'h', 'Заголовок 3 уровня', 3 );
	QTags.addButton( 'sheens_h4', 'h4', '<h4>', '</h4>', 'h', 'Заголовок 4 уровня', 4 );
      }
    </script>
<?php endif;
}

// Добавляем кнопки в текстовый html-редактор

add_action( 'admin_print_footer_scripts', 'add_sheensay_quicktags' );

function add_sheensay_quicktags() {

if (wp_script_is('quicktags')) :

if (QTags) {

// QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

QTags.addButton( 'sheens_p', 'p', '<p>', '</p>', 'p', 'Параграф', 1 );

QTags.addButton( 'sheens_h2', 'h2', '<h2>', '</h2>', 'h', 'Заголовок 2 уровня', 2 );

QTags.addButton( 'sheens_h3', 'h3', '<h3>', '</h3>', 'h', 'Заголовок 3 уровня', 3 );

QTags.addButton( 'sheens_h4', 'h4', '<h4>', '</h4>', 'h', 'Заголовок 4 уровня', 4 );

}

</script>

<?php endif;

}

Описание функции

«QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );»
(* – обязательный параметр):
id — * уникальный идентификатор. Вводите любое значение;
display — * отображаемое название кнопки;
arg1 — * открывающий тег или название callback-функции (см. ниже);
arg2 — закрывающий тег;
access_key — горячая клавиша;
title — всплывающее описание кнопки;
priority — приоритет в списке кнопок. Чем больше, тем левее будет кнопка;
instance — поместить кнопку в определённый экземпляр класса. По умолчанию добавляется в общий.

Если вы внимательно присмотритесь к коду, то сможете вставлять свои варианты кнопок, следуя правилам, приведенным в коде. Главное, не пропускайте запятые и одиночные кавычки. Потренируйтесь! Сложного здесь ничего нет.