Каждый автор, размещающий контент на сайте WordPress, пользуется редакторской панелью для оформления текста. В этой панели находятся кнопки для быстрого форматирования текста, такие как выделение цитаты, создание упорядоченных (ol) и неупорядоченных (ul) списков, а также выделение заголовков и прочее.
Стандартный набор кнопок в редакторе WordPress весьма обширен, но бывают ситуации, когда хотелось бы дополнить его собственными кнопками. Это могут быть заметки в виде разноцветных блоков или шорткод для вставки меню «Содержание статьи» и другое.
В этой статье мы рассмотрим способ добавления собственных кнопок в редактор WordPress как для текстового редактора, так и для визуального.
Добавляем свои кнопки в текстовый редактор WordPress
Для выполнения этой задачи можно воспользоваться плагинами, однако есть более простой способ, который требует меньше действий, но при этом решает задачу. Для этого просто добавьте в файл functions.php следующий код:
//дополнительные кнопки в текстовом редакторе add_action('admin_footer', 'my_buttons'); function my_buttons() { ?> <script> jQuery(document).ready(function(){ if(typeof(QTags) !== 'undefined') { QTags.addButton( 'Red', 'Red', '<div class="red">', '</div>' ); QTags.addButton( 'Yellow', 'Yellow', '<div class="yellow">', '</div>' ); QTags.addButton( 'Green', 'Green', '<div class="green">', '</div>' ); } }); </script> <?php }
Для примера мы создали три блока с заданными классами. В результате этого действия в редакторе появятся три новые кнопки: Red, Yellow и Green. Когда вы нажмете на одну из этих кнопок, будет добавлен элемент <div>
с соответствующим классом в область текста.
Если вы рассмотрите код, то заметите, что каждая кнопка создается с использованием функции QTags.addButton
. Если вам нужно добавить еще несколько кнопок, просто продублируйте эту строку и задайте ей уникальный идентификатор, название и нужное содержимое. Вот пример:
QTags.addButton( 'идентификатор', 'название кнопки', 'открывающий тег', 'закрывающий тег' );
Добавляем свои кнопки в визуальный редактор WordPress
Добавления своих стилей в визуальный редактор WordPress, а точнее, это будет выпадающий список со всеми блоками оформления, вам нужно сделать то же, что и в предыдущем варианте. Откройте файл functions.php и добавьте в него следующие код:
/* Добавляем выпадающее меню в визуальный редактор */ function my_buttons_menu_tiny($buttons) { array_unshift($buttons, 'styleselect'); return $buttons; } add_filter('mce_buttons_2', 'my_buttons_menu_tiny'); function my_formats_tiny_v($init_array) { $style_formats = array( // Каждый дочерний элемент - формат со своими собственными настройками array( 'title' => 'Заголовок с фоном', 'block' => 'div', 'classes' => 'background-title', 'wrapper' => true, ), array( 'title' => 'Выделенный текст', 'block' => 'span', 'classes' => 'text-bg', 'wrapper' => true, ), array( 'title' => 'Кнопка', 'block' => 'a', 'classes' => 'button-link', 'attributes' => array( 'href' => 'ссылка' ), ), array( 'title' => 'Иконка', 'block' => 'span', 'classes' => 'my-icon', ), // Добавьте еще форматы по своему усмотрению ); $init_array['style_formats'] = json_encode($style_formats); return $init_array; } add_filter('tiny_mce_before_init', 'my_formats_tiny_v');
Итак, мы добавили свои форматы (кнопки) в визуальный редактор в виде выпадающего списка для быстрого форматирования текста. У каждого этого блока есть свой класс, через который можно прописывать стили.
Если вы хотите добавить ещё больше таких форматов, просто продублируйте дочерней массив и задайте нужные параметры, а именно:
array( 'title' => 'Заголовок с фоном', 'block' => 'div', 'classes' => 'background-title', 'wrapper' => true, ),
title:
Название формата или стиля в редакторе (будет отображаться в панели редактора).
block:
Тип HTML-элемента (например, span, div, тег ссылки и т.д.).
classes:
CSS-класс, который будет применен к элементу.
wrapper:
Определяет, будет ли текст обернут в тег (например, <div>
) с указанным классом при применении формата.
И последнее что осталось, так это проверить результат. Зайдете в админ-панель WordPress и откройте статью или страницу для редактирования, и в панели редактора увидите наше выпадающее меню.
Привет. А есть ли способ вывести кнопку и в визуальном редакторе, а не только текстовом?
Здравствуйте. Просто всегда в текстовый добавляют, так как он корректно отображает код и ничего лишнего туда не добавляет. Но если так нужен визуальный, то вот плагин srd.wordpress.org/plugins/tinymce-advanced/ или похожие ему, их много.