Более глубокое изучение текстового редактора 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

Кнопки, используемые по умолчанию в текстовом редакторе 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 в панели администрирования:

Текстовый редактор WordPress - 2

Но с помощью 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.

Улучшение текстового редактора WordPress с помощью плагина AddQuicktag

Он предоставляет страницу параметров, доступную из меню «Настройки». На ней можно добавлять и удалять существующие кнопки в редакторе.

AddQuicktag позволяет настраивать редактор специально для публикаций, страниц и других текстовых областей.

Плагин также добавляет Quicktags в визуальный редактор. Выберите опцию «Visual», и визуальный редактор покажет выпадающее меню Quicktags, на котором расположены все кнопки.

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

Улучшение текстового редактора WordPress с помощью плагина AddQuicktag - 2

Последний раздел предоставляет доступ к дополнительным функциям панели инструментов редактора.

Заключение

Теперь вы сможете настроить панель инструментов текстового редактора WordPress под себя. И для этого необязательно обладать навыками программирования.

Пожалуйста, оставляйте свои мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, подписки, отклики, дизлайки!

Ангелина Писанюкавтор-переводчик статьи «A Deeper Look Into the WordPress Text Editor»