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

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

7 комментариев

сначала новые
по рейтингу сначала новые по хронологии
Сергей

cat_name;
?>

Сергей

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

post_count > 1 ) {
$c++;
if( !$paged && $c == 1) echo '';
}
?>

<?php
if( !$paged && $c == 2 ) echo '';
?>

cat_name;
?>

<?php $i = 1; echo ''; while ( have_posts() ): the_post(); ?>

<?php if($i % 2 == 0) { echo ''; } $i++; endwhile; echo ''; ?>

Сергей

Да, подскажите тем кто не особо разбирается какой php отвечает за отображение постов, куда именно вставлять перед каким кодом и т.п.

А в каких файлах это всё прописывать?Ведь в WordPress нет отдельных страниц с HTML кодом, они ж вроде в процессе собираются.??Так куда? В content.php???

Здрасти.Был бы признателен за помощь.Мне на этом сайте inter-wall.ru нужно название записи подогнать под миниатюру.Уже разные настройки попробовал..куда угодно текст перемещается..только не под миниатюру.

А если название большое? Как можно добавить обрезание текста после определённого количества букв?

Есть функция mb_substr, вот пример ее использования:

<a href="" rel="bookmark" title="">
199){ echo '...'; } ?>