Больше результатов...

Generic selectors
Только точные совпадения
Искать в заголовках
Искать в контенте
Post Type Selectors
Filter by Categories
FAQ
Hostenko
Вдохновение
Видеоуроки
Новости
Плагины
Темы
Уроки
Хаки

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

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

inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!

Как добавить текст поверх изображений миниатюр в 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;
}

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

В примере выше мы предположили, что размер миниатюры записи: 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;
}

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

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

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

Сначала мы "вытащим" 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 сайтов: пользователь, который заходит на сайт, не будет знать, какой WordPress код и функциональность стоит за этим сайтом. Они видят готовый HTML, который выглядит красиво благодаря CSS. Есть много вещей, для которых WordPress может использовать CSS, чтобы улучшить впечатление пользователя. Так что я закончу эту статью заметкой для себя – надо бы улучшить навыки CSS.

Источник: WPLift.com
inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!
Алексей Шевченко
редактор wpcafe
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Комментарии к записи: 9

Василий:

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

WordPresso:

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

<a href="» rel=»bookmark» title=»»>
199){ echo ‘…’; } ?>

Deimos:

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

Антон:

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

Сергей:

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

Сергей:

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

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 »; ?>

Сергей:

cat_name;
?>

ира:

а какой будет код, если я хочу для продуктов, которые «out of stock», показывать на миниатюре текст «под заказ» ? и правда, что этот код можно просто добавить в доп.стили и не нужно лезть в functions.php? спасибо! буду очень благодарна за решение!

Андрей:

А как сделать чтобы на странице сайта, где список записей, поверх миниатюры поставить надпись, например, «популярное».

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