Как вывести миниатюры в анонсы статей WordPress

И снова здравствуйте! Как и обещал пишу статью о том как вставить миниатюру в анонс записи. Иногда красивая картинка рядом с неполной статьей может заинтересовать и посетитель захочет прочитать полную статью.

Как и в прошлый раз нам понадобятся.  index.php, search.php, archive.php

Если вы хотите чтобы миниатюра выводилась и в полной записи как и у меня,  то не забудьте про  page.php, single.php

И так поехали

В цикл который мы использовали в статье (Как изменить отображение анонсов Часть 1)

Для наглядности выложу и в эту статью.

<?php while (have_posts()) : the_post(); ?>
Здесь содержимое цикла для каждой темы оно разное
<?php endwhile; ?>

Сразу после строчки отвечающей за вывод заголовков добавляем.

    <?php 
        if( has_post_thumbnail() ) {
            echo '<div class="post-img">';
            the_post_thumbnail(array(190,122));  /*Размеры миниатюры*/
            echo '</div>';
        } else {
            echo '';
        }
    ?>

К справке строчка отвечающая за вывод заголовков выглядит примерно так.

      <div class="post_title">
        <h3 class="h1"> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
      </div>

У меня она находится в блоке post_title

Теперь пропишем стили в css.

.posts .post-img {
float: left;
width: 190px;
margin-right: 20px;
text-align: right;
}

.posts .post-img {
margin-bottom: 20px;
}

.post-img {
position: relative;
z-index: 1;
}

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

miniatyra

Дальше будет  пост о нижней части записей WordPress.

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

Ваш адрес email не будет опубликован.