Облако меток WordPress – как избавиться от сквозных ссылок – метОда аякс

Тема вреда сквозных ссылок волнует воображение многих вебмастеров и владельцев ресурсов. И коли такая тяга к ceo есть, то сегодня избавимся от сквозняка ссылок виджета облака меток и также удалим из зоны видимости поисковых глаз (для тех, которые пользуются) навигацию по меткам/тегам в финале статьи. Скроем всю эту атрибутику скриптом ajax. …более того, все привычные регулировки расширением останутся с нами, в то время как, для неопытного пользователя в случае использования обычного скрипт-кода, настройки стилистики сбиваются нещадно, – а в предложенном же мною варианте для кого-то из новичков (и не только) добавятся и ещё более утончённые рычаги управления.

Буду показывать подробно, – вся ваша меточная навигация будет работать в соответствии с той к которой привыкли – только стопроцентно сокрыта!

Требований пара: читать статью внимательно и выполнять у себя на сайте всё по аналогии…

избавляемся от сквозных ссылок при помощи скрипта AJAX

Сделаем так! …начнём чуточку с теории… которым неинтересно, промотайте книзу.

Код буду использовать описанный блогером Виталием Кирилловым (увидел у него когда-то), но не пользовался сам – считаю эту сопливую и сквозную теорию малость раздутой сеошниками. Может и не прав.

Пару дней назад сделал это избавление от сквозных ссылок одному из рестораторов: решил попробовать и у себя, чтобы, так сказать, проследить динамику воочию…

…тут дело вот в чём: коды показанные блогером замечательно работают – но касаемо облака меток не всё так гладко получается…

После внедрения скрипта – перестают напрочь работать (что естественно) регулировки облаком, прописанные в файл функций: размеры текста ссылок, очерёдность вывода, стилистика мудрит и т. д – всё это стандартными способами поправить проблематично. Вот это многих и приводит в замешательство на полпути – бросают сие предприятие к чёрту: кто-то избавляется от меток вообще, оставляя дорогу мечте о чистоте сайта, а кто-то – оставляет теги открытыми, – хотя все эти нестыковки поправляется в два счёта (как закрыть метки простым nofollow описано здесь, кстати, очень полезно – рекомендую).

Что же получается, если просто воспользоваться скриптом сокрытия ссылок меточной навигации без всяких поправок..? Белиберда, вследствие которой в определённый момент перестают слушаться облачные регулировки. Блогеров можно понять!

Однако для тех ребят, которым меточная навигация дорога, сегодняшняя статья и посвящена: метки будут прикрыты и останутся на привычном месте сайта!

…кое-что добавим в тело классической теории – и всё будет функционировать лучше чем было.

Придётся немного поработать, а в остальном всё просто!

как спрятать в скрипт аякс виджет облака меток

Итак, воспользуемся легендарной технологией аякс, тем способом, который называется “скрыть в скрипт” ссылки облака меток виджета.

Подключим соответствующую библиотеку, создадим простенький файл, в котором перенаправим вывод отработки функции тегов к себе в шаблон, …ну и… вернём прежнюю стилистику.

А пока решим вопрос о том, как

перенести функцию вывода меток к себе в шаблон

Для этого нам необходимо сгонять по такому пути в ядре вордпресс: домен/wp-includes/category-template.php открываем документ и в строках примерно 720 отыскиваем такую начальную строку кода функции function wp_tag_cloud

…находите её финал, копируете…

Можете скопировать код расположенный в спойлере. Думаю, никаких кардинальных обновлений относительно функции вывода меток в обозримом будущем не будет.

/*** СТАРТУЕМ - ФУНКЦИЯ отработки ТЕГОВ ИЗ ЯДРА WP ***/
function wp_tag2_cloud( $args = '' ) {
$defaults = array(
'smallest' => 12, 'largest' => 13, 'unit' => 'px', 'number' => 45,
'format' => 'flat', 'separator' => "\n", 'orderby' => 'name', 'order' => 'DESC', // ASC
'exclude' => '', 'include' => '', 'link' => 'view', 'taxonomy' => 'post_tag', 'post_type' => '', 'echo' => true
);
$args = wp_parse_args( $args, $defaults );

$tags = get_terms( $args['taxonomy'], array_merge( $args, array( 'orderby' => 'count', 'order' => 'DESC' ) ) ); // Always query top tags

if ( empty( $tags ) || is_wp_error( $tags ) )
return;

foreach ( $tags as $key => $tag ) {
if ( 'edit' == $args['link'] )
$link = get_edit_term_link( $tag->term_id, $tag->taxonomy, $args['post_type'] );
else
$link = get_term_link( intval($tag->term_id), $tag->taxonomy );
if ( is_wp_error( $link ) )
return;

$tags[ $key ]->link = $link;
$tags[ $key ]->id = $tag->term_id;
}

$return = wp_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args

/**
* Filters the tag cloud output.
*
* @since 2.3.0
*
* @param string $return HTML output of the tag cloud.
* @param array $args An array of tag cloud arguments.
*/
$return = apply_filters( 'wp_tag2_cloud', $return, $args );

if ( 'array' == $args['format'] || empty($args['echo']) )
return $return;

echo $return;
}
/*** ФИН ФУНКЦИЯ ТЕГОВ ИЗ ЯДРА WP ***/

Помещаем эту “функцию” к себе в файл функций functions.php.

Первая победа !!

…тем самым мы станем независимы от обновлений WP и запросто сможем совершать стилистические правки ссылок меток (взгляните внимательнее на код – все регуляторы под рукой).

Переименовываем перенесённую функцию..! например у меня получилось так function wp_tag2_cloud – циферку 2 добавил.

Основную работу сделали!

Теперь давайте в корне шаблона создадим файлик с именем, скажем, ajax-tagss.php и пропишем в него следующий куплет кода)

<?php require_once("../../../wp-config.php"); ?>
<?php wp_tag2_cloud (); ?>

Обратите внимание на строчку 2 – как раз наша новая функция. Понимаете? отныне у нас будет сама функция цепляться не из ядра WP, но из собственного файла функций!

Сохраняем и этот созданный файл…

Теперь нужно организовать новый документ в работе сайта!

Подключаем его к своему шаблону в файле footer.php.

Помещаете такую строку куда-нить перед закрывающим тегом </body>:

<script>(function($){ $(function(){$("#tagSS").load("//домен/wp-content/themes/имя_шаблона/ajax-tagss.php");})})(jQuery)</script>

Что ещё..? как известно за вывод функции отработки меток на сайте отвечает такая функция:

<?php wp_tag_cloud (); ?>

у нас, как понимаете – будет иная:

<?php wp_tag2_cloud (); ?>… она и обозначена в новом файле.

Далее…

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

Итак: остаётся создать новый текстовой виджет и прописать в его теле следующую строку:

<div id="tagSS"></div>

Это и есть необходимая зацепка нашего перенесённого кода в файл функций, но !! через обработку созданного файла ajax-tagss.php, который привязан к скрипту в футере – таким макаром ссылки и скроются с глаз!

Остаётся обозначить строку в виджете дивами css, чтобы вернуть прежнюю стилистику… у меня имя div-класса было .tagcloud.

Получится примерно так:

<div class="tagcloud"><div id="tagSS"></div></div>

(у вас в файле стилей, возможно, используется иное имя селектора – вот им и одевайте идентификатор.

Перезагружайте страничку сайта, смотрите что получается на месте нового текстового виджета?

Готово дело! Сквозных ссылок меток у нас теперь нет. Можете тестировать работу на ЭТОМ сервисе. Думаю, число ссылок уменьшится – бесполезные линки пропадут для глаз ПС.

И если интересно, откройте Ctrl+U исходный код и взгляните на то что получилось…

Вместо информационных строк, заместо того как было раньше (вероятно, смотрели), ссылки меток не будет видно, а будет так, как на фото:

В качестве эпилога:

закрываем навигационные ссылки меток в теле статьи…

Кратко: нужно подключить актуальную на данный момент библиотеку jquery-1.12.4.min.js (но это если она у вас не подключена и вы не создавали какие-то связанные с ней функции) – предстоит выполнить несколько простых действий включения библиотеки и правочку CSS для обозначения стилистики завёрнутых “в аякс” ссылок – всё описано в статье, ссылка на которую чуть ниже.

Кратко опять-таки: делается это просто – либо скачиваете файл библиотеки и загоняете к себе на сервер (в корневую папку js шаблона) либо подключаетесь от стеллажей google – подробнее о подключениях и настройках читайте здесь (иначе ссылки не заработают должным образом).

…чтобы вам пока не отвлекаться на иные статьи, предлагаю подключиться к гугл, а уж потом решить для себя окончательный способ…

…хотя, цепляя библио вариацией ниже, на мой взгляд, правильное решение.

Пропишите эту строку чуть выше той, с которой разбирались выше. Конечно же, в файле footer.php.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Далее, ниже неё) пропишите такую строку (обработчик ссылок)

<script>$('.external-reference').replaceWith (function (){return'<a onclick="return !window.open(this.href)" href="'+$(this).data ('link')+'" title="'+$(this).text ()+'">'+$(this).html ()+'</a>';})</script>

А этот код нужно поместить в файл функций…

/** СКРЫВАЕМ ССЫЛКИ МЕТОК - АЯКС СТАТЬИ **/
function my_hide_naviga_menu( $my_hide_menu ) {
$pum = array ("<a", "/a>", "href", );
$bum = array ('<span class="external-reference"', "/span>", "data-link");
return str_replace($pum, $bum, $my_hide_menu);
}
add_filter( 'the_tags', 'my_hide_naviga_menu' );
/** ФИН СКРЫВАЕМ ССЫЛКИ МЕТОК - АЯКС СТАТЬИ **/

Что ж… сквозные ссылки меточной навигации в статьях мы успешно устранили!

Однако не забудьте – пройдите по ссылке выше, задайте и настройте правильную CSS отработку ссылок, а затем внимательно тестируйте сегодняшнюю работу…!

…что-то не получилось – спрашивайте…

Финал:

В общем, нынче сделано много! …и время не потрачено зря: навыки работы с всевозможными подключениями AJAX очень полезны – и вам же теперь, для каких-то следующих аякс-решений, уже не придётся снова много учиться… и проделывать массу такой осторожной и огромной работы.

Не забывайте подписываться !! впереди ещё много вкуснейшей работы.

Online консультация по настройкам и созданию сайтов на WordPress

!..подписываясь на обновления mihalica.ru —
...расстаёмся с невежеством..!