Перелинковка страниц сайта на примере плагина upPrev (выезжающей панели) для Вордпресс

15 Июнь, 2013

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня хочу рассказать про довольно-таки функциональный и удобный плагин upPrev, который умеет реализовывать сразу несколько видов перелинковки страниц. Его работу вы можете наблюдать (во всяком случае, на момент написания этой статьи) внизу каждой страницы со статьей — справа появляется выплывающая панель со списком похожих материалов.

Плагин умеет выводить не только похожие материалы, но и предыдущие статьи из той же рубрики или архива тегов (это тот самый вариант перелинковки для сайта, который называется кольцо о котором мы говорили подробно в приведенной статье, и практическую реализацию которого я описывал здесь), предыдущие материалы в формате всего блога, а так же публикации, взятые наугад. К тому же все дело это можно сдобрить миниатюрами, если при написании постов вы их создаете.

Какую роль перелинковка играет сейчас в продвижении сайта


Вообще оптимизация сайта, для его дальнейшего успешного продвижения, является задачей номер раз (номер два — это получение обратных ссылок). Внутренние факторы могут заблокировать и снизить влияние всего остального. С другой стороны и перебарщивать с внутренней оптимизацией нельзя (особенно с ключевыми словами в контенте и анкорах внутренних ссылок).

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

Какую схему линковки выбирать? Довольно сложный вопрос, ибо многие из хорошо работающих раньше схем (все тоже пресловутое «кольцо», ссылки на способы реализации которого я приводил чуть выше) уже не дают тех феноменальных результатов, что еще наблюдались десяток лет назад. Поисковики тоже учатся и стараются не учитывать то, что с их точки зрения является явной накруткой.

Перелинковка в виде ряда колец, по теории Пейдранка, должна серьезно увеличивать статический вес страниц сайта (про статический и динамический веса, а так же анкоры ссылок можно почитать здесь), которые в этом кольце задействованы.

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

У перелинковки страниц сайта есть и другая задача, которая направлена уже не на то, чтобы понравиться Яндексу или Гуглу, а на то, чтобы понравиться посетителю. Одной статьи, чтобы он распробовал ваш блог, будет явно недостаточно — нужно обязательно предложить ему пройти еще куда-нибудь, чтобы заинтересовать, задержать и, возможно, сделать его своим подписчиком.

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

Естественно, что вариантов реализации внутренней перелинковки тоже существует масса. Можно даже обойтись без плагинов (пример можно посмотреть в этой статье), но и их для линковки написано немало. Самое трудное — это подобрать идеально работающий именно на вашем блоге вариант.

Сам я перепробовал их массу и о некоторых из них даже написал обзоры (читайте про Yet Another Related Posts Plugin и улучшение статистики посещаемости сайта тут). На самом деле, упомянутый плагин является одним из лучших для вычисления похожих постов и вывода их списка на страницах блога.

Но его данные умеют использовать и другие расширения Вордпресс, оформляя их более красочно или вычурно. В той же статье про YARP я как раз приводил пример использования его данных плагином Related Posts Slider, который позволял выводит похожие посты в виде слайдера такого вида:

Ну, или такого:

Сегодняшний наш герой под названием upPrev тоже умеет брать информацию из базы Yet Another Related Posts Plugin и правильно делает, ибо нет нужды каждый раз изобретать велосипед. Давайте, собственно, и перейдем к описанию возможностей этого чуда инженерной мысли.

Варианты линковки при помощи плагина upPrev


Скачать upPrev можно на официальном сайте, где все файлы проверяются на вирусы и прочую мутность. Рейтинг у него там, кстати говоря, весьма не плохой, хотя популярность не шибко большая. Ну, да ладно, главное, чтобы вам понравилось.

Ставится он стандартно. Чем мне нравится Вордпресс, так это постоянством. Его версии четырехлетней давности ничем глобально не отличаются от современных. Да, рюшечек прибавилось, но та статья, что я писал про установку плагинов в WordPress актуальна и по сей день.

Если в двух словах, то распаковываете архив и копируете получившуюся папочку на удаленный хост в директорию /wp-content/plugins, а далее бегом в админку активировать upPrev в разделе «Плагины».

Правда, настройки его живут не в привычном разделе «Параметры», а на вкладке «Внешний вид», что немного странно:

На первой вкладке с настройками вы задаете тип этой панели — будет ли она выезжающей или же постепенно проявляющейся (мне первый вариант приглянулся). Можно выбрать и сторону экрана, к которой эта панель будет прижата при появлении. Далее задаете внешние отступы этой панели от края экрана снизу и справа (или слева, если выберите другой вариант показа).

Так же в настройках можно легко задать ширину выезжающего окна. Далее вы задаете в процентах от высоты страницы ту позицию при прокрутке, по достижении которой данная панелька покажется посетителю. В моем случае это половина длины страницы. Однако, в расположенной чуть ниже форме я указал ID (читайте про селекторы ID и class в CSS тут), при наличии которого в коде страницы первое условие отменяется.

Поясню. ID с названием #comments (если будете указывать class, то соответственно ставьте перед ним точку, а не решетку) у меня всегда предваряет начало комментариев. Если таковых в статье еще не появилось, то этого ID в коде не будет и тогда выполнится первое условие — панелька выскочит после прокрутки половины страницы.

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

Над этим решением я долго не думал, ибо некогда было, поэтому оно не идеально (дельные советы с вашей стороны приветствуются). Но суть этот пример, думаю, поясняет.

Далее вы можете отметить показ заголовка панели для перелинковки и кнопочки позволяющей ее закрыть (крестика в правом верхнем углу). Чуть ниже приведены CSS свойства, в которые вам можно будет прямо здесь вносить изменения, однако, тут без общих познаний в стилях оформления никак не обойтись (советую ознакомиться с материалами рубрики CSS уроки мастерства).

Я стили эти не трогал, ибо пошел другим путем (не самым прямым), который опишу ниже по тексту. За сим переходим на вторую вкладку:

Выбираем количество постов, на которые данный плагин будет формировать ссылки. А вот чуть ниже, мы как раз и выбираем тип перелинковки для нашего сайта. У меня выбран вариант похожих постов с использованием базы плагина Yet Another Related Posts Plugin (он должен быть предварительно установлен), но вы можете настроить линковку типа «кольца», выбрав второй или третий вариант, а так же перелинковку в виде большого кольца, выбрав первый.

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

Третья вкладка служит для настройки отслеживания числа кликов по ссылкам в этой панели, чем я не стал пользоваться. Однако, на четвертой вкладке кэш я все же активировал. На пятой вкладке я запретил показ панели на мобильниках, но не возразил против ее выезда на планшетах:

Ну, и все, настройки upPrev на этом завершил, но внешний вид панели я уже изменял в настройках плагина Yet Another Related Posts Plugin.

Настройка внешнего вида содержимого выезжающей панели


Там я выбрал файл шаблона, который будет отвечать за вывода похожих постов (суть и специфику работы с этим расширением посмотрите про приведенной чуть выше ссылке):

Т.о. теперь за внешний вид списка похожих постов, выводимых плагином upPrev (в выезжающей панели) отвечает код, который прописан у меня в файле yarpp-template-list.php из папки с моей темой (читайте про хитрое и умное устройство тем и шаблонов в Вордпресс здесь). Если ваш блог формирует миниатюры к постам, то имеет смысл выбирать шаблон из арсенала Yet Another Related Posts Plugin с их поддержкой.

Код у этого файла такой:

<div class="oyy">Это не реклама, а похожие статьи с этого же сайта (ссылки открываются в новом окне):</div>
<ul class="lampochka">
<?php if ($related_query->have_posts()):
	$postsArray = array();
	while ($related_query->have_posts()) : $related_query->the_post();
		$postsArray[] = '<li class="eto"><a class="oy" target="_blank" href="'.get_permalink().'">'.get_the_title().'</a></li>';
	endwhile;

echo implode(' '."\n",$postsArray); // print out a list of the related items, separated by commas
else:?>
</ul>
<p>No related posts.</p>
<?php endif; ?>

Как видите, именно там живет заголовок выезжающей панельки, поэтому нужно будет преобразовать (при необходимости) этот файл в кодировку UTF-8 без BOM во избежании кракозябр (здесь про кодировки подробнее написано). Не знаю как у вас, а у меня уже довольно долго живет в качестве основного редактора Notepad++ (тут его обзорчик можно посмотреть) и в нем это преобразование делается так:

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

a.oy {color: #333;font:700 1.2em/1  "PT Sans Narrow", Arial, sans-serif;line-height:18px;}
li.eto {text-align:center;padding:12px 5px 17px 5px;margin: 5px 0;border: dotted 2px #ccc;}
li.eto:hover {text-decoration:underline;}
div.oyy {margin:0 0 0 0;padding:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial;color:#666;}

Класс lampochka добавляет зеленые галочки, которые в Css коде задаются у меня с помощью base64 кода (где-то я этот код скопировал). Если интересно, то гляньте в моем style.css. Ну, вот и все. Если что-то забыл, то спрашивайте. Правда, настраивал я этот вариант перелинковки месяц назад и уже что-то из головы за это время улетучилось.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Плагины для WordPress

Комментарии и отзывы

Ваня

Ну наконец-то! Полезная статьядля вебмастера! Дмитрий как у вас дела с возвращением сайта в выдачу?

Светлана

Статью Вашу прочесть проблематично, нельзя убрать эту выехавшую панель:(

Дмитрий

Светлана: а Вы с какого устройства читаете? Есть или крестик у панели в правом верхнем углу? Спасибо.

Ваня: пока никаких подвижек.

Alex

У меня в Опере панель выплывает , назад не «заплывает» , кнопока для закрытия скрываеся вверху, я читаю в маштабе 150%, и только если уменошить размер шрифта меньше 80% тогда виден крестик но читать статью с таким шрифтом очень неудобно.

Valeron

Читал пост с нетбука, панелька выплыла по середине текста и усе, нифига не видно))

Дмитрий

Alex: кнопку закрытия перенес вниз и сделал ее побольше.

Valeron: поставил 90% в настройках, надеюсь, что это поможет решить проблемы

Спасибо.

Александр

Дмитрий, напомните пожалуйста, какой плагин у вас так красиво выводит связанные посты в конце каждой статьи?

Светлана

Дмитрий, с появлением крестика внизу проблема отпала! 🙂

Дмитрий

Светлана: спасибо.

Александр: это не плагин, а набор функций. В начале этой публикации приведена ссылка на статью, где я подробно об этом деле рассказывал.

Алексей

У вас хлебные крошки бомбезные! Как такие сделать?))

Дмитрий

Алексей: ну, в следующем посте о них напишу. Спасибо, что напомнили.

Koktev

Дмитрий, как всегда полезная статья для авторов блогов. Скажите, я не увидел ссылки на главную страницу в статье? Какова ваша теория на этот счет в плане перелинковки.

Удачи в борьбе с фильтрами, ваш блог один из лучших.

Дмитрий

Дмитрий, а почему Вы в данной статье практически все ссылки даете с анкором «здесь», «тут», «этой»? Это из-за наложенных фильтров? Тогда смысл все равно не пойму — объясните пожалуйста. Спасибо.

Эльдар

Здравствуйте, а есть ли такой аналогичный плагин для Joomla. Если знаете такой, скажите пожалуйста, уже столько его ищу.

Александр

Доброго дня Дмитрий!

Благодарю за хорошие идеи. А для joomla, что можете предложить?

Светлана

У меня стоит не этот плагин, а подобный. Я считаю его просто необходимым и полезным. Хотя и не всегда удачно им пользуюсь ( к стыду своему).

Алексей

Здравствуйте Дмитрий, скажите http://ktonanovenkogo.ru это ваш первый? единственный? проэкт.

Андрей

Дмитрий, извините за офтоп, но решил Вас спросить насчет validator.w3.org в котором Ваш блог нельзя проверить.

После проверки появляется вот такое сообщение(гуглоперевод): «Извини! Данный документ не может быть проверен.

К сожалению, я не могу проверить это документ, поскольку в строке 18 она содержала один или более байтов, что я не могу интерпретировать как UTF-8 (другими словами, байты найдены не допустимые значения в указанной кодировке). Пожалуйста, проверьте как содержание файла и указание кодировки символов.

Ошибка: utf8 „\ Xed“ не отображается на Unicode»

Как Вам удалось заблокировать доступ к сайту этому роботу? Поделитесь методом...

Или это действительно ошибка в коде?

Андрей

PS

Да, забыл уточнить что только морда блокируется (http://ktonanovenkogo.ru/), все остальные страницы проходят проверку.

Дмитрий

Андрей: спасибо, все поправил. Там в коде блока Адсенса есть русские символы, а файлик из которого этот код подгружался надо было перевести в кодировку UTF 8 без Bom, что я забыл сделать, а сейчас поправил.

Андрей

Тогда все понятно... а я то уж подумал... ))

Алексей

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

Сергей

А не является ли это окошко попапом, за который непременно последует наказание от поисковиков? Они ведь не разбираются, что в попапе написано — достаточно самого факта его наличия.

MiolaWeb

Спасибо! Давно искала подобный WP плагин и для перелинковки дополнительной, и для удобства посетителей!

Сергей

Дмитрий, еще раз повторю свой вопрос:

«А не является ли это окошко попапом, за который непременно последует наказание от поисковиков? Они ведь не разбираются, что в попапе написано — достаточно самого факта его наличия.»

Дмитрий

Сергей: вопрос интересный, наверное, надо будет у них спросить.

Денис

Отличная статья, спасибо!

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