Як додати текст поверх зображень мініатюр у 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 180 х точок. Змініть ширину, щоб підігнати під розмір мініатюри запису. Якщо ви не знаєте розмір мініатюри запису, ви можете подивитися це в консолі: Параметри → Медіафайли.

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

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

Ви можете додати до мініатюри назва запису. В даному випадку я робитиму це в стандартній темі Двадцять одинадцять. Спочатку ми відобразимо повний розмір мініатюри запису, потім розмістимо поверх неї заголовок запису:

<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>

Зверніть увагу, що функції мініатюри запису ми використовували 'Повний' для відображення повного розміру мініатюри Ми встановили цей розмір у консолі: Параметри → Медіафайли.

.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 останні записи з рубрики "важливих" (ознаками) записів. Якщо ви використовуєте свою таксономію або теги для показу важливих записів, вам потрібно підігнати під себе 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 щоб отримати записи з категорії 'Докладніше'. Потім ми вивели заголовки записів та зображення мініатюр. Тепер нам потрібно використати 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;
}

Ось як це виглядатиме у стандартній темі Двадцять одинадцять

Висновок

Важлива річ, яку потрібно пам'ятати власникам WordPress сайтів: користувач, який заходить на сайт, не знатиме, який WordPress код та функціональність стоїть за цим сайтом. Вони бачать готовий HTML, який виглядає чудово завдяки CSS. Є багато речей, для яких WordPress може використовувати CSS для покращення враження користувача. Так що я закінчу цю статтю заміткою для себе – треба було б покращити навички CSS.

Джерело: WPLift.com

Олексій Шевченко

редактор wpcafe

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