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

Кратко

Коротко: есть два быстрых пути — плагин (быстро, без кода) или правка темы + шаблон YARPP (гибко, требует навыков). В статье — пошагово, пример шаблона PHP, альтернативы, чек-листы и сниппеты для стилей и совместимости.

Введение

Вопрос: «Как встроить блок похожих записей с миниатюрами, как на этом сайте?» — распространён среди владельцев блогов. Многие блоги показывают миниатюры в разделе «Похожие записи», и в WordPress это можно реализовать несколькими способами: плагин, шаблон YARPP, или собственный код (WP_Query). Ниже — подробная инструкция, рекомендации и примеры.

Использование плагина (быстрый способ)

Самый лёгкий путь — использовать плагин без правки кода. Один из примеров — LinkWithin: он не хранит миниатюры на вашем сервере и требует минимальных настроек.

Перейдите на страницу сервиса LinkWithin и заполните форму на главной.

Форма настройки LinkWithin для генерации виджета похожих записей

Нажмите Get Widget и скачайте плагин.
Установите и активируйте плагин в WordPress. После активации блок с миниатюрами появится автоматически.

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

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

Когда использовать плагин

Нужен быстрый результат без кода.
У вас нет доступа к файлам темы или кода.
Не критичны точные правила отбора постов и дизайн.

Ручная правка файлов темы (полная кастомизация)

Для полного контроля лучше добавить логику в тему. Понадобятся базовые навыки PHP и работы с темой WordPress.

Включите поддержку миниатюр постов (thumbnail) в файле functions.php темы (требования: WP 2.9+):

// Пример в functions.php
if ( function_exists('add_theme_support') ) {
  add_theme_support('post-thumbnails');
}

Установите и активируйте плагин Yet Another Related Posts (YARPP). Преимущество YARPP — система шаблонов, которые можно отредактировать.
В папке плагина найдите папку yarpp-templates и скопируйте файл yarpp-template-thumbnail.php в папку вашей темы.
В настройках YARPP:

Отключите автоматическое отображение связанных записей (Automatically displayed related posts).
Укажите количество записей для показа.
В выпадающем списке шаблонов выберите yarpp-template-thumbnail.php.

Настройки YARPP — выбор шаблона и количество результатов

Откройте скопированный файл yarpp-template-thumbnail.php и замените его содержимое на пример ниже (минимальный безопасный шаблон). Этот шаблон использует стандартные WP-функции для вывода миниатюр и ссылки на пост.

';
    echo 'Похожие записи';
    echo '';
    foreach ($related_posts as $post) :
      setup_postdata($post);
      $permalink = esc_url(get_permalink($post->ID));
      $title = esc_html(get_the_title($post->ID));
      $thumb = get_the_post_thumbnail($post->ID, 'thumbnail');
      // Если миниатюры нет, можно показать заглушку
      if (empty($thumb)) {
        $thumb = '';
      }
      echo '';
      echo '' . $thumb . '';
      echo '' . $title . '';
      echo '';
    endforeach;
    wp_reset_postdata();
    echo '';
    echo '

';
  endif;
endif;
?>

Пояснения к коду:

get_the_post_thumbnail выводит зарегистрированные миниатюры; параметр ‘thumbnail’ — зарегистрированный размер.
Если миниатюры нет, шаблон подставляет изображение-заглушку из папки темы.
Поместите CSS для .yarpp-related, .yarpp-thumb и .yarpp-title в файл стилей темы.

CSS-пример для стилизации

.yarpp-related { margin-top: 30px; }
.yarpp-list { list-style: none; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.yarpp-item { width: 150px; }
.yarpp-thumb img { width: 150px; height: 84px; object-fit: cover; display:block; }
.yarpp-title { display:block; margin-top:6px; font-size:14px; color:#333; text-decoration:none; }

Альтернативные подходы

Использовать WP_Query и собственную логику (по меткам, категориям, контенту) — полный контроль, но нужно реализовать алгоритм ранжирования.
Jetpack Related Posts — облачный сервис Jetpack, не хранит миниатюры локально, простая интеграция.
Плагин Contextual Related Posts — позволяет кэшировать миниатюры и предоставляет фильтры для кастомизации.

Когда решения дают сбой и подводные камни

Автоматические плагины могут выбирать неинформативные картинки (логотипы, декоративные изображения). Рекомендация: вручную задать миниатюру для ключевых постов.
Если тема не поддерживает пост-миниатюры, get_the_post_thumbnail вернёт пусто — не забудьте add_theme_support.
Кэширование и CDN могут мешать моментальной смене миниатюр; очищайте кэш после правок.
Многие плагины создают дополнительные запросы к базе — проверяйте производительность на больших сайтах.

Как выбрать подход (мини-методология)

Оцените навыки: без кода — выбирайте плагин. С навыками — шаблон YARPP или свой WP_Query.
Оцените требования к дизайну: нужен ли точный контроль размера/положения? Если да — правьте тему.
Оцените нагрузку: важна ли производительность? Если да — используйте кэширование и уменьшите число запросов.
Тест: проверяйте на тестовом сайте перед запуском на боевом.

Чек-листы по ролям

Для разработчика

Включена поддержка post-thumbnails в functions.php.
Скопирован и адаптирован шаблон YARPP в тему.
Реализована заглушка для отсутствующей миниатюры.
Добавлен CSS и тест на разных разрешениях.
Протестировано с кэшем и CDN.

Для редактора контента

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

Для владельца сайта

Решить: внешний сервис (LinkWithin/Jetpack) или локальный шаблон.
Рассмотреть вопросы конфиденциальности и соответствия локальным правилам хранения изображений.

Сниппеты и полезные настройки (cheat sheet)

Принудительно регистрируем новый размер миниатюр:

add_image_size('related-thumb', 150, 84, true); // crop
// Использовать: get_the_post_thumbnail($post->ID, 'related-thumb')

Фильтр для замены шаблона YARPP через functions.php:

add_filter('yarpp_template', function($template) {
  return get_stylesheet_directory() . '/yarpp-template-thumbnail.php';
});

Совместимость и миграция

YARPP совместим с современными версиями WP, но всегда проверяйте совместимость плагина с вашей версией.
Перед миграцией темы: сохраните копию оригинального шаблона и сделайте бэкап базы данных.
Если используете сторонний сервис, убедитесь, что он доступен в вашей стране и соблюдает требования хранения данных.

Краткий словарь терминов

Миниатюра: изображение, назначенное как пост-тумбнейл (post thumbnail).
YARPP: плагин Yet Another Related Posts — ищет похожие записи и может выводить шаблоны.

Итог

Плагин = быстро и без кода; правка темы + YARPP = гибкость и контроль. Для большинства сайтов разумный вариант — собрать шаблон в теме (как показано выше), добавить стиль и обеспечить заглушки. Не забудьте тестировать производительность и корректность подборки.

Ключевые действия: включить post-thumbnails, скопировать шаблон YARPP, адаптировать HTML/CSS, протестировать.

Примечание: если вы хотите, могу подготовить готовый файл yarpp-template-thumbnail.php, стили и инструкции по внедрению прямо под вашу тему — укажите версию WordPress и название темы.