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

В WordPress есть множество скрытых возможностей, которые значительно упрощают работу с контентом. Одна из таких — добавление своих кнопок в редактор записей, чтобы выполнять нужные действия одним кликом. Кнопки WordPress особенно полезны, если вы часто вставляете одинаковые блоки кода, стилизованные элементы или выполняете повторяющиеся операции.

Почему стоит добавлять свои кнопки в редактор

Стандартный редактор WordPress (как Gutenberg, так и классический TinyMCE) позволяет работать с текстом и форматированием, но не всегда удобно вставлять повторяющиеся блоки или кастомный HTML. С помощью своих кнопок вы:

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

Где применяются кнопки WordPress

Кнопки в редакторе используются в двух форматах:

• Классический редактор (TinyMCE) — в проектах, где важна простота и совместимость.
• Gutenberg — в современных проектах с блоковой архитектурой.

В Gutenberg кнопки в классическом смысле используются реже, но всё ещё актуальны в следующих случаях:

• поддержка старых редакторов;
• создание собственных панелей инструментов в блоках;
• расширение функционала редактора для авторов;
• вставка кастомных HTML-блоков без необходимости писать код вручную.

Добавление кнопки в классический редактор WordPress (Quicktags API)

Если вы используете классический редактор или хотите добавить кнопку в HTML-режим, самый простой и надёжный способ — Quicktags API. Это стандартный инструмент WordPress, доступный начиная с версии 3.3.

Задача

Создать кнопку, которая оборачивает выделенный текст в <div class="uniq"> и делает его уникальным по стилю.

Рабочий код для functions.php

Этот код нужно вставлять не в редактор, а в файл functions.php вашей темы (или в отдельный плагин). Важно использовать обычные кавычки, чтобы редактор не ломал код. Чтобы код не выполнялся в статье, все символы < и > экранированы.

if ( ! function_exists( 'add_my_quicktags' ) ) {

  function add_my_quicktags() {
    ?>
    <script>
      QTags.addButton(
        'uniq_block',
        'UNIQ',
        '<div class="uniq">',
        '</div>',
        'uniq',
        'Добавить блок с классом uniq'
      );
    </script>
    <?php
  }

  add_action( 'admin_print_footer_scripts', 'add_my_quicktags' );

}

После сохранения кода откройте редактор записи, перейдите в HTML-режим и проверьте работу кнопки. Выделите текст и нажмите UNIQ — текст автоматически обернётся в нужный блок.

Как в WordPress добавить кнопку с вызовом JavaScript-функции

Quicktags позволяет не только вставлять HTML, но и запускать свои функции. Это удобно, если нужно сделать сложное действие или взаимодействовать с DOM.

add_action( 'admin_print_footer_scripts', 'custom_quicktags_callback' );

function custom_quicktags_callback() {
  if ( wp_script_is( 'quicktags' ) ) :
    ?>
    <script>
      QTags.addButton( 'my_test', 'Test', myTestFunction );

      function myTestFunction() {
        alert('Кнопка работает!');
      }
    </script>
    <?php
  endif;
}

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

Добавление кнопок в Gutenberg: современные способы

Если вы работаете с Gutenberg, то стандартные Quicktags не подходят. Но кнопки можно добавить внутри блоков или расширить панель инструментов редактора через JavaScript и React.

Вариант 1: кнопка внутри пользовательского блока

Создайте блок через registerBlockType и добавьте в его панель инструментов кнопку, которая будет вставлять HTML или применять стили.

Вариант 2: расширение панели инструментов Gutenberg (Toolbar Button)

Этот метод требует знаний JavaScript и React, но позволяет добавлять кнопку в редактор на уровне интерфейса, а не отдельного блока.

Пример (структура)

Внутри плагина или темы подключите JS-файл и используйте API Gutenberg для добавления кнопки в панель инструментов. Это соответствует стандартам WordPress и используется в большинстве современных проектов.

Практические примеры использования кнопок WordPress

Вот несколько реальных кейсов, где кнопки в редакторе значительно экономят время:

• вставка стандартного блока с контактом или ценой;
• оборачивание текста в стилизованный контейнер (как в примере выше);
• вставка готовых HTML-шаблонов для лендингов;
• быстрое добавление shortcodes;
• автоматическая генерация ссылок или таблиц;
• проверка текста на ошибки или форматирование.

SEO и структура: почему это важно

Правильно настроенные кнопки позволяют сделать контент более стандартизированным и читаемым. Это важно не только для удобства авторов, но и для SEO: единый стиль, правильная структура HTML и отсутствие “ручных” ошибок помогают поисковым системам лучше понимать страницу.

Заключение

Добавление своих кнопок в WordPress — простой способ улучшить редактор, ускорить работу и поддерживать единый стиль контента. Для классического редактора идеальным вариантом остаётся Quicktags API, а для Gutenberg — создание пользовательских блоков или расширение панели инструментов. Такие улучшения помогают создавать контент быстрее и качественнее.