Миниатюра в качестве фона для поста или страницы WordPress
Иногда встречаются задачи, когда нужно установить картинку-миниатюру в качестве фона поста. Благо, WordPress имеет удобный функционал для добавления миниатюр через админ-панель. Для того, чтобы Ваша тема поддерживала работу с миниатюрами, нужно:
1) добавить в файл functions.php следующий код:
1 | <?php add_theme_support( 'post-thumbnails' ); ?> |
Этот код установит поддержку миниатюр Вашей темой.
2) в цикле WordPress сделаем следующие изменения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="post" style="background-image: url(<?php if ( has_post_thumbnail()) { $full_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); echo ''.$full_image_url[0] . ''; } ?>)"> <h1 class="h1"><?php the_title(); ?></h1> <?php the_content(); ?> </article> <?php endwhile; ?> <?php else : ?> <h2 class="nothing">Nothing has found!</h2> <?php endif; ?> |
Таким образом, мы задали стиль background-image с картинкой-миниатюрой нашему посту.
Далее остаётся настроить на свой вкус стили CSS и миниатюра вместо фона поста будет выводится не только при его открытии, но и в списке постов блога (настройки выполняются через CSS).
Пример фонового изображения поста в одной из наших работ: