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

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

В шаблон 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 картинка по умолчанию, в качестве миниатюры (изображения) записи, уже загружена в шаблон.

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

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

   3 голоса
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

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

Как создать сайт онлайн-школы на WordPress с интернет - магазином, профессиональным блогом и лендингами
Оставьте свой комментарий:
28 комментариев

на Блоге
в Фейсбук
в Вконтакте