Как добавить текст поверх изображений миниатюр в WordPress

Не так давно я заинтересовался тем, как люди используют изображения на своих WordPress сайтах. Всегда есть пользователи, которые хотят что-то делать, используя картинки и способы их отображения. Я просматриваю многие форумы, ищу обсуждения способов отображения картинок в WordPress и использую их новыми способами.

Просматривая форумы и группы, я заметил, что большинство людей на WordPress форумах спрашивают о том, как можно показывать текст на изображениях. Некоторые владельцы сайтов хотят показывать на изображении заголовок записи, другие хотят показывать категорию.

Текст на изображении улучшает восприятие пользователя. Этот текст может использоваться для объяснения изображения, чтобы сделать его более информативным. Сайты газет и журналов добавляют на изображения заголовки и описания, чтобы сделать свои сайты более интерактивными и интересными.

Проблема в том, что, хотя вытягивание текста в WordPress — не такая уж сложная вещь, настройка его отображения поверх изображения с помощью CSS может быть достаточно сложной для некоторых пользователей. В этой статье мы попробуем поэкспериментировать с изображениями WordPress, размещая на них разные виды текста.

Добавляем название рубрики на изображения

Некоторые владельцы сайтов на WordPress хотят отображать рубрику, в которой размещена запись, поверх миниатюры самой записи. Это хорошо для тех сайтов, в которых запись может принадлежать только одной рубрике.

Сначала мы попробуем "вытащить" название рубрики и показывать его вместе с миниатюрой записи, затем мы добавим стиль с помощью CSS в нашей таблице стилей:

<div class="post-thumb">
<span class="new-wrapper">
<?php
//Display post thumbnail
if ( has_post_thumbnail()) : the_post_thumbnail('thumbnail'); endif;
?>
<span>
<?php
// Get the Name of First Category
$category = get_the_category();
echo $category[0]->cat_name;
?>
</span>
</span>
 </div>

Теперь мы добавим стиль с помощью CSS так, чтобы текст появлялся поверх изображения:

.new-wrapper span {
	background-color: Black;
	color:white;
	font-size: 12px;
	position:absolute;
	bottom:0px;
	left:0px;
	padding-left:10px;
	padding: 10px;
	-moz-opacity:.80;
	filter:alpha(opacity=80);
	opacity:.80;
	width:180px;
	display: block;
}
.new-wrapper {
float:left;
position:relative;
width: 180px;
overflow:hidden;
}

В примере выше мы предположили, что размер миниатюры записи: 180 x 180 px. Измените ширину, чтобы подогнать под размер вашей миниатюры записи. Если вы не знаете размер вашей миниатюры записи, вы можете посмотреть это в консоли: Параметры → Медиафайлы.

Подсказка: если установленный размер миниатюры записи задан меньше, но изображения отображаются у вас на сайте не в том размере, скорее всего вам нужно перегенерировать миниатюры.

Добавляем заголовок записи на изображения

Вы можете добавить к миниатюре название записи. В данном случае я буду делать это в стандартной теме Twenty Eleven. Сначала мы отобразим полный размер миниатюры записи, затем разместим поверх нее заголовок записи:

<div class="single-featured-image">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if ( has_post_thumbnail()) : the_post_thumbnail('full'); endif; ?>
</div>

Обратите внимание, что в функции миниатюры записи мы использовали 'full' для отображения полного размера миниатюры Мы установили этот размер в консоли: Параметры → Медиафайлы.

.single-featured-image {
	position:relative;
	width: 600px;
	overflow:hidden;
}
.single-featured-image h2 {
	background-color: Black;
	color:white;
	font-size: 20px;
	position:absolute;
	bottom:0px;
	left:0px;
	padding-left:10px;
	padding: 10px;
	-moz-opacity:.80;
	filter:alpha(opacity=80);
	opacity:.80;
	width:600px;
	display: block;
}
.single-featured-image h2 a {
	color:white;
}
.single-featured-image h2 a:visited {
	color:white;
}
.single-featured-image h2 a:hover {
	color:white;
}

Избранные записи с заголовками на миниатюрах

Другой возможный сценарий, при котором выводится текст поверх изображений — это когда люди хотят отобразить важные (избранные) записи с помощью одних лишь миниатюр. Есть несколько хороших плагинов для этого. Тем не менее, для тех, кто хочет все делать своими руками, вот небольшое руководство.

Сначала мы "вытащим" 3 последних записи из рубрики "важных" (featured) записей. Если вы используете свою таксономию или теги для показа важных записей, то вам нужно подогнать под себя wp_query и заменить category_name тегами или своей таксономией.

<div class="featured-posts-box">
<?php
    $recentPosts = new WP_Query();
    $recentPosts->query('showposts=3', 'category_name=Featured');
?>
<ul class="top-featured-image">
<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<li class="top-featured-image">
<span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
<?php if ( has_post_thumbnail()) : the_post_thumbnail('thumbnail'); endif; ?>
</li>
<?php endwhile; ?>
</ul>
</div>

Этот код нужно вставить в ваш главный шаблон index.php прямо перед циклом ваших записей. Мы использовали свою функцию wp_query чтобы получить записи из категории 'Featured'. Затем мы вывели заголовки записей и изображения миниатюр. Теперь нам нужно использовать CSS, чтобы разместить изображения и прописать свойства текста.

.featured-posts-box {
background:#eee;
padding:5px;
}
.top-featured-image {
	position:relative;
	width: 180px;
	overflow:hidden;
display:inline;
}
.top-featured-image span {
	background-color: Black;
	color:white;
	font-size: small;
	position:absolute;
	bottom:0px;
	left:0px;
	padding-left:10px;
	padding: 10px;
	-moz-opacity:.80;
	filter:alpha(opacity=80);
	opacity:.80;
	width:160px;
	display: inline;
float:left;
text-align:left;
}
.top-featured-image span a {
	color:white;
}
.top-featured-image span a:visited {
	color:white;
}
.top-featured-image span a:hover {
	color:white;
}
.top-featured-image ul {
list-style:none;
display: inline;
}

Вот как это будет выглядеть в стандартной теме Twenty Eleven

Заключение

Важная вещь, которую нужно помнить владельцам WordPress сайтов: пользователь, который заходит на сайт, не будет знать, какой WordPress код и функциональность стоит за этим сайтом. Они видят готовый HTML, который выглядит красиво благодаря CSS. Есть много вещей, для которых WordPress может использовать CSS, чтобы улучшить впечатление пользователя. Так что я закончу эту статью заметкой для себя – надо бы улучшить навыки CSS.

Источник: WPLift.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующийся на создании сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/