Главная › Новости

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

Опубликовано: 01.09.2018

Не так давно я заинтересовался тем, как люди используют изображения на своих 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