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

Всем привет! Сегодня на 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 — обязательное расширение файла).

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

link
Шаг №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 режиме, так что подписывайтесь на обновления и ничего не пропустите.

До встречи!

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

Источник