Добавляем чекбокс «nofollow» в редактор wordpress

Добавляем галочку rel="nofollow" в редактор Wordpress

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

В предыдущей статье мы обстоятельно поговорили что такое rel=nofollow, как и когда его использовать. Сегодня же перейдем от слов к делу. Итак, задача: запилить в редактор wordpress какой-нибудь чекбоксик для добавления к ссылке атрибута nofollow.

Вообще, если не хочется писать код — то дополнительный атрибут можно проставить в ссылке в режиме редактора кода. Переходим из визуального режима в режим текст и редактируем код ссылки как угодно.

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

Решение первое: плагины

Их существует достаточно много по этой теме. Достаточно в поиске указать nofollow и wordpress выдаст немаленькую кучку плагинов. Я не буду их перечислять — не вижу смысла. Они все работают по одному принципу — модифицируют файл <code>wplink.js</code> который, собственно, и отвечает за диалог вставки ссылки в редакторе. И все они работают некорректно… Ибо wp достаточно часто обновляется — обновляется wplink, а плагины эти обновляются редко. В общем, я не нашел нормального плагина правильно работающего со версией вордпресс 4.7.4.

Решение второе: самостоятельно модифицировать wplink

Собственно, чем сегодня и займемся. Вытащим файл из свежей версии и самостоятельно его доработаем. В качестве бонуса, при обновлении wp вы будете знать как все функционирует и сами сможете поправить все что нужно.

Ищем файл wp-includes/js/wplink.js и копируем его в директорию со своей темой (у меня это директория /wp-content/themes/themename/js/). Подключим скопированный скрипт в functions.php

Важно. Не изменяйте файл прямо в папке wp-includes, при обновлении он все равно перезапишется и доработки пропадут.

if (is_admin()) {
// отключим стандартный скрипт        
wp_deregister_script('wplink');

// подключим скрипт из папки с темой, который и будем модифицировать
wp_register_script('wplink', get_template_directory_uri() . '/js/wplink.js', array( 'jquery', 'wpdialogs' ), false, 1);

// локализуем его
wp_localize_script('wplink', 'wpLinkL10n', array('title' => __('Insert/edit link'), 'update' => __('Update'), 'save' => __('Add Link'), 'noTitle' => __('(no title)'), 'noMatchesFound' => __('No matches found.') ));
}

Теперь модифицируем его. Суть доработок: в стандартном wordpress диалоге вставки/редактирования ссылки уже есть чекбокс target="_blank" для открытия ссылки в новой вкладке. Мы найдем все места где обрабатывается этот чекбокс и добавим новый аналогичный чекбокс rel="nofollow"

Правка 1. Находим функцию init: function() и добавляем разметку чекбокса:

// находим строку
init: function() {  

// И добавляем после нее это:			
// Определим разметку чекбокса
var relCheckbox = '<div><label><span> </span><input type="checkbox" id="rel-nofollow-checkbox" /><strong> rel="nofollow"</strong></label></div>';

// Выведем разметку после чекбокса "открывать в новой вкладке"
$(relCheckbox).insertAfter( '#wp-link .link-target' );

Находим строку с определением массива инпутов, и добавляем наш новый checkbox после «открыть в новой вкладке»:

// Находим эту строку
inputs.openInNewTab = $( '#wp-link-target' );
// И добавляем после нее наш rel=nofollow
inputs.noFollow = $( '#rel-nofollow-checkbox' );

Шаг 2.  находим функцию mceRefresh: function( searchStr, text ) и модифицируем:

// находим эту строку в функции
inputs.openInNewTab.prop( 'checked', '_blank' === editor.dom.getAttrib( linkNode, 'target' ) );

// и добавляем после нее обработку нашего чекбокса
inputs.noFollow.prop( 'checked', editor.dom.getAttrib( linkNode, 'rel' ).indexOf('nofollow') !== -1 );

Шаг 3. Находим следующую функцию: getAttrs: function() и в ней снова модифицируем

// Ищем строку:
target: inputs.openInNewTab.prop( 'checked' ) ? '_blank' : null,

// Добавляем после нее:
rel: inputs.noFollow.prop("checked") ? "nofollow" : ""

И, в принципе, работа закончена. Результатом будет новый чекбокс в диалоге вставки/редактирования ссылки после чекбокса «открывать в новой вкладке»:

PS. Эти модификации мы проделали на WordPress версии 4.7.4. Если у вас другая версия — возможно, wplink.js будет чуть другой и потребуются чуть другие модификации. Но суть останется та же — добавляем чекбокс аналогичный чекбоксу «target», и аналогично его обрабатываем.

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