Добавление кнопок в редактор WordPress

Дополнительные кнопки в редактор WordPress

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

В сети решил поискать информацию по добавлению кнопок в редактор WordPress. Есть решения, но они неполноценны по многим критериям. Поэтому решил свой вариант предложить.

Все рассмотренные решения обладают недостатками. Вот парочка из них.

Изменения лишь на уровне клиента. Кнопки новые действительно появляются в редакторе, но диапазон тегов ограничен. Точнее он ограничен количеством тегов html. То есть, если вы хотите вставить тэг заголовка <h3>, то он в таком виде в редакторе и вставится. А хотелось бы возможности реализовать свои коды (по типу bb-кодов). Для этого уже необходима работа с php файлами.
Если я натыкался на статьи, где рассмотрена работа с php, то всё на уровне хаков, то есть дописыванием своего кода в движок. Сразу видно минусы. При том же обновлении движка блога, файлы движка перетираются, и ваш код будет утерян. Вы конечно можете снова его туда вставить, но это нерационально.

Вторую проблему решил тем, что реализовал свой вариант в виде плагина. Первая же решается тем, что мы добавляем свой фильтр в WP.

Создание плагина

Решение в виде плагина удобно тем, что включение/выключение кнопок реализуется в админке WP. В случае же обновления движка, нам ничего нового дописывать не надо будет. Теперь по порядку.

Создаём папку в директории plugins, назовём её wp-quick-tags.
Создаём в ней php файл, например wp-quick-tags.php.
Создаём в директории wp-quick-tags папки js и css.
В папке js создаём файл wp-admin-quick-tags.js.
В папке css создаём файл wp-quick-tags.css.

Работа с js

Открываем wp-admin-quick-tags.js. Теперь определимся с кнопкой. Мне лично нужна была кнопка, которая вставляет код (html например). Если вы просто вставите html код, то он интерпретируется при выводе. Чтобы вывести html в виде текста (в том виде, в котором вы ввели), необходимо заменить заменить HTML сущности на спецсимволы (например: < на <). Можно и ручками делать, но это не рационально…да и не красиво. Рассмотрим два варианта реализации нашей задачи: метод описанный в большинстве статей в сети (с использованием лишь js) и наш вариант. Добавляем кнопки в редактор:

edButtons[edButtons.length] = new edButton('ed_encoder_now','HTML Encoder Now','','');
edButtons[edButtons.length] = new edButton('ed_encoder','HTML Encoder','[html_encoded',']');

1 2	edButtons[edButtons.length] = new edButton('ed_encoder_now','HTML Encoder Now','',''); edButtons[edButtons.length] = new edButton('ed_encoder','HTML Encoder','[html_encoded',']');

ed_encoder_now — кнопка для варианта описанного в сети. ed_encoder — наша кнопка. Внимание: запомните название html_encoded, оно нам понадобится в php файле. Регистрируем обработчики для кнопок:

function edShowButton(button, i) 
{
	if (button.id == 'ed_encoder_now') {
	document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInserthtmlcodenow(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else if (button.id == 'ed_encoder') {
	document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInserthtmlcode(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else {
	document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
	}
}
function $(id){ return document.getElementById(id) }

function edShowButton(button, i)

{

if (button.id == 'ed_encoder_now') {

document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInserthtmlcodenow(edCanvas, ' + i + ');" value="' + button.display + '" />');

}

else if (button.id == 'ed_encoder') {

document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInserthtmlcode(edCanvas, ' + i + ');" value="' + button.display + '" />');

}

else {

document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '" />');

}

function $(id){ return document.getElementById(id) }

Обработчик для кнопки на чистом js:

function edInserthtmlcodenow(insText)
{

	var a=(insText.value).substring(insText.selectionStart, insText.selectionEnd); 
	if(!a) a = prompt("Please enter the text","Insert Text");
	if(a) {a=encode_entities(a);edInsertContent(insText,a);}
}

function encode_entities(s){
  var result = '';
  for (var i = 0; i < s.length; i++){
    var c = s.charAt(i);
    result += {'<':'&#60;', '>':'&#62;', '&':'&#38;', '\"':'&#34;', '\'':'&#39;', '-':'&#45;', '/':'&#47;', '=':'&#61;', '!':'&#33;', '(':'&#40;', ')':'&#41;', '[':'&#91;', ']':'&#93;', '{':'&#123;', '}':'&#125;', '\n':'&#13;'}[c] || c;
  }
  return result;
}

function edInserthtmlcodenow(insText)

{

var a=(insText.value).substring(insText.selectionStart, insText.selectionEnd);

if(!a) a = prompt("Please enter the text","Insert Text");

if(a) {a=encode_entities(a);edInsertContent(insText,a);}

}

function encode_entities(s){

var result = '';

for (var i = 0; i < s.length; i++){

var c = s.charAt(i);

result += {'<':'<', '>':'>', '&':'&', '\"':'"', '\'':''', '-':'-', '/':'/', '=':'=', '!':'!', '(':'(', ')':')', '[':'[', ']':']', '{':'{', '}':'}', '\n':''}[c] || c;

}

return result;

}

Что делает обработчик? При выделении текста и нажатии на кнопку HTML Encoder Now все спец. символы заменяются и вы увидите в редакторе что-то типо <h3 > < /h3 > (исходный текст был <h3></h3>). Согласитесь, не очень смотрится. Поэтому мы и создаём свой тэг. Обработчик нашей кнопки:

function edInserthtmlcode(insText)
{

	var a=(insText.value).substring(insText.selectionStart, insText.selectionEnd); 
	if(!a) a = prompt("Please enter the text","Insert Text");
	if(a) {a='[html_encoded]'+a+'[/html_encoded]';edInsertContent(insText,a);}
}

function edInserthtmlcode(insText)

{

var a=(insText.value).substring(insText.selectionStart, insText.selectionEnd);

if(!a) a = prompt("Please enter the text","Insert Text");

if(a) {a='[html_encoded]'+a+'[/html_encoded]';edInsertContent(insText,a);}

}

Что делает обработчик? При выделении текста и нажатии на кнопку HTML Encoder текст заключается в тэг, вы увидите в редакторе [html_encoded]<h3></h3>[/html_encoded].

Работа с php

Теперь поработаем с php файлом. Вначале необходимо служебную информацию записать (она в админке будет отображаться).

<?php
/*
Plugin Name: WP Quicktags
Plugin URI: https://suvitruf.ru/
Description: <strong>WP Quicktags</strong>.
Version: 1.0.1
Author: Suvitruf
Author URI: https://suvitruf.ru/
*/

<?php

Plugin Name: WP Quicktags

Plugin URI: https://suvitruf.ru/

Description: <strong>WP Quicktags</strong>.

Version: 1.0.1

Author: Suvitruf

Author URI: https://suvitruf.ru/

Затем необходимо зарегистрировать наш плагин:

// WP < 2.8
if ( !function_exists('plugins_dir_url') ) :
function plugins_dir_url($file)
{
	// WP < 2.6
	if ( !function_exists('plugins_url') )
		return trailingslashit(get_option('siteurl') . '/wp-content/plugins/' . plugin_basename($file));

	return trailingslashit(plugins_url( plugin_basename(dirname($file))));
}
endif;

// WP < 2.8

if ( !function_exists('plugins_dir_url') ) :

function plugins_dir_url($file)

{

// WP < 2.6

if ( !function_exists('plugins_url') )

return trailingslashit(get_option('siteurl') . '/wp-content/plugins/' . plugin_basename($file));

return trailingslashit(plugins_url( plugin_basename(dirname($file))));

}

endif;

Часть кода у нас в js, так что необходимо включить соответствующий файл в заголовок.

function wp_quick_tags() {
	wp_enqueue_script(
		'wp_quick_tags',
		plugins_dir_url(__FILE__) . 'js/wp-admin-quick-tags.js',
		array('quicktags')
	);
}
add_action('admin_print_scripts', 'wp_quick_tags');

function wp_quick_tags() {

wp_enqueue_script(

'wp_quick_tags',

plugins_dir_url(__FILE__) . 'js/wp-admin-quick-tags.js',

array('quicktags')

);

}

add_action('admin_print_scripts', 'wp_quick_tags');

Чтобы работали наши стили, нужно их подключить:

function quick_tags_js_css(){
   global $wp_quicktags_plugin_url;
   ?>
   <link rel="stylesheet" type="text/css" media="all" href="<?php echo $wp_quicktags_plugin_url; ?>css/wp-quick-tags.css"/>
   
   <?php
}
add_action('wp_head', 'quick_tags_js_css');

function quick_tags_js_css(){

global $wp_quicktags_plugin_url;

<?php

}

add_action('wp_head', 'quick_tags_js_css');

Здесь же подключаем файлы js, если необходимо. Добавляем обработчик нашего тэга и регистрируем его.

function html_encoder( $atts, $content = null ) {
    return htmlspecialchars(trim($content));
}
add_shortcode('html_encoded', 'html_encoder');

function html_encoder( $atts, $content = null ) {

return htmlspecialchars(trim($content));

}

add_shortcode('html_encoded', 'html_encoder');

Тот самый html_encoded, который был в js. При выводе поста [html_encoded][/html_encoded] преобразуется и мы увидим <h3></h3>. Вот собственно и всё, теперь необходимо в админке на странице плагинов подключить нашей новоиспечённый, и вы увидите в редакторе две новых кнопки.

Gamedev suffering

Блог о разработке игр и серверных технологиях

Добавление кнопок в редактор WordPress

Создание плагина

Работа с js

Работа с php