Как создать блок «Похожие записи» с картинками в конце статьи без плагина

  Автор:
  28 комментариев
  12039
Как создать блок "Похожие записи с миниатюрами" в конце статьи без плагина

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

Сегодня, в рамках рубрики «Фишки без плагинов» я расскажу, как Вы можете создать такой же блок без плагина на любом шаблоне WordPress.

Выглядят Похожие записи с картинками так:
Похожие записи с миниатюрой

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

Если в статье нет миниатюры, то в блоке «Похожие записи» отображаться картинка по умолчанию:

repatedposts

Как проверить, поддерживает тема миниатюру или нет

1. Зайдите в админку  и откройте любую запись для редактирования

2. С правой стороны в боковой колонке должен быть виджет «Миниатюра (изображение) записи».
Что такое миниатюра

Если его нет, значит Ваш шаблон не поддерживает функционал миниатюр. Если есть, значит Ваш шаблоне WordPress поддерживает и Вам не нужно добавлять поддержку.

Как добавить поддержку миниатюр в шаблон

Если Ваш шаблон не поддерживает миниатюры, то:

1. зайдите в админку блога — Внешний вид — Редактор
2. Откройте файл для редактирования function.php
3. Вставьте следующий код, можно в самом конце (до закрывающего тега php)

 add_theme_support( 'post-thumbnails' ); 

Код блока «Похожие записи с миниатюрами»

В примере я покажу функцию с автоматическим выводом «Похожих записей» в конце каждой статьи.

function related_posts_with_thumbnails($content)
{ 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, // Количество записей
'ignore_sticky_posts'=>1,
'orderby'=>'rand' // Записи в случайном порядке
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
$related_post = '
<div id="related_posts" class="clear">

<h3>Похожие записи:</h3>


<ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();
$related_post .= '
<li>
<a href="'. get_the_permalink().'" rel="bookmark" title="'. get_the_title().'">
'. get_the_post_thumbnail( $post_id, 'thumbnail' ).'
</a>

<div class="related_content">
<a href="'. get_the_permalink().'" rel="bookmark" title="'.get_the_title().'">'. get_the_title().'</a>
</div>

</li>

';
 }
$related_post .= '</ul>
</div>

';
$content = $content . $related_post; }
return $content; }
wp_reset_query();
}
add_filter('the_content', 'related_posts_with_thumbnails', 1 );

1. Зайдите в админку блога — Внешний вид — Редактор
2. Откройте для редактирования файл function.php
3. Скопируйте код «Похожие записи» выше и вставьте в файл function.php (можно в конце до закрывающего тега php — ?>)
4. Сохраните файл

Стиль блока «Похожие записи с миниатюрами»

Далее необходимо добавить в файл style.css стиль для блока


#related_posts .clear
{clear:both;}
#related_posts ul {
 margin:0;
 overflow:hidden;
}
#related_posts li {
 float: left;
 list-style: none;
 margin: 0 0 0 15px;
}
#related_posts li:first-child {
 margin-left: 0;
}
#related_posts li a {
 display: block;
 font-size: 12px;
 line-height: 16px;
 text-align: left;
 text-decoration:none !important;
 width: 142px;
 }
#related_posts img {
 height: 142px;
 width: 142px;
 }
#related_posts li a:hover {
 text-decoration: underline;
}
.related_content{
 margin-bottom:15px;
}
.related_image {
 width: 142px;
 height: 142px;
 border: 2px solid #DDDDDD;
 margin-bottom:10px;
 background:url(images/default.png);
}

1. Зайдите в админку — Внешний вид — Редактор
2. Откройте файл style.css для редактирования
3. Скопируйте стиль выше и вставьте его в этот файл
4. Сохраните файл

Изменение стилей для блока «Похожие записи с миниатюрой»

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

Данные стили отвечают за:

#related_posts img — стиль картинки (в примере указан только размер)
.related_image — стиль блока с картинкой, а также картинка по умолчанию
#related_posts li a — стиль ссылки
#related_posts li a:hover — стиль ссылки при наведении мышки

В шаблоне AB-Inspiration можно менять стиль отображения изображений на блоге, в том числе и в «Похожие записи», в Настройках шаблона — Настройка статей.

Как задать картинку по умолчанию для блока «Похожие записи»

Вы можете использовать любое изображение для картинки по умолчанию (если нет миниатюры в записи).

1. найдите картинку
2. уменьшите ее до размера миниатюры (в примере это 142/142)
3. загрузите ее через медиафайлы на блоге
4. скопируйте адрес картинки
5. вставьте адрес в стиле .related_image вместо — images/default.png

В шаблоне — конструкторе AB-Inspiration картинка по умолчанию, в качестве миниатюры (изображения) записи, уже загружена в шаблон.

На этом все. Если у Вас еще остались вопросы, не стесняйтесь задавать в комментариях.

 


Создать сайт для заработка с нами — легко и быстро!

За помощью обращайтесь в нашу службу поддержки 24/7

 

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget
Как создать блок «Похожие записи» с картинками в конце статьи без плагина

   3 голоса
Средняя оценка: 5 из 5
Если Вам понравилась статья и Вы нашли её полезной, поделитесь ею в соцсетях! Нажмите на кнопки ниже, чтобы сделать это прямо сейчас.

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик шаблона "AB-Inspiration" для самостоятельной и профессиональной настройки сайтов на WordPress для бизнеса. Основатель клуба "Мастер WordPress" и автор эксклюзивных курсов по WordPress. Фрилансер. Спикер.

Оставьте свой комментарий:

Комментарии на Блог
28 комментариев
  1. Анфиса, спасибо за полезную и подробную статью!

  2. Анфиса! Спосибо за интересную статью. Но я не люблю то, что случайно выходит в «подобных записях». Не всегда это «поъожие записи», поэтому я вывожу «похожие записи» сама в конце статей. Я не пользуюсь этой функцией, заложеной Вами в шаблоне

    • Галина, похожие записи формируются из рубрики. Т.е. если Вы определили несколько статей в одну и ту же рубрику, они будут отображаться друг у друга в конце статьи как «Похожие записи»

  3. Спасибо большое Анфиса за ваш труд и то, что Вы для нас всех делаете. Скажите пожалуйста, а не планируете в следующем обновлении шаблона сделать его шире, потому как самые популярные баннеры рекламы от Adsensae не влазят по ширине в тексте 728×90, вот из-за этого пришлось снять с сайта ваш шаблон и поменять на другой.

    • Сергей, в ближайшее время выходит новая версия шаблона более расширенная, с еще большими возможностями и новым дизайном. Но ширина полезного поля (ширина где статья) будет 640px.

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

    • Согласна с Вами, Сергей. Это дублирование ссылки мне тоже не нравится. Иногда надо сделать ссылку не на всю статью (она может быть не в той же рубрике), а на ее раздел, который как раз на тему статьи. А плагин этого не сделает.

  5. Подскажите, а как можно вывести не похожие статьи, а например вместо 4 записей обычных, 4 рекламных блока.

  6. Мишка

    Добрый день, вы не подскажите, что надо подправить, что бы «похожие записи» появлялись только в конце статьи(записи), а не на каждой странице?) Заранее спасибо.

  7. Настя

    Везде искала подобное решение но получилось сделать только с вашим кодом. Спасибо автору за простое решение и понятное объяснение.

  8. Здравствуйте, очень понравился ваш код, но если его вставляю, пропадает контент на странице о блоге. Можно ли как то исправить?

    • Исправить можно, но нужно сначала знать какая ошибка возникает. На странице должна появиться строчка с ошибкой. Скопируйте ее и вставьте в комментарии. Я посмотрю.

      • К сожалению нет никаких ошибок, просто пустота на странице о блоге %)

        • попробуйте активировать показ ошибок на хостинге в файле config.php. В этом файле есть строчка define(‘WP_DEBUG’, false); . Вместо false напишите true и сохраните файл. Затем снова вставьте код похожих записей и посмотрите на блоге ошибку. Скопируйте строчку с описанием ошибки и вставьте здесь в комментарии. Затем снова верните все на свои места: в config.php пропишите false и удалите код похожих записей. К сожалению без описания ошибки невозможно определить что именно дает сбой.

  9. Вобщем вот:
    Notice: Undefined variable: post_id in /home/l/luppov2h/myaltynaj.ru/public_html/wp-content/themes/iconic-one1/functions.php on line 425 Notice: Undefined variable: post_id in /home/l/luppov2h/myaltynaj.ru/public_html/wp-content/themes/iconic-one1/functions.php on line 425 Notice: Undefined variable: post_id in /home/l/luppov2h/myaltynaj.ru/public_html/wp-content/themes/iconic-one1/functions.php on line 425 Notice: Undefined variable: post_id in /home/l/luppov2h/myaltynaj.ru/public_html/wp-content/themes/iconic-one1/functions.php on line 425

    а это в админке:
    Функция has_cap вызвана с аргументом, который считается устаревшим с версии 2.0! Использование уровней пользователей в плагинах и темах считается устаревшим. Используйте роли и возможности.. in /home/l/luppov2h/myaltynaj.ru/public_html/wp-includes/functions.php on line 3737

    • Максим, это предупреждение, и из-за него не может быть просто белый лист. Я протестировала код с вашим шаблоном iconic-one и похожие записи замечательно отобразились в конце статьи. Единственное, в вашем шаблоне уже активированы миниатюры, значит функцию add_theme_support( ‘post-thumbnails’ ); вставлять не нужно.
      Основной код вывода похожих записей вставить в самом конце файла functions.php . Если после установки кода у вас появляется белый лист вместо блога, здесь причина не в коде похожих записей. Возможно конфликт с плагинами или другими вставками, которые у вас есть в шаблоне. Не видя код сложно что-то конкретное ответить. Но ошибка Notice: Undefined variable: post_id in не является фатальной ошибкой, это просто предупреждение. Нужно искать причину в чем-то другом.

      • Да, похожие записи прекрасно отображаются. Код миниатюр не вставлял, основной код вывода похожих записей вставлял в самом конце файла functions.php. Белый лист появляется не вместо блога, а на статических страницах «О блоге» и «Навигация по сайту». Но все равно спасибо.

        • Максим, ну вы меня заинтиговали. На страницу я даже не обратила внимание. Сегодня проверю.

          • Спасибо Анфиса. У меня еще такая беда. Не могу вставить кнопки соц сетей. Если вставляю их, то они отображаются и в полной новости и в кратких на главной странице. Видимо особенность шаблона этого. Как же можно всавить кнопки?

          • Максим, вижу, что кнопки поделиться хорошо стоят в конце статьи. Или вы хотите куда-то в другое место поставить? Не думали приобрести шаблон AB-Inspiration? В нем уже все эти моменты встроены — кнопки, формы, возможность менять внешний вид, все мета теги прописаны и многое многое другое, что облегчает создание и настройку блога :)

  10. Да с кнопками я разобрался, методом тыка так сказать =) Шаблон покупать смысла нету пока, сайт совсем молодой и если вкладывать деньги, то только в статьи или раскрутку… Мне нравится этот шаблон, он легкий и быстро грузится. Что даст свой плюсик при ранжировании.

  11. Рустам

    Анфиса здравствуйте! Читал статью, но где код для single.php не увидел. Как у всех заработало — ума не приложу. *CRAZY*

  12. Здравствуйте! Анфиса, спасибо вам за код, перепробовала все коды с разных блогов, но именно ваш у меня сработал! *BRAVO* *DANCE*

  13. О, нет…он сработал, но теперь порядок всех записей на главной и др. страницах , сбился…

  14. Тлек

    Здравствуйте. Хочу поинтересоваться, информация еще актуальна? Или есть свежие решения? Заранее благодарен.

  15. Тлек

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

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

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