Вывод связанных записей красиво и без плагина

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

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

В Сети можно найти много подобных описаний и все они по своему заслуживают внимания. Более того, на их примерах можно понять, как это вообще работает и сделать что-то своё. Я бы и не стал делать свой вариант, если-бы предложенные устроили меня на все 100%.

Однако вот не устроили... То связанные записи выводятся не очень привлекательно, то картинки слишком большие, практически в полный рост (зачем это в данном случае?), то заголовок "Связанные записи" выводится даже тогда, когда записей-то таковых и нет вовсе.

Поэтому и взялся я за их доработку.

Итак, хватит лить воду...

Первый вариант:

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

Выглядит он вот так:

Щёлкните по картинке для увеличения...

Для подобного отображения связанных материалов в файл single.php, который находится в папке /wp-content/themes/Ваша_тема вставить следующий код:

<!-- Похожие записи -->
<?php $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, // Сортировка происходит по тегам (меткам)
 'orderby'=>rand, // Добавляем условие сортировки рандом (случайный подбор)
 'caller_get_posts'=>1, // Запрещаем повторение ссылок
 'post__not_in' => array($post->ID),
 'showposts'=>5 // Цифра означает количество выводимых записей
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
echo '<div class="related">';
echo '<h3>Материалы по теме:</h3>';
echo '<ul>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
 ?>
 <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 <?php
 }
 echo '</ul></div>';
 }
 wp_reset_query();
 }
 ?>
<!-- Похожие записи /-->

Этот код лучше всего вставить сразу после статьи... Перед строкой:

<?php comments_template(); ?>

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

Приведу и CSS такого вывода:

/*похожие записи*/
.related {
padding: 10px 10px 4px 10px;
background: url("images/widget.png") repeat-x scroll 0 0 #DDDDDD;
 border: 1px solid #DDDDDD;
 border-radius: 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
 margin-bottom: 10px;
 padding: 10px;
 text-align: left;
}
.related h3 { 
margin-bottom: 2px;
color: #215B9B;
text-shadow: #5DB6FA 0px 1px 1px;
} 
.related a { 
text-decoration: none; 
} 
.related a:hover { 
color: #ff0000; 
text-decoration: none; 
}
/*похожие записи*/

Код стиля вставьте в конец файла style.css, который лежит в той-же папке, что и single.php. Естественно, что стиль Вы можете  изменить под свой шаблон и вкус.

Кстати, если Вы обратили внимание, начало и конец любого кода я отмечаю некими указателями наподобие - <!-- Похожие записи --> ... Кто-то может подумать, что это лишнее. Однако я настоятельно рекомендую использовать подобные указатели-пояснения. Это Вы сейчас помните что именно и для чего вставлено. Где эта вставка начинается, и где заканчивается. Но пройдет месяц - другой... пол-года... и Вы уже не вспомните что это за код такой и для чего он нужен. Тем более, если своих вставок будет несколько.

Ну вот и всё. Первый вариант работает. Строго и сердито - ничего лишнего.

Второй вариант.

Это, собственно, несколько расширенный первый. И выглядит он примерно вот так:

Щелкните по картинке для увеличения...

Согласитесь - уже повеселее!

Для реализации такого вывода связанных записей переходим всё в ту-же папку /wp-content/themes/Ваша_тема и делаем три очень простых шага.

1. В файл functions.php вставляем следующий код:

#  Возвращает ссылку на миниатюру
function catch_that_image() {
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id);
$image_url = $image_url[0];
  if(empty($image_url)) {
    $image_url = "https://obg.kz/wp-content/uploads/2013/obg.png"; // Ссылка на заглушку
  }
return $image_url;
}

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

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

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

2. Правим файл single.php, точно так-же, как и в первом варианте, только вставляем вот этот код:

<!-- Вывод связанных записей -->                        
<?php $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, // Сортировка происходит по тегам (меткам)
 'orderby'=>rand, // Добавляем условие сортировки рандом (случайный подбор)
 'caller_get_posts'=>1, // Запрещаем повторение ссылок
 'post__not_in' => array($post->ID),
 'showposts'=>5 // Цифра означает количество выводимых записей
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
echo '<div>';
echo '<h3>Материалы по теме:</h3>';
echo '<table width="100%" border="0" >';
         while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
            <tr><td>
            <a href="<?php the_permalink() ?>"><img align="left" style="margin-right: 10px; float: left;" src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" width="50"/></a>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
            <br /><?php the_content_rss('', TRUE, '', 24); ?>
            </td></tr>
        <?php
        }
        echo '</table></div>';
    }
 wp_reset_query();
 }
 ?>            
<!-- Вывод связанных записей End -->

Размером картинки можно управлять меняя параметр width="50" в конце 22-й строки кода. Высота будет меняться пропорционально. Поэкспериментируйте для достижения наиболее приемлемого для вас результата. Но на мой взгляд, в данном случае, большие картинки будут выглядеть не совсем к месту.

3. Файл стилей style.css дополняем стилем первого варианта - тут ничего менять не пришлось.

Ну вот и все! Вывод связанных записей красиво и без плагина готов. Выбирайте вариант по своему вкусу.

Удачи Вам и до встречи на моём блоге!

Материалы по теме:

Визуальный редактор комментариев

Форматирование комментариев WordPress, часть первая

Минимальный набор плагинов для WordPress

Плагин ARK WYSIWYG Comment Editor – визуальный редактор комментариев

Улучшенная форма обратной связи без плагина

Форма обратной связи без плагина