WordPress вывести изображение страницы

get_the_post_thumbnail() — позволяет получить изображение миниатюры поста

Практическое использование этой функции вы можете найти в моём видеоуроке.

Возвращает изображение (вместе с HTML-тегом и его атрибутами), которое установлено в качестве миниатюры поста. Если указанный пост не имеет миниатюры, то функция возвращает пустую строку.

• thumbnail / medium / large — одно из стандартных размеров изображений, зарегистрированных в WordPress по умолчанию, данные размеры можно настроить в Параметры > Медиа,
• full — оригинальное разрешение изображения — таким оно было загружено на сайт,
• Можно указать собственные параметры ширины и высоты миниатюры в виде массива, например array(50, 30) . Обратите внимание, WordPress не будет создавать дубликат картинки под этот размер — вместо этого будет использоваться наиболее близкий по разрешению зарегистрированный размер картинки, подогнанный под ваши параметры с сохранением оригинальных пропорций.

Чтобы было понятнее, приведу пример. Предположим, в качестве этого аргумента мы указали array(50, 30) . У меня самый близкий размер будет 125×125 ( thumbnail ) — URL этой картинки и будет вставлен в атрибут src . Окей, а что с пропорциями? Так как 125×125 — это квадрат, то и наша миниатюра будет квадратной, она впишется по наименьшему параметру, т.е. результат будет 30×30.

Один из собственных размеров изображений, зарегистрированных через функцию add_image_size().

$attr (массив) массив переопределяемых атрибутов тега , через него можно переопределить следующие HTML-атрибуты:

• src — если вам надо, можете даже заменить URL картинки.
• class — класс тега , по умолчанию имеет следующие классы wp-post-image и attachment- <размер изображения>.
• alt — по умолчанию trim(strip_tags( $attachment->post_title )) — указывается в админке при загрузке/редактировании медиафайла.
• title — по умолчанию trim(strip_tags( $attachment->post_excerpt )) .

Пример 1

Простой пример — просто выведем миниатюру поста с >

Пример 2. Как сделать миниатюры с ссылками на пост?

Предположим, мы хотим реализовать это на страницах категорий. Давайте немного доработаем цикл:

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

Пример 3. Как сделать, чтобы при клике на миниатюру, открывалась полная версия картинки?

Код из этого примера отлично подойдет для использования в каком-нибудь плагине jQuery, например fancybox или pretty photo. В таком случае вам возможно также понадобится добавить класс для ссылки.

Вы также можете ознакомиться с документацией функций wp_get_attachment_image_src() и get_post_thumbnail_id() на моем блоге.

Пример 4. Используем третий параметр $attr для изменения класса миниатюры

Давайте добавим на наши миниатюры класс align-left типа для того,чтобы они обтекались текстом слева:

Фильтр post_thumbnail_size

Фильтр позволяет задать размер миниатюр, используемых на блоге (везде на блоге).

В следующем примере мы устанавливаем размер для всех миниатюр на блоге medium :

А теперь пример со следующим условием: для всех миниатюр на блоге, которые выводятся через функцию get_the_post_thumbnail() с параметром $size равным thumbnail заменяем размер на medium , остальные размеры миниатюр не трогаем:

Фильтр post_thumbnail_html

О, а вот этот фильтр — уже что-то интересное, он позволяет нам модифицировать HTML миниатюры непосредственно перед тем, как функция его возвращает.

Количество параметров данного фильтра не может не радовать, это означает, что мы можем творить с возвращаемым HTML-кодом всё, что нам угодно.

$html (строка) HTML-код, возвращаемый функцией по умолчанию, $post_id (целое число) ID поста, миниатюру которого нужно получить, $post_thumbnail_id (целое число) ID миниатюры, $size (строка|массив) размер миниатюры, $attr (массив) массив HTML-атрибутов, которые были заданы при вызове функции, если не заданы, то пустой массив;

А теперь несколько интересных примеров.

Пример 1. Автоматическое проставление ссылок на пост

Фишка в том, что каждый раз при использовании функции get_the_post_tumbnail() миниатюры уже будут возвращаться с автоматически проставленными ссылками на пост.

Круто, да? А главное — всё очень просто.

Пример 2. Возвращаем только URL миниатюры

Ещё одна полезная вещь, которую можно сделать при помощи фильтра post_thumbnail_html . Допустим, нам не нужен весь HTML-код с тегом , допустим, нам нужен только URL. В таком случае:

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Источник

Качественный вывод изображений на WordPress

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

Не обязательно, но можно ознакомиться с предыдущей статьёй о миниатюрах на WordPress.

WordPress генерирует кучу дополнительных размеров изображений. Для начала надо убрать их.

Инструкция вывода изображений в шаблоне сайта на WordPress

1. В разделе Настройки -> Медиатека везде ставим ноль.

Это нужно для того, чтобы нигде не дублировались значения. А если появляются новые изображения, то можно было бы легко вычислить, что они не ваших рук дело, а кого-нибудь плагина.

2. Заходим в файле functions.php и добавляем следующие размеры.

// Миниатюра в админ панели
add_image_size( ‘thumbnail’, 100, 100, true );

// Архивы
add_image_size( ‘post-thumbnail’, 270, 200 );

// Обычный формат записи
// Архивы при разрешении Retina
add_image_size( ‘medium’, 600, 400 );

// Записи при разрешении Retina
add_image_size( ‘large’, 1200, 800 );

В результате WordPress будет генерировать 4 размера изображений.

Почему не нужно вставлять никуда кроме миниатюр значение «crop»? Об этом можно почитать по уже ранее приведенной ссылке.

Важно указать в functions.php названия, которые уже зарезервированы WordPress-ом для изображений. Если назвать их иначе, то могут возникнуть какие-нибудь нестыковки. Например, не должным образом может работать функция srcset. О ней чуть ниже.

Первое изображение 100 на 100 (thumbnail) необходимо для различных внутренних административных функций, чтобы мы быстро смогли увидеть и работать со своими загруженными картинками.

Второе изображение (post-thumbnail) будет выводиться в списке разделов. Его размер не будет виден в списке доступных для загрузки в запись изображений. А следовательно не будет мешать и мозолить глаза.

Изображение с названием medium будем вставлять в свою запись. Другие размеры, относящиеся к данному примеру, вставлять не нужно.

Последний размер, который будет генерироваться это large. Он должен быть в 2 раза больше medium. И вот почему.

img scrset для the_post_thumbnail

В WordPress начиная с версии 4.4 был введен для изображений параметр srcset. Если посмотреть на изображения в коде сайта на WordPress, то оно будет выглядеть следующим образом:

Для чего это нужно. При разных разрешениях экрана монитора будет отдаваться разные размеры картинок. Работает функция в WordPress автоматически, нужно лишь создать для неё соответствующие условия.

Что мы и сделали. Мы загружаем картинку минимального размера (нами утвержденного) в свою статью. И для неё же генерируется изображение с разрешением в 2 раза выше. Такая картинка загрузится на сайт, если он будет просматриваться с дисплеев повышенной плотности пикселей (Retina и т.д).

В то же самое время надо, чтобы scrset работал и для разделов сайта, когда выводятся миниатюры. Для них мы выводим картинки с помощью следующего php кода:

$arr = array(‘title’ => esc_attr( $title_attribute ), ‘alt’ => esc_attr( $title_attribute ) );

echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’, $arr );

Из кода можно увидеть, что изображение будет выводить в пост размеры указанные в названии post-thumbnail. Именно для этого он был записан в файл functions.php.

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

При вставке в статью будут следующие размеры:

Можно заметить, что есть ещё размер полный. Этот размер оригинального изображения. С помощью плагина Resize Image After Upload можно утвердить его границы. Например, обрезать до 1920 пикселей или меньше. Это же изображение будет выводиться, если кликнуть на картинку.

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

Читайте также

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

Источник

the_post_thumbnail() WP 2.9.0

Выводит html код картинки-миниатюры текущего поста.

Этот Тег шаблона должен использоваться внутри Цикла WordPress.

Используйте get_the_post_thumbnail(), когда нужно получить данные этой функции для обработки в PHP.

Дополнительный размер картинки, которую затем можно получить с помощью этой функции, можно создать через add_image_size(). По умолчанию доступны следующие размеры: thumbnail , medium , large , full , post-thumbnail .

Возвращает

null . Выводит на экран строку. Функция выводит на экран html код картинки или пустое значение (null), если картинки не существует.

Использование

Размер миниатюры, которую нужно получить. Может быть строкой: thumbnail , medium , large , full или массивом из двух элементов (ширина и высота картинки): array(32, 32) .

Когда указан массив, новая миниатюра с указанными размерами не создается. А WP ищет самый подходящий размер из тех что уже есть, берет его и просто указывает высоту и ширину в пикселях для тега IMG, чтобы уменьшить картинку. Т.е. картинка уменьшается только визуально.

По умолчанию: ‘post-thumbnail’, размер который устанавливается для темы функцией set_post_thumbnail_size()

Массив атрибутов, которые нужно добавить получаемому html тегу img .

Можно указать строкой: alt=альт&class=alignleft или массивом:

Атрибуты можно указывать любые.
По умолчанию: »

Примеры

Дополнительные примеры, то как стилизовать миниатюры и передавать атрибуты смотрите в описании функции get_the_post_thumbnail().

#1 Миниатюра как ссылка на пост

Пример 1: Используйте следующий код, чтобы сделать картинку-миниатюру ссылкой на пост. Пример для использования внутри Цикла WordPress:

#2: Сделаем миниатюру ссылкой на пост

Для этого используем хук post_thumbnail_html . В этом случае картинка будет ссылкой на пост сразу при вызове функции the_post_thumbnail(); . Код нужно добавлять в файл шаблона functions.php:

#3 Миниатюра-ссылка на оригинальный размер

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

#4 Регистрация нового размера

С помощью add_image_size() можно зарегистрировать новый размер и затем получить его по ключу:

Источник

get_the_post_thumbnail() WP 2.9.0

Получает IMG тег миниатюры поста, если она существует.

Получает миниатюру поста, которая установлена на странице редактирования записи и формирует html код картинки на основе полученной ссылки на миниатюру. Если миниатюру получить не удалось (она не установлена), то будет возвращен пустой результат » .

Заметка! Чтобы для поста можно было определить картинку миниатюру, нужно активировать такую возможность функцией add_theme_support( ‘post-thumbnails’ ); в файле шаблона funсtions.php .

Когда нужно получить только URL картинки, используйте get_the_post_thumbnail_url().

Когда в теме добавляется поддержка post-thumbnail , регистрируется специальный размер изображения post-thumbnail , который отличается от размера thumbnail , управляемого через Настройки > Медиа . При использовании этой или связанных функций, используется этот размер post-thumbnail .

Стилизация миниатюр

Миниатюры создаваемые этой функцией получают класс wp-post-image (class=»wp-post-image»). Также, устанавливается класс в зависимости от размера миниатюры. В CSS миниатюры стилизуются через следующие селекторы:

Также можно задать свой класс:

Хуки из функции

Возвращает

• HTML код картинки .
• Пустую строку, если не удалось найти картинку миниатюру записи.

Использование

Размер необходимой миниатюры:

• Можно указать строку: thumbnail , medium , large или full .
• Или массив из двух элементов, обозначающих размер миниатюры (ширину и высоту): array(32, 32) .

По умолчанию: ‘post-thumbnail’

Строка в виде запроса или массив аргументов, которые определят атрибуты тега img.

Примеры

#1 Что вернет функция

#2 Базовый пример использования

#3 Размеры миниатюр

Размеры для картинок в WordPress обозначаются условно:

• thumbnail — маленькая миниатюра;
• medium — средняя;
• large — большая;
• full — оригинал, картинка которую мы загружали.

Указать конкретные размеры в пикселях для каждого типа можно в настройках (Параметры > мадиафайлы).

Эти примеры показывают, как можно получить картинку нужного размера:

Список изменений

С версии 2.9.0	Введена.
С версии 4.4.0	$post can be a post ID or WP_Post object.

Media screen. * * When using the_post_thumbnail() or related functions, the ‘post-thumbnail’ image * size is used by default, though a different size can be specified instead as needed. * * @since 2.9.0 * @since 4.4.0 `$post` can be a post ID or WP_Post object. * * @param int|WP_Post $post Optional. Post ID or WP_Post object. Default is global `$post`. * @param string|int[] $size Optional. Image size. Accepts any registered image size name, or an array of * width and height values in pixels (in that order). Default ‘post-thumbnail’. * @param string|array $attr Optional. Query string or array of attributes. Default empty. * @return string The post thumbnail image tag. */» data-tooltip-type=»pre»>Код get_the_post_thumbnail() get the post thumbnail WP 5.8.1

Cвязанные функции

thumbnail (image картинки-миниатюры)

Миниатюры

Миниатюры Вложения

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

Источник