Кнопка в редактор для ajax-ссылки

Главная » Создание блога » Настройка Wordpress » Кнопка в редактор для ajax-ссылки

Кнопка в редактор для ajax-ссылки

2016-02-20 автор: Виталий Кириллов

Всем привет! Сегодня на seo-mayak.com мы будем снова разбирать стандартный редактор WordPress — TinyMCE.

На блоге я уже рассказывал, как добавить кнопки на панель редактора, с помощью которых можно вставлять различные шорткоды в текстовое поле.

Сегодня мы продолжим тему расширения функционала TinyMCE и очереди у нас отдельная кнопка в редактор для ajax ссылки.

После публикации материла о скрытии ссылок от индексации с помощью технологии Ajax, статья кстати вышла еще в мае 2013, среди веб-мастеров появилось много поклонников данного метода.

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

Каждый раз, когда надо было скрыть ссылку, приходилось переключать редактор в HTML режим и вручную прописывать нужные теги.

Сегодня придет конец мучениям и поможет нам в этом специальная кнопка в редакторе, которая будет делать всю работу за нас.

knopka-v-redaktor-tinymce

Т.е. кнопка будет автоматически добавлять злополучные атрибуты ajax ссылки к выделенному анкору в обычном визуальном режиме.

Я и сам с умилением теперь пользуюсь этой кнопочкой, прямо душу радует. Ведь действительно нужная штука.

Ну да ладно, хватит лирики, давайте уже начнем. Поехали!

Инструкция по добавлению кнопки в редактор

Тема хоть и не такая сложная, но все равно будьте внимательны. Весь процесс внедрения кнопки описан в виде пошаговой инструкции, так что все должно быть понятно.

Шаг №1. В Папке темой ищем папку js. Если таковой не имеется, то создаем ее.

Шаг №2. В папке js создаем папку images. Если такая есть, то вторую, конечно, создавать не надо.

Шаг №3. Создаем иконку кнопки размером 20х20 пикселей. Во избежание лишних нестыковок картинка должна называться link.png (png — обязательное расширение файла).

Иконку можно сделать самостоятельно в фотошопе или скопировать эту картинку:

Шаг №4. Закидываем картинку в созданную папку images.

Шаг №5. В папке js создаем файл ajax-link.js и копируем в него следующий код:

(function(){
	tinymce.create('tinymce.plugins.ExternalReference', 
		{
			init : function(ed, url) 
			{
				ed.addCommand('mceAjaxLink', 
					function(){
						var content = tinyMCE.activeEditor.selection.getContent({format : 'text'});
						var href = jQuery.trim(prompt("Введите URL адрес"));
						if(href != '' && content != '')  {
							ed.execCommand('mceInsertContent', 0, '<span class="external-reference" data-link="'+href+'">'+content+'</span>');
						}
					}
				);
				ed.addButton('ajaxlink', 
					{
						title : 'Ajax ссылка',
						cmd : 'mceAjaxLink',
						image : url + '/images/link.png'
					}
				);				
			},			
		});
	tinymce.PluginManager.add('mayakLink', tinymce.plugins.ExternalReference);
})();

Шаг №6. Открываем для редактирования файл functions.php, что находится в папке с темой и в самое начало, после знака <?php, вставляем три функции:

function mayak_button_register($buttons) {
	array_push($buttons, 'ajaxlink');
	return $buttons;
}
function mayak_tinymce_link($plugin_array) {
	$plugin_array['mayakLink'] = get_stylesheet_directory_uri() . '/js/ajax-link.js';
	return $plugin_array;
}
add_action('init', 'mayak_link_button');
function mayak_link_button() {  
	if(current_user_can('edit_posts') &&  current_user_can('edit_pages')) {
		add_filter('mce_external_plugins', 'mayak_tinymce_link');
		add_filter('mce_buttons', 'mayak_button_register');
	}
}

Шаг №7. Идем в админку, открываем любую запись и на панели редактора в верхнем ряду должна появится наша кнопочка:

knopka-v-redaktor

В принципе все, кнопка готова! Теперь осталось проверить ее в действии.

Как пользоваться кнопкой для ajax-ссылки

На самом деле сложного в использовании кнопки ничего нет, все тоже самое, что и для обычной ссылки, но во избежание лишних вопросов от новичков, объясню все от и до.

Итак, в редакторе выделяем нужный текст, который станет анкором ajax-ссылки и жмем на новоиспеченную кнопку:

knopka-v-redaktor1

После чего откроется модальное окно, куда надо вписать URL, на который будет ссылаться ajax-ссылка:

knopka-v-redaktor2

Нажимаем «ОК», затем переключаем редактор в html режим и видим такую картину:

knopka-v-redaktor3

Все необходимые атрибуты ajax-ссылки благополучно встали на свои места. Не правда ли удобно?

В следующей статье я расскажу, как вывести дополнительные кнопки с произвольными функциями на панель редактора во вкладке «Текст», т.е. когда редактор находится в HTML режиме, так что подписывайтесь на обновления и ничего не пропустите.

До встречи!

С уважением, Виталий Кириллов