Як додати блок "Схожі записи" на WordPress сайт

Відображення списку "Схожих записів" Наприкінці кожної статті - це хороший спосіб зробити читання вашого блогу комфортним и зручним. У цьому уроці я розповім, як додати цю можливість, адже зазвичай у безкоштовних WordPress-темах ця функціональність не передбачена.

Звичайно, у мережі ви зможете знайти масу сторонніх плагінів, які додадуть цю можливість, але більшість з них не мали тієї гнучкості, яка мені була потрібна. Тому я поділюся з вами цим прикладом, який використовую сам. В кінцевому результаті ми отримаємо блок з виведенням заданої кількості схожих записів з мініатюрами.

Примітка: у цьому прикладі записи вважатимуться схожими, якщо вони збігаються мітки.

Крок 1. Відредагуйте functions.php

Перш за все відкрийте файл functions.php у папці вашої поточної теми та додайте ці два рядки з кодом:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 196, 110, true );

Ви можете змінити 196 и 110 на будь-яке інше значення ширини та висоти на свій розсуд. Збережіть файл і завантажте його назад на сервер. Цей фрагмент коду додає можливість використовувати мініатюри запису заданого розміру.

Просто відкрийте будь-який зі своїх записів у режимі редагування та задайте їй мініатюру праворуч на бічній колонці. Ця мініатюра також виводитиметься в блоці з іншими схожими записами.

Крок 2. Відредагуйте single.php

Тепер відкрийте файл single.php. Додавання коду до цього файлу вносить зміни до структури зовнішнього вигляду кожного запису на сайті.

Додайте цей код у будь-який рядок файлу 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,
'post__not_in' => array($post->ID),
'showposts'=>4,  // Количество похожих записей для отображения.
'caller_get_posts'=>1
);

$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Похожие записи</h3><ul>';
while ($my_query->have_posts()) {
$my_query->the_post();
?>

<?php
if ( has_post_thumbnail() ) { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?><?php the_title(); ?></a></div></li>
<?php } else { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>
<?php }
?>

<?php
}
echo '</ul>';
}
}
$post = $backup;
wp_reset_query();
?>

Змініть значення 4 у 10-му рядку коду за бажанням, якщо хочете виводити іншу кількість схожих записів у блоці.

Якщо ви не використовуєте мініатюри записів

Якщо з якоїсь причини ви не використовуєте або не бажаєте використовувати мініатюри записівможна зробити так, щоб у блоці схожих записів виводилися стандартні зображення мініатюр.

У цьому випадку замініть ось цей код у рядку 25 вище

<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>

на цей:

<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/post-thumb.jpg" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>

Таким чином, буде використано стандартне зображення мініатюри для кожного запису.

Крок 3. Відредагуйте таблицю стилів style.css

Залишився останній крок. Потрібно застосувати якесь форматування нашого блоку.

Наприклад, ви можете скопіювати цей фрагмент у файл вашої теми style.cssщоб схожі записи виводилися горизонтальною плиткою, а зображення мініатюр були в рамці шириною 5 px.

#relatedposts h3 { font-size: 24px; margin: 10px 0px 20px 0px; font-weight: normal; }
#relatedposts ul { list-style: none; }
#relatedposts ul li { float: left; margin-right: 15px; width: 206px; }
#relatedposts img { border: 1px solid #DDD; background: #F8F8F8; padding: 5px; margin-bottom: 5px; }
#relatedposts a:hover { color: #51B1D3; }

Що в нас вийшло

В результаті в кінці кожного посту ви побачите приблизно такий блок з схожими записами.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/