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

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

До встречи!

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

(предыдущая статья)

Комментарии: 32

  1. Сергей:

    Как всегда, все рабочее и нужное! Спасибо большое!

    Ответить
  2. Sara:

    Возможно я одна ничего не понимаю.
    И что дает это функция (ajax-ссылки) на продвижение статей и анкоров как влияет?

    Ответить
    • Виталий Кириллов:

      Технология Ajax позволяет скрыть ссылку от индексации.

      Ответить
    • Tatyana Art:

      Я тоже до недавнего времени не знала про технологию Ajax, пользовалась по-старинке ноуфоллоу для внешних ссылок. По-простому, ajax помогает сберечь вес страницы, как я понимаю

      Ответить
  3. Александр Силиванов:

    Здравствуйте, Виталий! Думаю, как всегда — очень удобное добавление в редактор. Обязательно попробую кнопку для ajax-ссылки. Пока прописываю вручную. Правда, сделал текстовой файл, откуда просто копирую нужный код.
    Виталий, в названии файла fuctions.php опечатка есть (там, где Шаг №6)

    Ответить
    • Виталий Кириллов:

      Здравствуйте Александр! Спасибо за внимательность ошибку исправил.

      Ответить
  4. Александр Силиванов:

    И сам опечатку сделал в этом слове! 🙂

    Ответить
  5. Стас:

    Спасибо за статью. Всегда нужная и интересная информация.

    Ответить
  6. Дмитрий:

    Очень даже полезная информация.

    Ответить
  7. Maksad Isaev:

    Добрый день Виталий! У меня после всего что надо было сделать получается вот так

    нуля.

    вместо моего домена стоит ссылка и нуля-это якорь. Это на странице www.zarabotokvseti.net/skachat-besplatno/ и строка (Книга в PDF формате для самостоятельного создания сайта с нуля). Помогите, что делать?

    Ответить
  8. Maksad Isaev:

    Добрый день Виталий! Может быть мне нужно было сделать предварительные действия описанные в вашей статье «Как скрыть ссылку от индексации с помощью jQuery AJAX», чтобы подключиться к библиотеке jQuery?

    Ответить
  9. Maksad Isaev:

    Я в этом деле новичок и если можно свяжитесь со мной по скайпу marsat2013

    Ответить
  10. Maksad Isaev:

    Все получилось!!! Разобрался!

    Ответить
  11. Maksad Isaev:

    Уже разобрался и все работает! Спасибо!

    Ответить
  12. Елена Шикова:

    Очень хороший функционал, а слабо сделать архив с исходниками? Спасибо.

    Ответить
  13. Елена Шикова:

    А что это за странная конструкция используется вами в комментариях, зачем вам нужно и событие on Click и атрибут data-link, заполнены оба? Почему вы не пользуетесь рекламируемой вами конструкцией со span external link? Вообще по хорошему нужно писать плагин, который автоматически все внешние ссылки заменит на span external-link, поскольку ничто не вечно, поисковики могут понять эту тему и в один прекрасный момент ввести санкции к таким хитрецам и придется перелопачивать весь сайт, чтобы убрать это, а с плагином все будет легче, можно будет его просто отключить одним нажатием кнопки.

    Ответить
    • Bahus:

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

      Ответить
  14. Александр:

    Здравствуйте Виталий! Первый раз комментирую на Вашем блоге и уже с вопросом. Споткнулся на пункте №6, после знака <?php, вставил три функции и после этого перестала открываться админка, удалил и снова открывается. К сожалению пока ещё не умею преобразовывать код в html сущность показать не могу.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Александр!
      Если не открывается только админка, попробуйте так:

      function mayak_button_register($buttons) {
      	array_push($buttons, 'ajaxlink');
      	return $buttons;
      }
      function mayak_tinymce_link($plugin_array) {
      	$plugin_array['mayakLink'] = get_template_directory_uri() . '/js/ajax-link.js';
      	return $plugin_array;
      }
      add_action('init', 'mayak_link_button');
      function mayak_link_button() {  
      add_filter('mce_external_plugins', 'mayak_tinymce_link');
      add_filter('mce_buttons', 'mayak_button_register');	
      }
      Ответить
      • Александр:

        Виталий, даже так ничего не получается, та же присловутая 500 ошибка. Наверное я что-то не так делаю. Правда недавно купил плагин для wordpress , может это он мешает.

        Ответить
        • Виталий Кириллов:

          Вполне возможно.

          Ответить
  15. Евгений:

    Виталий, маленькое уточнение. Вы используете в коде get_template_directory_uri(). Эта функция не учитывает наличие дочерних тем. И при использовании дочерних тем кнопка не появится. Т.е. чтобы снять этот вопрос достаточно заменить на get_stylesheet_directory_uri() и Ваш код станет универсальнее.

    Ответить
    • Виталий Кириллов:

      Спасибо Евгений! Функцию обновил.

      Ответить
  16. Оксана:

    Здравствуйте! У меня тоже возникла проблема. Все установила и все работает, но… когда в редакторе нажимаю на кнопку ссылки- надпись с кубиками выше поля для вставки ссылки. И при наведении курсора на кнопку ссылки там где русские буквы — кубики. При этом все работает.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Оксана! Вам надо поменять кодировку файла со скриптом на UTF-8.

      Ответить
      • Вилена:

        Здравствуйте Виталий.
        Скажите пожалуйста, я хочу создать целый раздел с онлайн пдф журналами закачанными на issuu. Они выдают вот такой ифрейм, пример(использовала ваш преобразователь):
        <iframe style="width: 100%; height: 705px;" src="//e.issuu.com/embed.html#28733602/45992757" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

        Я так понимаю, что ссылку внутри нужно маскировать?
        Та же самая ситуация и с видео контентом — как тут быть?

        Ответить
        • Виталий Кириллов:

          Здравствуйте Вилена! Можно подгружать такой контент через Ajax. Вот в этой статье есть решение.

          Ответить
  17. Ян Александров:

    Можно сделать еще круче, без таких телодвижений. С позволения оставлю ссылку: codeseller.ru/products/advanced-link/

    Ответить
  18. Александр:

    Здравствуйте Виталий!Что то я наверное делаю не так. Все работает!Огромное спасибо. столько времени с экономиться для закрытия ссылки.

    Ответить
  19. Александр:

    Здравствуйте Виталий!Виталий у меня появился дополнительный вопрос.Как создать форму подписки как у вас с почтальоншей?Как настроить Rss ленту я у вас нашел.Может у вас есть статья по созданию такой формы.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Александр!
      Статьи такой нет. Форма подписки — это моя авторская работа и пока она в единственном экземпляре.

      Ответить
  20. Александр:

    Значит буду ждать когда вы поделитесь на своем блоге.блог полезен, спасибо.

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS