Порой необходимо скрыть ссылки или блоки (например вывод последних новостей, меню с кучей полезных ссылок и т.п.), чтобы в браузере пользователя были видны все блоки, а поисковик видел чистый код без примесей лишней информации. В данном случае есть несколько способов, расскажу про те, которые я тестировал и использовал на разных сайтах на WordPress.
Скрытие блоков
Самый первый и простой способ, который мной был тестирован несколько лет назад - это просто оборачивание блока в JS-вывод. Например:
|
1 |
document.write('<div class="info">Какая-то информация</div>'); |
Такой способ прост, но в данном случае информация остаётся на странице, хоть и завёрнутая в блок script. Раньше поисковики не учитывали подобные js-блоки, но теперь они вполне способны это переварить, что нас может весьма не устраивать 🙂
Другой способ посложнее - выводить блок с помощью AJAX-вставки. В данном случае нам нужно будет вызывать сторонний скрипт, получать от него информацию и выводить уже на стороне пользователя.
Основная часть - это вывод самого блока. Рекомендую сделать один скрипт, который будет делать вывод блока, в зависимости от того, какой мы его попросим. Например через $_POST-запрос отправлять переменную с названием блока.
В самом выводе есть два варианта. Первый - когда блок у вас статичен и не меняется. Тут всё просто, забиваем его в в скрипт вывода. Выглядеть будет примерно так:
|
1 2 3 4 5 |
if(isset($_POST['act'])){ if($_POST['act']=='block_info'){ ?> <div>Какая-то информация</div> <?php } } |
В другом случае - блок динамический (например те же последние новости/записи). В этом случае нам нужно будет подсоединить к нашему скрипту ещё и сам движок WP. Делается это просто, необходимо подсоединить файл wp-config.php, а он за собой уже подтянет весь движок. Блок для вывода последних постов будет так:
|
1 2 3 4 5 6 7 8 9 10 11 |
if(isset($_POST['act'])){ if($_POST['act']=='block_info'){ ?> include('../wp-config.php'); <div class="title">Последние статьи</div> <?php $the_query = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => 5, 'order' => 'DESC' ) ); while ($the_query->have_posts()) : $the_query->the_post(); ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php endwhile; wp_reset_query(); ?> <?php } } |
Но у данного подключения движка есть один минус, если у вас много посетителей и вы используете плагин кеширования, то плагин не будет кешировать эти данные, поэтому придётся придумать своё кеширование, чтобы избежать черезмерной нагрузки.
Теперь необходимо это закинуть куда-нибудь на сайт, например в папку "ajax" в корень сайта, а сам файл назвать output.php.
Теперь приступим к выводу на стороне пользователя. Здесь мы просто должны сделать $_POST-запрос с названием нужного нам блока. Например так:
|
1 2 3 4 5 6 7 8 9 |
$.ajax({ type: "POST", url: "/ajax/output.php", data: {act:'block_info'}, dataType : "text", success: function(msg){ $('#block_info').html(msg); } }); |
Перед этим надо не забыть вывести блок, куда собственно будет подставлять информация после AJAX-запроса:
|
1 |
<div id="block_info"></div> |
Скрытие ссылок
Тут можно поступить так же, как и с блоками: самый простой - просто обернуть в JS, посложнее - AJAX, но тут для каждой ссылки нужно будет задавать своё название.
Есть и третий вариант, он пригодится в том случае, когда на странице уже есть наша ссылка, но мы хотим, чтобы по этой ссылке пользователь переходил, если бы кликнул по другому блоку. Приведу простой пример:
|
1 2 3 4 |
<div> <a href="http://www.example.net/post.html"><img src="http://www.example.net/wp-content/uploads/2014/01/img.png" alt="Миниатюра поста" /></a> <div class="post-info"><a href="http://www.example.net/post.html">Заголовок поста</a></div> </div> |
В данном случае у нас дубль ссылки, на заголовке и на изображении. Хорошо бы избавиться от одной ссылки. В этом случае нам поможет событие onclick, с помощью которого мы и будем перенаправлять на нужную ссылку, но сперва нам нужно как-то подцепится к донору ссылки. Донора и приемника ссылки мы будем определять через классы. После изменения кода, выглядеть это будет так:
|
1 2 3 4 |
<div> <img src="http://www.example.net/wp-content/uploads/2014/01/img.png" alt="Миниатюра поста" class="replace donor" /> <div class="post-info"><a href="http://www.example.net/post.html" class="donor">Заголовок поста</a></div> </div> |
Как мы видим, здесь добавились классы, класс "replace" указывает, кто будет принимать ссылку, а по классу "donor" мы будем определять пару для поиска. Поиск и подстановка события onclick через JS выглядит так:
|
1 2 3 4 5 6 |
$(document).ready(function(){ $('.replace').live('click', function() { var strClass="a."+$(this).attr('class').replace("replace ", ""); document.location.assign($(strClass).attr('href')); }); }); |
В итоге мы получим нормальную ссылку с анкором, а так же изображение, при клике на которое будет происходить переход по этой ссылке.
Есть и четвёртый вариант. В данном случае мы не будем указывать явно ссылку, а зададим её через сторонний атрибут "date-loc" и заменим слеши на пробелы, т.е. было так:
|
1 |
<a href="/category/podcategory">Текст ссылки</a> |
стало:
|
1 |
<div date-loc="category podcategory" class="new_location">Текст ссылки</div> |
Теперь осталось через JS задать действие для перехода, для всех ссылок, которым мы указали класс "new_location":
|
1 2 3 |
$('.new_location').live('click', function() { document.location.assign("/" + $(this).attr("date-loc").split(" ").join("/")); }); |
Таким образом будут обратно подставляться слеши и делаться переход при клике.
Какой вариант лучше, выбирайте сами 🙂 Так же не забывайте, что для исправной работы всех представленных выше кодов, вам понадобится подключённая библиотека JQuery.