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

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

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

Как вы знаете, можно добавить пользовательские кнопки в редактор TinyMCE, чтобы добавить функциональность. Возможно, в прошлом вы устанавливали плагины, в которые добавлялись кнопки, которые создают шорткоды. Или добавлялись некоторые другие функции. И я решил расширить редактор 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 на сайт, то вы всегда можете обратиться за помощью в комментариях ниже.

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