Более глубокое изучение текстового редактора WordPress
Статья целиком посвящена нативному редактору WordPress. Сперва мы рассмотрим Quicktags JS API, фильтр quicktags_settings и функцию wp_editor().
Последний раздел статьи предназначен для пользователей, не имеющих навыков программирования. В нем описывается плагин, который позволяет легко настраивать текстовый редактор WordPress.
Текстовый редактор WordPress
На панели инструментов текстового режима редактора есть набор кнопок (квиктегов), которые позволяют быстро добавлять большое количество тегов в HTML-структуру.
По умолчанию, в WordPress доступны следующие квиктеги:
- a;
- strong;
- code;
- del;
- em;
- ol;
- ul;
- li;
- img;
- blockquote;
- ins;
- fullscreen;
- lookup;
Кнопки, используемые по умолчанию в текстовом редакторе WordPress
Quicktags API – это JavaScript API, который предоставляет простой способ добавления кнопок.
Метод QTags.addButton добавляет кнопку в панель инструментов. Он определяется следующим образом:
QTags.addButton(
id,
display,
arg1,
arg2,
access_key,
title,
priority,
instance );
Этот метод принимает следующие параметры:
- id (string) (обязательный) - уникальный HTML-идентификатор для кнопки;
- display (string) (обязательный) - значение атрибута value;
- arg1 (string) (обязательный) - открывающий тег или название callback-функции, которая запускается при нажатии на кнопку;
- arg2 (string) (необязательный) закрывающий тег;
- access_key (string) (необязательный) - клавиатурный квиктег кнопки;
- title (string) (необязательный) - заголовок кнопки;
- priority (int) (необязательный) - номер, который указывает порядок кнопок на панели инструментов;
- instance (string) (необязательный) ограничивает кнопку конкретными квиктегами.
Предположим, что мы хотим добавить в панель редактора теги, необходимые для выделения синтаксиса типа Prism. Нужно разместить на панели инструментов кнопки для такой разметки:
<pre><code class="language-php"></code></pre>
<pre><code class="language-css"></code></pre>
<pre><code class="language-html"></code></pre>Для этого задания необходимо добавить следующий код в главный файл плагина:
function my_quicktags() {
if ( wp_script_is( 'quicktags' ) ) {
?>
<script>
QTags.addButton( 'eg_php', 'PHP', '<pre><code class="language-php">', '</code></pre>', 'p', 'PHP Code', 100 );
QTags.addButton( 'eg_css', 'CSS', '<pre><code class="language-css">', '</code></pre>', 'q', 'CSS Code', 100 );
QTags.addButton( 'eg_html', 'HTML', '<pre><code class="language-html">', '</code></pre>', 'r', 'HTML Code', 100 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'my_quicktags' );admin_print_footer_scripts - это хук-событие позволяет выводить любой текст в футере панели администрирования. Callback-функция проверяет, используется ли скрипт квиктега, а затем выводит JS-код.
Скрипт добавляет еще три кнопки экземпляру Quicktags в панели администрирования:
Но с помощью Quicktags API можно сделать гораздо больше. К примеру, можно передать методу QTags.addButton callback-функцию, которая запускается, когда пользователь нажимает на соответствующую кнопку. Рассмотрим следующий код:
function custom_quicktags() {
if ( wp_script_is( 'quicktags' ) ) {
?>
<script>
QTags.addButton( 'eg_callback', 'CSS div', css_callback );
function css_callback(){
var css_class = prompt( 'Class name:', '' );
if ( css_class && css_class !== '' ) {
QTags.insertContent('<div class="' + css_class +'"></div>');
}
}
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'custom_quicktags' );css_callback – это JavaScript-функция, которая запускается, когда пользователь нажимает кнопку. В нашем примере она запрашивает имя класса для div.
Метод QTags.insertContent выведет указанную строку в текстовое поле редактора.
Мы добавляли квиктеги в редактор WordPress с помощью события admin_print_footer_scripts.
Базовые настройки квиктегов
Quicktags API предоставляет возможность добавлять новые кнопки на панель инструментов текстового редактора. Средства WordPress позволяет убирать кнопки с помощью фильтра quicktags_settings.
function my_quicktags( $qtInit, $editor_id = 'content' ) {
$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );Callback-функция принимает два аргумента:
- $qtInit – массив настроек.
- $editor_id –уникальный идентификатор редактора.
В нашем примере $ editor_id по умолчанию имеет значение ‘content’. Он является идентификатором поля textarea при редактировании публикаций.
Обратите внимание о, что имена тегов в списке квиктегов разделяются запятыми, а не пробелами.
Эта функция может быть использована для удаления всех кнопок с панели инструментов:
function my_quicktags( $qtInit, $editor_id = 'content' ) {
$qtInit['buttons'] = ',';
return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );Мы назначили запятую в качестве значения для элемента ‘buttons’ массива $qtInit. Пустая строка не будет работать, и настройки по умолчанию не будут переопределены.
Настройка редактора WordPress на главной странице
Функция wp_editor позволяет отобразить редактор в любом месте сайта. Она определяется в файле wp-includes/general-template.php следующим образом:
wp_editor( $content, $editor_id, $settings = array() );- $content (string) (обязательный) заранее установленный текст в поле формы;
- $editor_id (string) (обязательный) идентификатор для полей textarea и TinyMCE (может содержать только строчные буквы и подчеркивания);
- $settings (array) (необязательный) массив аргументов.
Массив аргументов позволяет установить множество параметров конфигурации редактора. Полный список аргументов в кодексе WordPress.
Например, можно отобразить редактор в шаблоне страницы. Рассмотрим следующий пример:
$content = '';
$editor_id = 'mycustomeditor';
$settings = array(
'wpautop' => false,
'media_buttons' => false,
'quicktags' => array(
'buttons' => 'strong,em,del,ul,ol,li,block,close'
),
);
wp_editor( $content, $editor_id, $settings );Приведенный выше код выводит пустой редактор с идентификатором ‘myeditor’ с указанными кнопками на панель инструментов.
- Аргумент wpautop имеет значение false, поэтому элементы p будут использоваться для установки абзацев;
- Аргумент media_buttons имеет значение false, поэтому пользователь не сможет загружать мультимедийные файлы;
- Массив quicktags определяет кнопки для отображения на панели инструментов текстового редактора.
Основное различие между функцией wp_editor() и фильтром quicktags_settings заключается в том, что функция применяется к конкретному экземпляру редактора. А также используется для настройки новых экземпляров редакторов в любом месте. Хук quicktags_settings фильтрует все существующие экземпляры и не может использоваться для создания новых.
Полный код приведенных выше примеров доступен на Gist.
Улучшение текстового редактора WordPress с помощью плагина AddQuicktag
AddQuicktag – это плагин, который позволяет добавлять кнопки в текстовый редактор WordPress.
Он предоставляет страницу параметров, доступную из меню «Настройки». На ней можно добавлять и удалять существующие кнопки в редакторе.
AddQuicktag позволяет настраивать редактор специально для публикаций, страниц и других текстовых областей.
Плагин также добавляет Quicktags в визуальный редактор. Выберите опцию «Visual», и визуальный редактор покажет выпадающее меню Quicktags, на котором расположены все кнопки.
Второй раздел параметров предназначен для настройки встроенных квиктегов.
Последний раздел предоставляет доступ к дополнительным функциям панели инструментов редактора.
Заключение
Теперь вы сможете настроить панель инструментов текстового редактора WordPress под себя. И для этого необязательно обладать навыками программирования.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, дизлайки, отклики, лайки!