Статьи

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

Сентябрь 26, 2018

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

Поддержка миниатюр должна быть включена в вашей теме. Вы можете добавить его в плагин, чтобы он был доступен для всех тем, но это может не подходить в каждом случае. Поэтому вам нужно открыть или создать файл ‘functions.php’ в папке вашей темы (wp-content / themes / theme-name /).

Чтобы добавить поддержку миниатюр для всех типов сообщений, добавьте эту команду где-нибудь после открытия <php: 


add_theme_support('post-thumbnails');

Кроме того, вы можете включить миниатюры только для сообщений: 

 
add_theme_support('post-thumbnails', array('post'));

или просто страницы: 

 
add_theme_support('post-thumbnails', array('page'));

Настройка размеров миниатюр

Размеры эскизов по умолчанию можно установить в меню «Настройки» WordPress> «Экран мультимедиа». Однако вы также можете установить высоту и ширину по умолчанию в functions.php, например 

 
set_post_thumbnail_size(100, 75);

Это создаст миниатюры шириной 100 пикселей и высотой 75 пикселей (приятное соотношение 4: 3). Однако что происходит, когда пользователь загружает изображение с другим соотношением сторон — скажем, 100 x 150? В этом случае все изображение пропорционально уменьшается, чтобы уместиться в пространство, и результирующий эскиз составляет 50 х 75.

Кроме того, вы можете определить жесткую обрезку, передав «true» в качестве третьего аргумента: 

 
set_post_thumbnail_size(100, 75, true);

Это обрезает изображение, чтобы оно соответствовало соотношению сторон. Полученный эскиз всегда будет размером 100 x 75, но верхний и нижний или левый и правый края будут удалены.

WordPress Главное изображение

Поле «Featured Image» должно появиться на экране редактирования поста / страницы WordPress. Если его там нет, проверьте, включен ли он в «Опции экрана» или просмотрите код functions.php.

Использование миниатюр

Три основные команды миниатюр теперь можно использовать в любом цикле WordPress. Как правило, вы хотите использовать их в файлах с именами index.php, category.php, archive.php, author.php, taxonomy.php или search.php:

  • has_post_thumbnail()
  • the_post_thumbnail()img
  • get_the_post_thumbnail()img

Поэтому одна из самых простых реализаций: 

 
if (has_post_thumbnail()) {
	the_post_thumbnail();
}

Или мы можем добавить ссылку и миниатюру по умолчанию, если она недоступна: 

 
echo '<a href="', get_permalink(), '">';
if (has_post_thumbnail()) {
	the_post_thumbnail();
}
else {
	echo 
		'<img src="',
		get_bloginfo('template_directory'), '/images/thumb-default.png',
		'" width="100" height="75" alt="thumbnail" />';
}
echo '</a>';

Расширенное использование миниатюр

Два необязательных аргумента могут быть переданы в the_post_thumbnail()get_the_post_thumbnail() Первый размер — либо:

  1. строка, содержащая текст «миниатюра», «средний» или «большой», как установлено в настройках WordPress> экран «Медиа», или
  2. массив с новыми размерами ширины и высоты, например, массив (120, 90)

Второй — это ассоциативный массив, содержащий src, class, alt и title.

Например: 

 
the_post_thumbnail(
	array(120, 90), 
	array(
		'src' => 'image.jpg',
		'class' => 'thumbnail',
		'alt' => 'post thumbnail',
		'title' => 'my custom title'
	)
);

результаты в HTML, такие как: 

 
<img width="120" height="90" src="image.jpg" alt="post thumbnail" title="my custom title" />

Это настолько сложно, насколько это возможно. Получайте удовольствие, добавляя поддержку миниатюр ко всем темам WordPress.

Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как «Руководство для начинающих по веб-дизайну с WordPress» .

37
Share: