Своя кнопка в редактор WordPress

своя кнопка в редактор wordpress Wordpress

Недавно я столкнулся с проблемой, такой как «Текстовый антиспам» или «Новый». Это фильтр статьи от поисковой системы Яндекс. После анализа статьи выяснилось, что присутствует избыточные выделения тегами: b, strong, em, i, что влияет на оптимизацию сайта. Самый лучший вариант избавится от таких тегов это взять нужные слова и обернуть в тег <span> с классом стиль которого определяют выделения жирным, наклонным шрифтом.

Как вы знаете, можно добавить пользовательские кнопки в редактор TinyMCE, чтобы добавить функциональность. Возможно, в прошлом вы устанавливали плагины, в которые добавлялись кнопки, которые создают шорткоды. Или добавлялись некоторые другие функции. И я решил расширить редактор WordPress заменой стандартных кнопок ( Своя Кнопка в Редактор WordPress ) для этих модулей своими.

Своя кнопка в редакторе WordPress

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

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

Создадим 2 разные кнопки, которые добавим к нашему TinyMCE, и каждая кнопка будет обслуживать функцию жирного выделения текста и наклонность текста.

Поскольку каждый модуль имеет свой собственный код JavaScript, который обрабатывает функциональность кнопки, мы не можем просто взять один файл скелета и обменяться именами функций. Таким образом добавляем файл JavaScript для каждого модуля вручную или можете сделать это программно.

Для начала создадим php-файл с именем swp-btnquote.phpи добавим его в корневую папку нашей темы со следующим содержимым:

После добавим в созданный файл JS следующий код, как указано ниже:

В файл функции темы добавим чтение файла с параметрами кнопки одним из кодов подключения файлов. Разные темы по своему принимают чтение сторонних файлов, поэтому приведу несколько примеров. Так как для меня сработал второй вариант подключения файлов внутри темы wordpress из файла function.php.

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

Или создаем отдельный css файл с параметрами выше и в добавляем в function.php дочерней темы следующие строки. С помощью которого создадим новое действие для своей таблицы стилей и вызовем его из дочерней темы.

Вывод

На этом все! Вы узнали простой способ как в WordPress добавить кнопки в редактор. Сохраняем все изменения в файле и обновляем страницу с редактором любой из записи. Теперь вы можете выделять нужные вам слова (так же как и вставка ссылки) любой из кнопок. И не беспокоится о фильтрам Яндекса по поводу избыточного выделения тегам b, i, strong и т.п.

P.S. Чтобы кнопки появились в редакторе необходимо будет добавить картинки для кнопок. Например которые использую я в своем редакторе TinyMCE Вордпресс:

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

Оцените статью
Добавить комментарий

  1. Вячеслав

    Спасибо за статью. Если бы добавили еще скриншоты вашего редактора как он стал выглядеть после добавление кнопок, цены бы посту не было!

    Ответить
    1. Алекс автор

      Добавил скриншот добавленных кнопок.

      Ответить
      1. Вячеслав

        Получается можно добавить кнопки на панель, по типу, тех, которые уже установлены в этой теме на сайт (я про тему Reboot) я хотел бы как раз подключить некоторые из своих созданных стилей.
        PS А еще бы вам в блог установить плагин уведомлений об ответе на коммент)) удобно было бы ( я себе поставил — Subscribe to Comments Reloaded — https://ru.wordpress.org/plugins/subscribe-to-comments-reloaded/)

        Ответить
        1. Алекс автор

          Плагины перегружают работу WordPress, поэтому предпочитаю все необходимые функции приписывать в файле functions.php. В данный момент стоит функция уведомления о новых комментарий в Телеграм. Но после обновления ядра WP — уведомления перестали приходить. Этот вопрос уже решается.

          По поводу кнопок… Совершенно верно эти кнопки можно установить на любую тему, которая установлена. Код кнопок приписывается в файле functions.php темы, а не в самом ядре WP.

          Ответить
  2. Вячеслав

    Вы написали: возможно создать свои кнопки внутри плагина, но я собираюсь добавить их непосредственно в тему.

    А как это сделать — я не нашел лично(((

    Ответить
    1. Алекс автор

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

      Ответить
  3. Алекс автор

    Написал бота в Телеграм для блога на WordPress, который уведомляет о новом комментарии к статье @WordpressComments_bot

    В скором времени выйдет плагин для Wordpess.

    Ответить