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

Время на чтение: 6 минут

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

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

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

Добавление изображения-превью для поста или страницы в WordPress

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

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

• Заголовок – появляется при наведении курсора;
• Подпись – можно вывести специальным кодом;
• Атрибут alt – альтернативный текст, отображается вместо отсутствующего изображения;
• Описание – краткое описание содержания картинки.

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

Проблема повторяющихся изображений в постах

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

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

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

Местонахождение этой строчки может отличаться, но всегда следует начинать поиск с файла «Single.php». На примере стандартного WordPress шаблона Twenty Sixteen, нужно открыть редактора кода, который расположен в разделе «Внешний вид» административной панели. Здесь потребуется открыть файл «Single.php» и найти в коде строчку, отвечающую за вывод контента. Она выглядит так:

get_template_part( ‘template-parts/content’, ‘single’ );

Из этой строчки становится понятно, что продолжать поиск необходимо по файлу «content-single.php». Открыв этот файл в редакторе, вы найдете такую строку:

Именно она и отвечает за вывод миниатюры на странице отдельной статьи. Имейте ввиду, что эта строчка может выглядеть по-разному, все зависит от конкретного шаблона, но она обязательно должна содержать слова «post» и «thumbnail». Вам нужно просто заменить эту строчку на:

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

Включение поддержки миниатюры в шаблоне

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

Первым делом, необходимо открыть файл «functions.php», находящийся в папке с темой, и добавить следующую строчку:

Это разрешит вывод миниатюры для записи или страницы во время создания. Если вы хотите включить эту функцию только для записи, то нужно добавить такую строку:

add_theme_support( ‘post-thumbnails’, array( ‘post’) );

А только для страницы такую:

add_theme_support( ‘post-thumbnails’, array( ‘page’) );

Далее, вы должны указать размеры, воспользовавшись один из двух способов, предлагаемых функциями WordPress: пропорциональное изменение или обрезка. В первом случае, изображение будет пропорционально (без искажений) сжиматься, пока не будет соответствовать указанной ширине и высоте. Например, если оригинальная картинка будет 100 × 50, а вы указали 50 × 50, то по итогу получится 50 × 25. Код первого способа выглядит так:

set_post_thumbnail_size( 50, 50 );

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

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

set_post_thumbnail_size( 50, 50, true );

Преимущество здесь в том, что все картинки будут одинаковые, а недостаток, что часть картинки будет обрезана, а это может сильно сказаться на ее содержимом и даже исказить его смысл.

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

Заключение

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

Источник

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 картинки-миниатюры)

Миниатюры

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

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

Источник