Как в WordPress установить миниатюру в качестве фона?

Сегодня ответим на вопрос: «Как установить миниатюру в качестве фона для записи, страницы или всего сайта?»

Итак, например, нам нужно задать фон нашему посту в виде миниатюры. Для этого задаём свойство background-image c url нашей миниатюры контейнеру нашего поста. Пример кода из цикла WordPress (о нём уже писали здесь):

<?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] . '';
}
 ?>)">  // далее идут стандартные функции цикла WordPress
				</article>
<?php endwhile; ?>
<?php endif; ?>

Таким способом мы проверяем:

• есть ли у поста картинка-миниатюра – функция has_post_thumbnail;
• если миниатюра есть, тогда с помощью функции wp_get_attachment_image_src возвращаем массив с данными об УРЛе, ширине и высоте картинки-вложения, прикрепленной к посту. Первый элемент массива – ID картинки-миниатюры, данные которой нужно получить;
• для получения ID картинки-миниатюры применяется функция get_post_thumbnail_id();
• параметр “full” означает, что нам нужно загрузить картинку-миниатюру в её полном размере;
• окончательно через echo выводим сформированный УРЛ миниатюры, прикреплённой к посту.

Осталось минимально подправить стили в CSS для бэкграунда нашего поста, например, так:

. post {
background-size: 100% 100%;
}

Внимание! Чтобы можно было установить для поста картинку-миниатюру, нужно активировать эту возможность функцией – add_theme_support( ‘post-thumbnails’ ); в файле шаблона funсtions.php.

Таким простым способом Вы можете установить миниатюру в качестве фона для записи, страницы или всего сайта. Последний вариант предполагает установку стиля background-image для тега body. В таком случае, при загрузке поста будет устанавливаться миниатюра в качестве фона для всего сайта, причём, миниатюра загрузится именно та, что соответствует посту, который Вы просматриваете!

P.S. Если перед Вами стоит задача поставить не только картинку-миниатюру в качестве фона, а слайдера из множества изображений, советую применить плагин WP Vegas –

https://wordpress.org/plugins/vegas-fullscreen-background-slider/

Он позволяет создавать слайдеры отдельно для каждой страницы. Кол-во изображений может быть любым. Плагин является бесплатным и простым в установке.