softsprint menu Заказать

Миниатюра в качестве фона для поста или страницы WordPress

Январь 6, 2015 в 12:54 | wiki

Иногда встречаются задачи, когда нужно установить картинку-миниатюру в качестве фона поста. Благо, 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).
Пример фонового изображения поста в одной из наших работ:
darteldesign.com

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

softsprint heart

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

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

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