1 Topic by PunBB

Topic: Похожие записи в Вордпресс с картинками в конце статьи

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

Вначале размещаем стили, лучше их спрятать в файл стилей CSS.

<style>
.home_page {   /* общие стили для блока */
 margin: 20px 0 0 20px;    /* внешние отступы */
}
.home_page a{        /* стили для ссылок-заголовков */  
 font-weight: bold;  /* выделение ссылки жирным */
 text-align: left;   /* прижимаем текст к левому краю */
 margin-left: 20px;  /* отступ от левого края */
 font-size:16px;     /* размер шрифта*/
}
.home_page img{  /* стили для миниатюр */
 float: left;    /* обтекание текста по левому краю */
 margin:10px;    /* внешние отступы */
 }
.home_page table {                  /* стили для таблицы */
 border-bottom: 1px solid #f2f2f2;  /* черта по верхнему краю ячейки */
}
</style>

2 Reply by PunBB

Re: Похожие записи в Вордпресс с картинками в конце статьи

Затем в конце поста, обычно это файл single.php, либо content-single.php после вывода контента вставим код

<div id="comments" style="margin-bottom:10px">
    <h3 class="comments-title"><span>Похожие записи</span></h3>
    <div class="home_page">
      
<?php
$cat = get_the_category();
$cat_id = $cat[0]->cat_ID;  //определяем текущий ID категории
echo $cat_id;

$query = new WP_Query( array ( 
    'cat' => $cat_id,
    'orderby' => 'rand',
    'posts_per_page' => '3' ) );

if ( $query->have_posts() ) {
  while ( $query->have_posts() ) {
    $query->the_post(); ?>

<table style="margin-bottom:5px">
            <tr>
                <td><a onclick="return !window.open(this.href)" href="<?php the_permalink()?>"><?php the_post_thumbnail('thumbnail');?><?php the_title();?></br></a>
                
  <p><a href="<?php the_permalink() ?>" ><img src="<?php echo catch_that_image()?>" alt="<?php the_title(); ?>" height="" width="100px" /></a><div><?php the_content_rss('', FALSE, '', 25); ?></div></p>
                </td>
            </tr>
        </table>
<?php    
  }
  
} else {
    // Постов не найдено
}
/* Возвращаем оригинальные данные поста. Сбрасываем $post. */
wp_reset_postdata(); ?>

     </div>
</div>

Можно так же разместить этот код для вывода похожих записей в отдельный файл, а затем его подключить.