Похожие записи в статьях на блоге WordPress без плагина

Автор: | Рубрика: Блог на Wordpress | Обновлено: 2015-03-14 | Создано:
Просмотров: 2236
код вывода похожих записей на блоге без плагина

Здравствуйте, уважаемые читатели!

Сегодня я Вам покажу, как просто вывести похожие записи с миниатюрами (картинками) без плагина. Ранее я в одной из статей показывала, как настроить вывод похожих записей с картинками плагином http://inetsovety.ru/kak-vvesti-pohozhie-zapisi-s-kartinkami/ Если Вы панически боитесь редактировать файлы шаблона, такой способ реализации вывода постов по теме, как плагин, Вам поможет. Хотя мне не совсем нравится оформления блока похожих записей, которая есть у плагина. Когда вывод задается кодом, можно настроить их дизайн на свой вкус.

Пример блока похожих записей Вы можете посмотреть на моем блоге. Сразу под статьей под блоком поделиться в социальных сетях выводятся 4 картинки со ссылками на другие статьи из этой категории.

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

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

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

В Вашем шаблоне должны быть включены миниатюры. Ну и соответственно картинки миниатюр должны быть загружены ко всем записям на сайте. Если картинок не будет, то будут отображаться пустые квадратики. Я на своем блоге для каждого поста загружаю картинку-миниатюру размером 200*200. Стараюсь загружать квадратные изображения по размеру варьирующиеся в пределах 20 пикселей от значения 200*200. В противном случае, большая картинка будет не красиво обрезаться.

На странице добавления записи в правой колонке должен быть вот такой блок:

миниатюра в статье

Если его нет, почитайте следующую инструкцию, как подключить вывод миниатюр в статьях http://inetsovety.ru/kak-ustanovity-miniatyuru-na-blog-wordpress/

Еще один важный момент. Отключите обрезание картинок-миниатюр до указанного в настройках движка размеров. Посмотрите на следующей картинке, куда зайти в админке, чтобы сделать это:

задать размер миниатюры

Теперь приступим непосредственно к добавлению кодов вывода похожих записей в файлы. Первый код вывода похожих записей мы добавим в файл single.php. Если Вы ранее не производили никаких манипуляций с этим файлом (не добавляли кнопок соцсетей, рекламных кодов), в этом случае найдите в файле single.php код <?php the_content (); ?>. Именно он отвечает за вывод текста поста. Смотрите на картинке, где он находится в моем шаблоне.

куда добавлять код похожих записей

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

<!-- Похожие записи -->  
<div id="interestpost">
<h3>Статьи по теме</h3>
 <?php
$categories = get_the_category($post->ID);
if ($categories) {
 $category_ids = array();
 foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
 $args=array(
 'tag__in' => $tag_ids, 
 'post__not_in' => array($post->ID),
 'showposts'=>6,  //количество выводимых анонсов
 'orderby'=>rand, 
 'caller_get_posts'=>1); 
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
 echo '<ul>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
?>
<li><div id="postcell"><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a></span><br>
<span><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span></div></li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?>
</div>

В этом коде Вы можете поменять количество выводимых в блоке анонсов, напротив этой строки стоит комментарий.  Сейчас там стоит значение 6.

Следующий код стилей добавьте в файл style.css, можно в самый конец.

/*------------------- стили похожих записей ------------------*/
#interestpost{
 margin: 8px 0;   
 float: left;     
 width: 100%;  
}
#interestpost ul {
 margin-left: 5px;  
 width: 600px;  /* Общая ширина блока без учета отступов от краев страницы */
}
#interestpost li {
 list-style: none; 
}
#postcell{
 height: 230px;  /* Высота ячейки  */
 box-shadow: #D1F7DB 0px 1px 2px, #D1F7DB 0 0 2px inset;  /* Тень для ячеек. Цвет D1F7DB */
 float: left;   
 list-style: none; 
 margin: 4px;  
 padding: 2px; 
 text-align: center; 
 font-size: 16px; /* Размер шрифта у ссылок */
 width: 156px;  
 overflow: hidden;  
 border: #D1F7DB solid 1px; /* Рамка вокруг ячейки цветом D1F7DB */
 border-radius: 5px; /* Закругленные края ячейки */
}
#postcell a:hover {
 color: #077C1A;  /* Цвет ссылки при наведении*/
 text-decoration:none; /* Ссылка без подчеркивания */
}
#postcell a{
 color: #000000; /* Цвет ссылки */
 text-decoration:none; /* Ссылка без подчеркивания */
}
#interestpost li :hover{
 background-color: #CDE1D0; /* Фон ячейки при наведении */
}

Цвета рамки и тени ячеек, а также текста ссылок, можете менять по своему усмотрению.

Вот так можно вывести похожие записи по категориям с миниатюрами без использования плагина. Добавляйте код в шаблон своей темы и улучшайте поведенческие факторы. На этом у меня все. До встречи!

С уважением, Виктория – блог inetsovety.ru

Поделиться ссылкой на пост в соц. сетях
Получать уведомления о новых статьях на e-mail
Комментариев: 14 к статье "Похожие записи в статьях на блоге WordPress без плагина"
  • Руслан 2015-11-17 в 12:02

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

    Ответить
  • Константин Кислов 2015-03-16 в 09:13

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

    Ответить
    • Виталий Охрименко 2015-05-31 в 19:34

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

      Ответить
    • Ната Дегтярева 2016-04-26 в 17:04

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

      Ответить
  • Игорь 2015-01-08 в 22:33

    Пошел тестировать данный скрипт.
    Хочу минимизировать плагины на блоге.

    Ответить
    • Руслан 2015-11-17 в 12:04

      Правильно! На блоге должно быть минимум плагинов. Ведь от скорости загрузки тоже зависит в выдаче поисковиков

      Ответить
  • Александр 2014-12-30 в 22:29

    Не было ли раньше проблем с этим кодом? Например после обновления вордпресс не слетает? Просто бывает иногда коды слетают в отличии от плагинов, но опять же не все. У меня даже после обновления версии движка бывало и плагины переставали работать

    Ответить
    • Виталий Охрименко 2015-05-31 в 19:36

      Я сейчас вспоминаю историю со смайликами после последнего обновления. Неприкольно когда так происходит, хоть wordpress не обновляй. Хотя это тоже не дело

      Ответить
  • Александр 2014-12-30 в 22:28

    Виктория, а эти похожие записи будут иметь такой же внешний вид как у вас на блоге?
    Хочу сделать себе такие, но вот ранее как то больше склонялся к плагинам, почитал ваш пост и забыл а теперь посмотрел и решил что стоит лучше сделать кодом, зачем лишние плагины ставить

    Ответить
  • Рашида 2014-12-14 в 16:01

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

    Ответить
    • Алексей Щукин 2014-12-29 в 21:40

      Попробую и я кодом сделать. Только сначала протестить надо.
      Вдруг что-то не получится, так хоть сохраню работоспособность блога.
      Но идея, действительно интересная. 🙄

      Ответить
  • Диана 2014-11-16 в 14:43

    Вот такая штукенция у меня тоже стоит, без плагина. А вот по поводу миниатюры, Виктория объясните, пожалуйста. Я задам миниатюру и она высветиться и в статье тоже…а как сделать, чтобы в статье она не отображалась? Пусть мигает только вот в похожих записях под статьей. Или это невозможно?

    Ответить
    • Виктория 2014-11-16 в 18:15

      Мне отключать вывод миниатюры в посте не приходилось ранее. Попробуйте удалить код вывода миниатюры на странице поста в файле single.php. Посмотрите, будет работать или нет.

      Ответить
  • Александр 2014-10-30 в 14:10

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

    Ответить
Оставить комментарий
Нажмите, чтобы отменить ответ.

Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!