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

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та 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 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;
}

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

Вибрані записи із заголовками на мініатюрах

Інший можливий сценарій, при якому виводиться текст поверх зображень - це коли люди хочуть відобразити важливі (вибрані) записи за допомогою лише мініатюр. Є кілька хороших плагінів для цього. Проте для тих, хто хоче все робити своїми руками, ось невелике керівництво.

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

Джерело: WPLift.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 9

Василь:

А якщо назва велика? Як додати обрізання тексту після певної кількості літер?

WordPresso:

Є функція mb_substr, ось приклад її використання:


199) {echo '…'; } ?>

Деймос:

Здрасти.Був би вдячний за допомогу.Мені на цьому сайті 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;
?>


ира:

а який буде код, якщо я хочу для продуктів, які out of stock, показувати на мініатюрі текст під замовлення? і правда, що цей код можна просто додати до доп.стилі і не потрібно лізти у functions.php? Дякую! буду дуже вдячна за рішення!

Андрій:

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

Додати коментар або відгук