softsprint menu Заказать

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

Декабрь 12, 2014 в 1:11 | wiki

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

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

1
2
3
4
5
6
7
8
9
10
11
<?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; ?>

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

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

1
2
3
. 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/

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

Давайте обсудим

softsprint heart

Наши контакты

Львов, Украина
mob: +380 97 551 44 55
skype: softsprint.net

Скажите Привет!