WordPress: похожие записи в конце статьи

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

WordPress: похожие записи по тегам

В мире WordPress существует концепция таксономии: теги, категории и т.д. Мы используем их для связывания постов с общими тегами, что позволяет выводить записи с похожими тегами. Ниже приведённый код разместите в файле single.php после вывода контента статьи для отображения похожих записей по тегам.

<div class="sections_related_posts">
   <?php $orig_post = $post;
      global $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),
      'posts_per_page'=>4, // Количество похожих записей.
      'caller_get_posts'=>1
      );
      $my_query = new wp_query( $args );
      if( $my_query->have_posts() ) {

      echo '<h3 class="title_related">Еще по теме...</h3><div class="wrap_related_posts">';
      while( $my_query->have_posts() ) {
      $my_query->the_post(); ?>
           <div class="item_related_post">
                  <div class="related_img"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
                  <a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
           </div>
                <? }
      echo '</div>';
      }
      }
      $post = $orig_post;
      wp_reset_query(); ?>
</div>

WordPress: похожие записи по категориям

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

<div class="sections_related_posts">
    <?php $orig_post = $post;
        global $post;
        $categories = get_the_category($post->ID);
        if ($categories) {
        $category_ids = array();
        foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

        $args=array(
        'category__in' => $category_ids,
        'post__not_in' => array($post->ID),
        'posts_per_page'=> 4, // Количество похожих записей.
        'caller_get_posts'=>1
        );
        $my_query = new wp_query( $args );
        if( $my_query->have_posts() ) {
        echo '<h3 class="title_related">Еще по теме...</h3><div class="wrap_related_posts">';
        while( $my_query->have_posts() ) {
        $my_query->the_post();?>
                <div class="item_related_post">
                        <div class="related_img"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
                        <a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                </div>
                <?
        }
        echo '</div>';
        }
        }
        $post = $orig_post;
        wp_reset_query(); ?>
</div>

Стили.

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

.sections_related_posts {
    margin-top: 60px;
    clear: both;
}

.title_related {
    margin-bottom: 1.5rem;
}

.wrap_related_posts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.item_related_post {
    margin-bottom: 20px;
}

.related_img a {
    line-height: 0;
}

.related_img img {
    border-radius: 5px;
}

@media (max-width: 850px) {
    .wrap_related_posts {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 481px) {
    .wrap_related_posts {
        grid-template-columns: repeat(1, 1fr);
    }
}
12 комментариев
    1. Можете указать этот параметр «размер миниатюры» в стилях он все равно задан другой.

    2. Daniil, В скобках можно написать что угодно. Главное что бы это что угодно было прописано в функциях темы (файл functions.php). Например:

      /*------------------------------------*/ /* Post Thumbnail Support /*-----------------------------------------*/ add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 220, 162, true ); add_image_size( 'featured', 220, 162, true ); //Latest posts thumb add_image_size( 'carousel', 140, 130, true ); //Bottom featured thumb add_image_size( 'bigthumb', 620, 315, true ); //Big thumb for featured area add_image_size( 'mediumthumb', 300, 200, true ); //Medium thumb for featured area add_image_size( 'smallthumb', 140, 100, true ); //Small thumb for featured area add_image_size( 'widgetthumb', 60, 57, true ); //widget

      Поставив в скобки 'bigthumb' миниатюра примет размеры 620px на 315px и т.д.

      1. PH, такой код будет дублировать изображения, что со временем образует большой вес.

      2. WordSmall, Спасибо. Учту это. Удалю неиспользуемые дубли. Без дублей все равно не обойтись, т.к на главной использую три размера одной миниатюры.

  1. А как сделать чтобы похожие записи показывались в странице вложения???

    Например сайт.ру/какая-то-запись РАБОТАЕТ

    а на здесь сайт.ру/какая-то-запись/продолжение НЕ РАБОТАЕТ

    1. Narman, За вложения отвечает файл attachment.php, но на нем не будет выводится похожие записи ни по тегам ни по категориям, так как он к ним не относится. Разве что вывести просто последние публикации блога.

      1. WordSmall, А можно везде одну категорию вывести? Например чтобы все похожие записи были везде с 16 категории?

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *