Как вывести миниатюры wordpress?

Долгое время на этом сайте я не делал миниатюры к анонсам записей, так как сам шаблон этого не предусматривал. Но в последнее время я стал все больше понимать, что визуальные образы очень важны для привлечения пользователей. Народ стал менее читающий, но более смотрящий. Визуальные образы привлекаю больше, чем просто текст. Видя интересные картинки они просмотрят больше статей и сайту от этого (и мне тоже, естественно) будет только лучше. Но как это сделать и вывести миниатюру wordpress?

Некоторые шаблоны WordPress такую функцию имеют изначально, ну а для тех, у кого этого нет, эта небольшая заметка. С чего нужно начать?

Как вывести миниатюры?

У меня в шаблоне не было функции, которая при написании статьи позволяла бы создать и задавать миниатюру к ней. Создайте новую статью и посмотрите, есть ли в правой колонке у вас такой виджет?

задать миниатюру

У меня его не было. Чтобы он появился, нужно открыть в папке шаблона файл function.php и в самый конец добавить такой код:

if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' );

После этого у вас появится данный виджет. При написании статьи можно выбрать вручную самую подходящую для миниатюры картинку, если у вас в статье несколько изображений, или загрузить отдельное фото любого размера (но лучше по размеру миниатюры). Как вывести теперь эти миниатюры в анонсах статей?

Открываем файл index.php (часто нужно добавить так же код и в archive.php или category.php) и находим там примерно такую строку:

<?php the_excerpt() ?>

Теперь пред ней нужно вписать такой код:

<?php the_post_thumbnail(array(400,200), array('class' => 'aligncenter'));?>

Не стоит обращать внимание на цифры 400 и 200, размер мы зададим в другом файле, лучше обратите внимание на слово aligncenter. Слово center задает положение миниатюры, у меня это в ЦЕНТРЕ. Вы может вписать alignright или alignleft, если хотите видеть миниатюру справа или слева от текста.

Теперь нам нужно задать размер миниатюр. Открываем тут же файл style.php и вписываем туда такой код:

.wp-post-image {
 margin:10px auto 3px;
 width:400px;
 height:*px;
 display: block;
 }

Я задал ширину 400 пикселов, а в значение высоты поставил звездочку, чтобы картинка сохраняла пропорцию. Все дело в том, что картинка берется из статьи и уменьшается по этим размерам. А так как картинки имеют всегда разное соотношение сторон, то если вы точно зададите и высоту и ширину, то картинка будет вытягиваться или будет сплюснута.

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

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

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

В итоге получилось все вот так:

как вывести миниатюры wordpress

Можно сказать, что идеально :) Единственный вопрос, который я пока не решил: нужно ли закрывать в noindex текст анонсов или не обязательно? Что думаете?


VK
OK
MR
GP

Опубликовано © Просто Linux | Всё про Линукс, Android и Windows.

Основы WordPress. Серия девятая. Миниатюры

10.Добавляем миниатюры записи

Учимся создавать ЗАПИСИ, РУБРИКИ, СТРАНИЦЫ в Wordpress.  Добавляем МИНИАТЮРУ записи


4 комментария

Понравилась ИГРА? Возьми КОД, поставь себе на сайт и улучши поведенческие факторы!


СОВЕТ ДНЯ: Если вы хотите вернуть часть стоимости при покупке в интернет магазине, обязательно воспользуйтесь одним из сервисов кэшбэка:

1. EPN — самый надежный кэшбэк (Aliexpress, OZON, ASOS и BANGGOOD)

2. Алибонус — самый щедрый кэшбэк на Алиэкспресс, возвращают 10%

3. LetyShop — самое большое количество магазинов — 842 магазина!

Что такое кэшбэк читайте в ЭТОЙ СТАТЬЕ…

Самый лучший хостинг!

лучший хостинг

НАЙТИ НА САЙТЕ

КОМАНДЫ LINUX

РЕПОЗИТОРИИ LINUX

ОБЛАЧНЫЕ СЕРВИСЫ

КОМПЬЮТЕРНЫЕ ТОВАРЫ

КАК ЗАРАБОТАТЬ В СЕТИ?

ВСЕ СТАТЬИ САЙТА

© Все права сохраняются. Копировать материалы без разрешения автора ЗАПРЕЩАЕТСЯ!