Как вывести список похожих записей на WordPress без плагинов

Разместил / Просмотров: 2 183 / комментарий 31

Здравствуйте, дорогие читатели блога beloweb.ru. Сегодня мы с Вами узнаем как поставить красивый список похожих записей на блоге WordPress без всяких плагинов.

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

Хочу сказать сразу, что здесь ничего сложного нет, бывает даже плагины сложнее настроить чем этот код. А тут мы просто его добавим в нужное место и украсим его с помощью стилей CSS.

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

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

Пример

Пример Вы можете посмотреть у меня на блоге. Он находится ниже всех статей.

PHP код

Для начала нам нужно зайти в админку нашего блога, затем идём в «Внешний вид» потом в «Редактор». Далее находим файл со статьями — «Одна запись (single.php)». Нашли? Отлично.

Теперь нужно найти примерно следующую строчку — <?php the_content(); ?> и после неё добавить следующее:

<!-- Похожие посты-->

<?php
 $backup = $post;
 $tags = wp_get_post_tags($post->ID);
 if ($tags) {
 $tag_ids = array();
 foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

$args=array(
 'tag__in' => $tag_ids,
 'post__not_in' => array($post->ID),
 'showposts'=>6, // Количество вывода похожих статей.
 'caller_get_posts'=>1
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
 echo '<ul class="relatedPosts"><h2><span>Посты по теме</span></h2>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
 ?>
 <li><?php the_post_thumbnail(array()); ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Перейти к записи <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 <?php
 }
 echo '</ul>';
 }
 }
 $post = $backup;
 wp_reset_query();
 ?>

<!--Конец Похожие посты-->

Как это работает?

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

Количество выводимых статей.

В данном коде можно задавать количество показа постов. Чтобы это значение изменить, нужно найти в коде выше вот эту строчку: ‘showposts’=>6, В данном примере выводится 6 похожих постов, это значение Вы, естественно, можете изменять.

Ну а сейчас давайте придадим красивый вид нашим записям.

Стили CSS

Сейчас Вам нужно в админке Вашего блога зайти в «Внешний вид» затем «Редактор» и выбрать Таблица стилей (style.css), потом добавить в него следующее:

/*----------------------------
 популярные посты
------------------------------*/

.relatedPosts {
margin-top:40px;
 height:600px;

}

.relatedPosts h2 {

color:#e35858;
padding: 0px 20px 0px 20px;
margin-left:35px;
border:0px solid #333;
font-weight: 500;
font-size:22px;
margin-bottom:40px;


}

.relatedPosts li {

height:260px;
 float: left;
 padding: 0px;
 border:0px solid #333;
 width:190px;
 margin-right:35px;


}

.relatedPosts a {
 font-weight:500;
 color:#555;

}

.relatedPosts a:hover {
 color:#e35858;

}


.relatedPosts li img {
 width: 185px;
 height: 145px;
 padding: 2px;
 border:1px solid #999;
 background:#fff;
 margin:0 10px 5px 0;


}

Здесь мы задали стили заголовку похожих постов h2, а так же самому списку li, чтобы он корректно отображался на странице.

Миниатюры

В данном примере размер миниатюр стоит 185*145. Это значение Вы можете изменить под себя. Чтобы изменить эти значения, нужно найти вот этот класс .relatedPosts li img и там уже изменить величину отображаемых миниатюр. width: — это ширина, а height: — это высота.

Вот и всё, друзья, теперь мы можем выводить похожие записи без плагинов. :-) Если у Вас возникнут какие либо трудности с установкой или настройкой спрашивайте в комментариях. До скорых встреч.

  • Александр, все отлично, даже у меня получилось).
    Хотелось бы только поменять заголовок «Посты по теме» на «Статьи по теме», как это сделать?

  • Ой, я уже нашла!)
    Спасибо за полезную статью.

  • Ирина, рад, что уже нашли, и извините, что не успел ответить :-)

  • *Ринат* великолепный ))

    Опа вот за это жму руку как раз буду менять дизайн хочу что то похожее зае*енить ))

  • Ринат, очень рад, обязательно делайте :-)

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

  • И еще вопрос, а если я хочу вывести записи просто в столбец без картинок??

  • Evnikian, рад, что Вам понравилось :-)

  • Удалите вот эту строчку < ?php the_post_thumbnail(array()); ?>

  • Одного не пойму… Где? Ну где ваш блог был раньше? Спасибо! Забираю :)

  • Где то здесь был :-)

  • 4idroid

    Если вставить в адаптивный дизайн, то будет адаптироваться под разрешение?

  • Нет, к сожалению

  • Александр, добрый день! Спасибо за статью. Воспользовался вашим решением, но возникли проблемы. Надеюсь на вашу помощь. Как убрать эти черные точки у картинок и сделать их в три ряда, а не в два? http://www.glava-semi.ru/semya/glava-semi-eto-prosto-i-razumno.html

  • Здравствуйте, что то я там не вижу никаких точек

  • Странно, страницы через раз это отображают. Видимо конфликт с чем-то. Вот эти точки в левом нижнем от изображения углу. http://www.glava-semi.ru/novosti/na-zabolevaemost-detej-vliyaet-nedosyp.html

  • Добавьте в стили ul {list-style:none;}

    В два ряда потому что очень узкое место для постов, они просто не влезают в три ряда

  • Витязев Николай

    Александр, а если уменьшить изображения они войдут в три ряда, или в коде надо что-то менять?

    И еще, я вставил в стили элемент который Вы предложили, точки остались. Возможно, это я что-то не так сделал. Куда именно его вставить?

  • Можно уменьшить изображения. Странно но, код должен работать.

  • Николай

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

  • В смысле ужасно? Можно подробнее?

  • Николай

    Дело в том, что они очень размыты и растянуты. В первом комментарии я
    давал ссылку. Это где-то дополнительно надо корректировать?
    А еще я
    обратив внимание, что если в рубрике или теге меньше шести записей, то
    ваш код отображается так
    http://www.glava-semi.ru/zdorove/vse-chto-nuzhno-znat-o-poceluyax.html
    То есть остается пустое пространство под записи. Это нормально?

  • Возможно у Вас слишком маленькие миниатюры. Их нужно просто перезадать в редакторе поста.

  • Николай

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

  • Николай, можно сделать шире само поле контента там где располагаются похожие записи. Или изменить width: вот здесь, сделайте его меньше
    .relatedPosts li img {
    width: 185px;
    height: 145px;
    padding: 2px;
    border:1px solid #999;
    background:#fff;
    margin:0 10px 5px 0;

  • Николай

    Получилось, только я width: менял в этой части
    .relatedPosts li {

    height:260px;
    float: left;
    padding: 0px;
    border:0px solid #333;
    width:150px;
    margin-right:35px;

    Александр, а как можно поменять ширину самого поля контента? Разве шаблон не съедет? Подскажите где этот параметр находится?

  • Может и съедет, в каждом шаблоне по разному, я не могу сказать.

  • Николай

    Александр, я все пытаюсь удалить эти черные точки с левого нижнего угла картинки. Эту строку ul {list-style:none;}которую Вы предложили нужно вставить в какую-то определенную часть кода css или просто в конце? Дело в том, что куда бы я только не вставлял эту строку, точки не исчезают. Можете что-нибудь посоветовать?

  • Попробуйте так ul li {list-style:none;}

  • Почему-то по меткам не сортирует, только по категориям =(
    Если ставить сортировку по меткам, выводит все записи

  • Здравствуйте, Анастасия, тут код изначально написан для вывода постов по меткам, но ни как не по категориям, возможно у Вас стоят какие то плагины