Недавно я столкнулся с проблемой, такой как «Текстовый антиспам» или «Новый». Это фильтр статьи от поисковой системы Яндекс. После анализа статьи выяснилось, что присутствует избыточные выделения тегами: b, strong, em, i, что влияет на оптимизацию сайта. Самый лучший вариант избавится от таких тегов это взять нужные слова и обернуть в тег <span> с классом стиль которого определяют выделения жирным, наклонным шрифтом.
Как вы знаете, можно добавить пользовательские кнопки в редактор TinyMCE, чтобы добавить функциональность. Возможно, в прошлом вы устанавливали плагины, в которые добавлялись кнопки, которые создают шорткоды. Или добавлялись некоторые другие функции. И я решил расширить редактор WordPress заменой стандартных кнопок ( 
) для этих модулей своими.
Примечание: возможно создать свои кнопки внутри плагина, но я собираюсь добавить их непосредственно в тему.
Как добавить кнопку в редактор WordPress TinyMCE?
Создадим 2 разные кнопки, которые добавим к нашему TinyMCE, и каждая кнопка будет обслуживать функцию жирного выделения текста и наклонность текста.
Поскольку каждый модуль имеет свой собственный код JavaScript, который обрабатывает функциональность кнопки, мы не можем просто взять один файл скелета и обменяться именами функций. Таким образом добавляем файл JavaScript для каждого модуля вручную или можете сделать это программно.
Для начала создадим php-файл с именем swp-btnquote.phpи добавим его в корневую папку нашей темы со следующим содержимым:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <?php add_action( 'after_setup_theme', 'swp1_theme_setup' ); if ( ! function_exists( 'swp1_theme_setup' ) ) { function swp1_theme_setup(){ /********* TinyMCE Buttons ***********/ add_action( 'init', 'swp1_buttons' ); } } /********* TinyMCE Buttons ***********/ if ( ! function_exists( 'swp1_buttons' ) ) { function swp1_buttons() { if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) { return; } if ( get_user_option( 'rich_editing' ) !== 'true' ) { return; } add_filter( 'mce_external_plugins', 'swp1_add_buttons' ); add_filter( 'mce_buttons', 'swp1_register_buttons' ); } } if ( ! function_exists( 'swp1_add_buttons' ) ) { function swp1_add_buttons( $plugin_array ) { $plugin_array['swpquote'] = get_stylesheet_directory_uri().'/js/tinymce_quotebutton.js'; return $plugin_array; } } if ( ! function_exists( 'swp1_register_buttons' ) ) { function swp1_register_buttons( $buttons ) { array_push( $buttons, 'swpquote' ); return $buttons; } } |
После добавим в созданный файл JS следующий код, как указано ниже:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | (function() { tinymce.PluginManager.add( 'swpquote', function( editor, url ) { // Add Button to Visual Editor Toolbar editor.addButton('swpquote', { title: 'Insert quote', cmd: 'swpquote', image: url + '/logo.png', }); editor.addCommand('swpquote', function() { var selected_text = editor.selection.getContent({ 'format': 'html' }); if ( selected_text.length === 0 ) { alert( 'Please select text' ); return; } var open_column = '<h2 class="swp_quote"><img src="quote1.png" alt="">'; var close_column = '<img src="quote2.png" alt=""></h2>'; var return_text = ''; return_text = open_column + selected_text + close_column; editor.execCommand('mceReplaceContent', false, return_text); return; }); }); })(); |
В файл функции темы добавим чтение файла с параметрами кнопки одним из кодов подключения файлов. Разные темы по своему принимают чтение сторонних файлов, поэтому приведу несколько примеров. Так как для меня сработал второй вариант подключения файлов внутри темы wordpress из файла function.php.
1 2 3 4 5 | // Первый стандартный вариант подключения php файла include '/assets/js/swp-btnstrongs.php'; // Подключение php файлов используя функцию get_stylesheet_directory require_once (get_stylesheet_directory () . '/assets/js/swp-btnstrongs.php'); |
Добавляем в файл, содержащий стили для визуального отображения различных блоков темы. Класс с параметрами жирного и курсивного выделения текста.
1 2 3 4 5 6 7 8 | .swp_bold { font-weight: 700; background-color: rgb(204, 255, 204); text-decoration: none;} .swp_italic { background-color: rgb(204, 255, 255); text-decoration: none; {font-style: italic;} |
Или создаем отдельный css файл с параметрами выше и в добавляем в function.php дочерней темы следующие строки. С помощью которого создадим новое действие для своей таблицы стилей и вызовем его из дочерней темы.
1 2 3 4 | function my_theme_add_editor_styles() { add_editor_style( 'custom-editor-style.css' ); } add_action( 'init', 'my_theme_add_editor_styles' ); |
Вывод
На этом все! Вы узнали простой способ как в WordPress добавить кнопки в редактор. Сохраняем все изменения в файле и обновляем страницу с редактором любой из записи. Теперь вы можете выделять нужные вам слова (так же как и вставка ссылки) любой из кнопок. И не беспокоится о фильтрам Яндекса по поводу избыточного выделения тегам b, i, strong и т.п.
P.S. Чтобы кнопки появились в редакторе необходимо будет добавить картинки для кнопок. Например которые использую я в своем редакторе TinyMCE Вордпресс:
- Жирное выделение;
- Наклонный текст;
- Жирно-наклонное выделение текста.
Если вам нужна дополнительная помощь в добавлении кнопок в редактор WordPress на сайт, то вы всегда можете обратиться за помощью в комментариях ниже.
Спасибо за статью. Если бы добавили еще скриншоты вашего редактора как он стал выглядеть после добавление кнопок, цены бы посту не было!
Добавил скриншот добавленных кнопок.
Получается можно добавить кнопки на панель, по типу, тех, которые уже установлены в этой теме на сайт (я про тему Reboot) я хотел бы как раз подключить некоторые из своих созданных стилей.
PS А еще бы вам в блог установить плагин уведомлений об ответе на коммент)) удобно было бы ( я себе поставил — Subscribe to Comments Reloaded — https://ru.wordpress.org/plugins/subscribe-to-comments-reloaded/)
Плагины перегружают работу WordPress, поэтому предпочитаю все необходимые функции приписывать в файле functions.php. В данный момент стоит функция уведомления о новых комментарий в Телеграм. Но после обновления ядра WP — уведомления перестали приходить. Этот вопрос уже решается.
По поводу кнопок… Совершенно верно эти кнопки можно установить на любую тему, которая установлена. Код кнопок приписывается в файле functions.php темы, а не в самом ядре WP.
Вы написали: возможно создать свои кнопки внутри плагина, но я собираюсь добавить их непосредственно в тему.
А как это сделать — я не нашел лично(((
Кнопки создаются не внутри плагина, а в самой теме. В статье описывается, что также есть метод установки кнопок непосредственно используя соответствующие плагины.
Написал бота в Телеграм для блога на WordPress, который уведомляет о новом комментарии к статье @WordpressComments_bot
В скором времени выйдет плагин для Wordpess.