Всем привет! Сегодня на seo-mayak.com мы будем снова разбирать стандартный редактор WordPress — TinyMCE.
На блоге я уже рассказывал, как добавить кнопки на панель редактора, с помощью которых можно вставлять различные шорткоды в текстовое поле.
Сегодня мы продолжим тему расширения функционала TinyMCE и очереди у нас отдельная кнопка в редактор для ajax ссылки.
После публикации материла о скрытии ссылок от индексации с помощью технологии Ajax, статья кстати вышла еще в мае 2013, среди веб-мастеров появилось много поклонников данного метода.
Метод действительно хорош и за прошедшее время доказал свою работоспособность, но в его использовании было одно неудобство.
Каждый раз, когда надо было скрыть ссылку, приходилось переключать редактор в HTML режим и вручную прописывать нужные теги.
Сегодня придет конец мучениям и поможет нам в этом специальная кнопка в редакторе, которая будет делать всю работу за нас.
Т.е. кнопка будет автоматически добавлять злополучные атрибуты 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. Идем в админку, открываем любую запись и на панели редактора в верхнем ряду должна появится наша кнопочка:
В принципе все, кнопка готова! Теперь осталось проверить ее в действии.
Как пользоваться кнопкой для ajax-ссылки
На самом деле сложного в использовании кнопки ничего нет, все тоже самое, что и для обычной ссылки, но во избежание лишних вопросов от новичков, объясню все от и до.
Итак, в редакторе выделяем нужный текст, который станет анкором ajax-ссылки и жмем на новоиспеченную кнопку:
После чего откроется модальное окно, куда надо вписать URL, на который будет ссылаться ajax-ссылка:
Нажимаем «ОК», затем переключаем редактор в html режим и видим такую картину:
Все необходимые атрибуты ajax-ссылки благополучно встали на свои места. Не правда ли удобно?
В следующей статье я расскажу, как вывести дополнительные кнопки с произвольными функциями на панель редактора во вкладке «Текст», т.е. когда редактор находится в HTML режиме, так что подписывайтесь на обновления и ничего не пропустите.
До встречи!
С уважением, Виталий Кириллов
Как всегда, все рабочее и нужное! Спасибо большое!
Возможно я одна ничего не понимаю.
И что дает это функция (ajax-ссылки) на продвижение статей и анкоров как влияет?
Технология Ajax позволяет скрыть ссылку от индексации.
Я тоже до недавнего времени не знала про технологию Ajax, пользовалась по-старинке ноуфоллоу для внешних ссылок. По-простому, ajax помогает сберечь вес страницы, как я понимаю
Здравствуйте, Виталий! Думаю, как всегда — очень удобное добавление в редактор. Обязательно попробую кнопку для ajax-ссылки. Пока прописываю вручную. Правда, сделал текстовой файл, откуда просто копирую нужный код.
Виталий, в названии файла fuctions.php опечатка есть (там, где Шаг №6)
Здравствуйте Александр! Спасибо за внимательность ошибку исправил.
И сам опечатку сделал в этом слове! 🙂
Спасибо за статью. Всегда нужная и интересная информация.
Очень даже полезная информация.
Добрый день Виталий! У меня после всего что надо было сделать получается вот так
нуля.
вместо моего домена стоит ссылка и нуля-это якорь. Это на странице
www.zarabotokvseti.net/skachat-besplatno/
и строка (Книга в PDF формате для самостоятельного создания сайта с нуля). Помогите, что делать?Добрый день Виталий! Может быть мне нужно было сделать предварительные действия описанные в вашей статье «Как скрыть ссылку от индексации с помощью jQuery AJAX», чтобы подключиться к библиотеке jQuery?
Я в этом деле новичок и если можно свяжитесь со мной по скайпу marsat2013
Все получилось!!! Разобрался!
Уже разобрался и все работает! Спасибо!
Очень хороший функционал, а слабо сделать архив с исходниками? Спасибо.
А что это за странная конструкция используется вами в комментариях, зачем вам нужно и событие on Click и атрибут data-link, заполнены оба? Почему вы не пользуетесь рекламируемой вами конструкцией со span external link? Вообще по хорошему нужно писать плагин, который автоматически все внешние ссылки заменит на span external-link, поскольку ничто не вечно, поисковики могут понять эту тему и в один прекрасный момент ввести санкции к таким хитрецам и придется перелопачивать весь сайт, чтобы убрать это, а с плагином все будет легче, можно будет его просто отключить одним нажатием кнопки.
Ну можете ничего не скрывать, а заспамить сайт внешними ссылками. И тогда любимый всеми АГС придет гораздо раньше, чем яндекс начнет докапываться до скрытых ссылок. 🙂
Здравствуйте Виталий! Первый раз комментирую на Вашем блоге и уже с вопросом. Споткнулся на пункте №6, после знака <?php, вставил три функции и после этого перестала открываться админка, удалил и снова открывается. К сожалению пока ещё не умею преобразовывать код в html сущность показать не могу.
Здравствуйте Александр!
Если не открывается только админка, попробуйте так:
Виталий, даже так ничего не получается, та же присловутая 500 ошибка. Наверное я что-то не так делаю. Правда недавно купил плагин для wordpress , может это он мешает.
Вполне возможно.
Виталий, маленькое уточнение. Вы используете в коде get_template_directory_uri(). Эта функция не учитывает наличие дочерних тем. И при использовании дочерних тем кнопка не появится. Т.е. чтобы снять этот вопрос достаточно заменить на get_stylesheet_directory_uri() и Ваш код станет универсальнее.
Спасибо Евгений! Функцию обновил.
Здравствуйте! У меня тоже возникла проблема. Все установила и все работает, но… когда в редакторе нажимаю на кнопку ссылки- надпись с кубиками выше поля для вставки ссылки. И при наведении курсора на кнопку ссылки там где русские буквы — кубики. При этом все работает.
Здравствуйте Оксана! Вам надо поменять кодировку файла со скриптом на 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. Вот в этой статье есть решение.
Можно сделать еще круче, без таких телодвижений. С позволения оставлю ссылку:
codeseller.ru/products/advanced-link/
Здравствуйте Виталий!Что то я наверное делаю не так. Все работает!Огромное спасибо. столько времени с экономиться для закрытия ссылки.
Здравствуйте Виталий!Виталий у меня появился дополнительный вопрос.Как создать форму подписки как у вас с почтальоншей?Как настроить Rss ленту я у вас нашел.Может у вас есть статья по созданию такой формы.
Здравствуйте Александр!
Статьи такой нет. Форма подписки — это моя авторская работа и пока она в единственном экземпляре.
Значит буду ждать когда вы поделитесь на своем блоге.блог полезен, спасибо.