Похожие записи с миниатюрами без плагина WordPress

Без плагина WordSmall

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

Похожие записи по тегам.

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

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

    echo '<div id="relatedposts"><h3 class="reltopp">Еще по теме...</h3><ul>';

    while( $my_query->have_posts() ) {
    $my_query->the_post(); ?>
    <li><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
    <div class="relatedcontent">
    <h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    </div>
    </li>
    <? }
    echo '</ul></div>';
    }
    }
    $post = $orig_post;
    wp_reset_query(); ?>
        </div>

Похожие записи по категориям.

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

                <div class="postnet">
                            <?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'=> 2, // Количество похожих записей.
    'caller_get_posts'=>1
    );

    $my_query = new wp_query( $args );
    if( $my_query->have_posts() ) {
    echo '<div id="related_posts"><h3 class="reltopp">Еще по теме...</h3><ul>';
    while( $my_query->have_posts() ) {
    $my_query->the_post();?>
    <li><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
    <div class="relatedcontent">
    <h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    </div>
    </li>
    <?
    }
    echo '</ul></div>';
    }
    }
    $post = $orig_post;
    wp_reset_query(); ?></div>

Стили.

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

.postnet {
width: auto;
margin: 0 auto 20px;
font-size: 12px;
height: 250px;
border:4px solid #eee;
}

.postnet li{
float:left;
height:auto;
width:auto;
margin:5px 16px 0 0;
list-style:none;
border-right:;
padding:4px;
display:block;
}

.postnet a{
font:13px arial;
text-decoration:none;
}

h3.reltopp {
font-size: 16px;
margin: 0 0 5px 0;
background:#6EA8FF;
color:#fff;
padding:3px ;
}

.postnet img {
margin: 0 0 3px 0;
padding: 0;
height:70px;
width:70px;

}

.postnet a {
color :#333;
text-decoration: none;
display:block;
padding: 4px;
width: 70px;
}
.postnet li:hover{
background-color:rgba(255, 255, 255, 0.45);
box-shadow: 0 0 6px #A5A5A5;
 }

Результат.

Похожие записи с миниатюрами без плагина WordPress

Вот такой простой способ вывести похожие записи без использования плагина.

Источник: Wpbeginner.com

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 12
  • Daniil

    Я бы заменил the_post_thumbnail (); на the_post_thumbnail ('thumbnail');

    • WordSmall

      Можете указать этот параметр «размер миниатюры» в стилях он все равно задан другой.

    • PH

      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 и т.д.

      • WordSmall

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

      • PH

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

      • WordSmall

        PH, ну почему же. Используйте просто оригинал изображения, подгоняя стилями или сразу делать точный размер. Про дубли: wordsmall.ru/sajtostroeni...v-wordpress.html

  • Narman

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

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

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

    • WordSmall

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

      • Narman

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

  • WordSmall

    Можете вывести последние статьи из определенной категории wordsmall.ru/bez-plagina/...v-wordpress.html

  • Narman

    Спасибо вроде получилось что хотел сделать во вложениях attachment.php

Добавить комментарий
bold quote code