Get the post thumbnail

как вывести миниатюру, как задать размер миниатюры

Здравствуйте, уважаемые читатели help-wp.ru.

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

Если вас интересует wordpress картинка рубрики советую перейти по представленной ссылке.

Навигация по странице:

  • вывод миниатюр wordpress
  • не получается задать миниатюру
  • ссылка на миниатюру
  • размер миниатюры
  • проверить наличие миниатюры

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


Как сделать лайтбокс для wordpress миниатюры можно посмотреть перейдя по ссылке.

 

Зачем нужна миниатюра wordpress

Этот вопрос порой задают начинающие блогеры и разработчики WP. Да что там начинающие, еще год назад, когда только начинал этот сайт, я также не понимал смысла от миниатюр. Ну да это красиво, оригинально — не спорю, но резона большого я не видел. Надобность добавлять картинки мне пришла со временем, когда начал больше разбираться в СЕО оптимизации + общаться на эти темы с СЕО специалистами. Своими мыслями, по этому поводу, хочу поделиться с вами. Нажимайте на вкладки ниже что бы прочесть информацию до конца или просто пропустите этот блок, если он вам не интересный (перейти к следующему заголовку вывод миниатюр).

WordPress миниатюра записи нужна:

 

 

Вывод миниатюр wordpress

к менюДля вывода миниатюры wordpress вам нужно:

  1. Войти в админку блога.
  2. Зайти в редактор поста и выбрать картинку миниатюры WP.
  3. Сохранить запись с изменениями.
  4. В левом меню выбрать Внешний вид ->Редактор.
    вывод миниатюр wordpress
  5. В файлах index.php, page.php, search.php, archive.php выбрать место куда будет вставлен код вывода миниатюры.

Я вставил код сразу после вывода заголовка:

Где 170, 170 — размер миниатюры. После вставки кода не забывайте обновлять файлы.

Остается поэкспериментировать с оформлением. Откройте файл style.css и создайте класс .alignleft, например, используя такое оформление:

 

Миниатюра wordpress отсутствует в редакторе

к менюНе получается задать миниатюру WP: она отсутствует в редакторе? — не беда, читайте далее и я расскажу вам как решить эту проблему.

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

Решить эту проблему можно довольно просто, вам достаточно открыть файл functions.php вашей темы и в самое начало, страницы закинуть вот такой код:

Сохраняем файл. Теперь можем обратно войти в редактор поста и мы там уже должны увидеть возможность задать миниатюру.

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


Возникли проблемы? — вы всегда можете задать свой вопрос в комментариях или в разделе Вопрос/Ответ.

 

Ссылка на миниатюру поста в wordpress

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

Как получить ссылку на картинку заданного размера

Для этой задачи существует волшебная функция wp_get_attachment_image_src (будет открыта в новой вкладке).

Я это делаю вот так:

Теперь переменная $large_image_url будет хранить такие данные:

Предположим что нам нужно получить ссылку на полный размер миниатюры для последующей ее обработки. Для это, нам нужно изменить параметр ‘thumbnail’ на ‘full’, вот так приблизительно это будет выглядеть:

В результате, получим все ту же ссылку на нулевом месте массива: $large_image_url[0].

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

 

Размер миниатюры wordpress

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

Способы задать размер миниатюры вордпресс:

Более подробно о том, как изменить размер миниатюры wordpress можно прочесть по этой ссылке.

Как проверить есть миниатюра или нет


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

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

 

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

В качестве спасибо можно поделится этим постом со своими друзьями в соц. сетях:

help-wp.ru

Фильтр post_thumbnail_size

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

$size
(строка|массив) — аналогичен параметру $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-код с тегом <img>
, допустим, нам нужен только URL. В таком случае:

misha.blog

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

Ситуация: я добавляю короткий код, который в основн.
#x442;е с заголовком / ссылкой / эскизом. Стандартный материал. Код ниже дает мне проблемы.

  • Получение изображений в RSS Reader
  • Как использовать другой размер изображения для персонализированного типа сообщения?

  • Фотографии специального назначения с каждым сообщением
  • Загрузка изображения Ajax с помощью media_handle_upload и form.js
  • Включить изображение, но не показывать его?
  • Получение только URL-адреса эскиза сообщения
if( has_post_thumbnail() ) { $recipes .= get_the_post_thumbnail(); } 

Переме&#x.
;оротким кодом.

Редактировать с дополнительной информацией . Вышеприведенный код находится в пределах Loop, при этом пользовательский запрос ограничивает получаемые сообщения только теми, что указаны в cpt.

Вся другая информация о сообщении get_the_post_thumbnail()
правильно, но ни get_the_post_thumbnail() ни the_post_thumbnail() ничего не возвращает. has_post_thumbnail() прикреплена к этим сообщениям в admin, has_post_thumbnail() возвращает true, и даже get_post_thumbnail_id() работает так, как ожидалось. Эскиз определенно существует.

Я попытался изменить свой запрос, чтобы получать регулярные сообщения, а не пользовательский тип сообщения, а миниатюры внезапно работали нормально, поэтому он имеет какое-то отношение к cpt. Я попытался сделать $ post global и даже вручную добавить идентификатор сообщения в качестве параметра. Нет эффекта.

На данный момент я просто использую wp_get_attachment_url( get_post_thumbnail_id() ) как обходной путь, но это сводит меня с ума, не зная, что случилось.

Какую смешную ошибку я сделал?

Вещи, которые я пробовал:

  • Отключение всех других плагинов, изменение темы (ов) по умолчанию
  • Ввод вручную допустимого идентификатора сообщения cpt в качестве параметра для get_the_post_thumbnail()
  • global $post; и используя идентификатор из этого

Solutions Collecting From Web of «get_the_post_thumbnail () возвращает пустую строку в пользовательском типе сообщения»

www.wordpressask.com

Всем привет! Сегодня на seo-mayak.com урок на тему: миниатюра записи в анонсе WordPress. Заодно мы разберем работу функции the_post_thumbnail() и поговорим о размерах миниатюр.

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

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

miniatiura zapisi

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

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

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

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

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

Размеры изображений WordPress

В настройках WordPress ( Настройки -> Медиафайлы ) по умолчанию заданны следующие размеры:

Размер миниатюры — 150х150 пикселей;
Средний размер — 300х300 пикселей;
Крупный размер — 640х640 пикселей;
Исходный размер не задается.

Каждому указанному размеру WordPress присваивает обозначение или название, как угодно:

150х150 — thumbnail;
300х300 — medium;
640х640 — large;
Исходный размер — full.

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

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

В данной ситуации есть два решения.

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

Решение №2. Можно обойтись без перезаливки изображений, тем самым забив на рекомендации PageSpeed и изменить размеры в самой функции.

Итак, самое время познакомить Вас с функцией вывода изображений, которая называется the_post_thumbnail().

Функция the_post_thumbnail()

Скажу сразу, функция the_post_thumbnail() — это тег шаблона, который работает только внутри цикла WordPress.

На заметку! Функция the_post_thumbnail() работает на основе get_the_post_thumbnail().

Единственное отличие функции the_post_thumbnail() от get_the_post_thumbnail() в том, что в ней нельзя указать ID записи, в качестве параметра, так как функция всегда берет миниатюру с текущего поста в цикле.

Функция the_post_thumbnail() может принимать один или два параметра. Первым параметром всегда идет размер изображения, например:

<?php the_post_thumbnail('medium'); ?>  

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

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

<?php the_post_thumbnail(array(50,50)); ?>

Где 50,50 — новые размеры для миниатюры.

Вторым параметром функция может принимать CSS класс, например:

<?php the_post_thumbnail('medium', array('class' => 'miniature')); ?>  

В файле style.css, для класса .miniature, можно прописать следующие стили:

.miniature{   background: #D2D2D2; /* задний фон */   border: 1px solid #888888; /* рамка */   border-radius: 8px; /* закругление углов */   float: left; /* Выравнивание по левому краю */   height: 181px; /* Высота изображения */   width: 250px; /* Ширина изображения */   margin-bottom: 5px; /* Внешний отступ снизу */   margin-right: 15px; /* Внешний отступ справа */   padding: 5px; /* Внутренние отступы */   }  

Вы наверное поняли, что стили, которые я привел выше, были применены на моем блоге и конечно Вы их можете изменить на свое усмотрение. Для работы со стилями советую пользоваться расширением Firebug.

Но прописывать свой CSS класс в функции вовсе не обязательно, так как всем миниатюрам, созданными функцией get_the_post_thumbnail(), WordPress присваивает общий класс .wp-post-image, но кроме того, миниатюры получают отдельный класс, в зависимости от их размера:

.attachment-thumbnail — размер миниатюры;
.attachment-medium — средний размер;
.attachment-large — крупный размер;
.attachment-full — исходный размер.

Итак, с функцией и ее параметрами мы немного разобрались, осталось выяснить, как с помощью the_post_thumbnail() миниатюра записи выводится в анонс.

seo-mayak.com

Getting the thumbnail

These functions are commonly used during the loop, because with the_post() it gives us access. Though they can be used anywhere, in custom loops or custom post types, with a minor change.

Everywhere the_post_thumbnail() is mentioned it can equally be replaced with echo get_the_post_thumbnail(). It depends on your preferences.

Inside the loop

while ( have_posts() ) : the_post();   the_post_thumbnail();  endwhile; 

Inside a custom post type

Inside a custom post type is very much like the loop, however, we have to call the_post() on the WP_Query object.

$custom_post_type = new WP_Query( array(  'post_type' => 'portfolio',  'post_status' => 'publish',  'posts_per_page' => -1, ) );  while ( $custom_post_type->have_posts() ) : $custom_post_type->the_post();   the_post_thumbnail();  endwhile; 

Getting the thumbnail URL

Sometimes you may want to get the image src to use it for an inline style. You have access to an array which will return the URL, width, and height.

Everywhere the_post_thumbnail() is mentioned it can equally be replaced with echo get_the_post_thumbnail(). It depends on your preferences.

Inside the loop

while ( have_posts() ) : the_post();   the_post_thumbnail_url();  endwhile; 

Inside custom post type

Very similar, again, we need to make sure we set up the template tags.

$custom_post_type = new WP_Query( array(  'post_type' => 'portfolio',  'post_status' => 'publish',  'posts_per_page' => -1, ) );  while ( $custom_post_type->have_posts() ) : $custom_post_type->the_post();   the_post_thumbnail_url();  endwhile; 

Without using helper functions

Setting up the post template tags is much more convenient, however, for completeness you can do it without those. However, it does give you access to a few more attributes this way.

The loop

while ( have_posts() ) : the_post();   $image = wp_get_attachment_image_src($post_id);  $image_url = $image[0];  $image_width = $image[1];  $image_height = $image[2];  endwhile; 

Custom post type

$custom_post_type = new WP_Query( array(  'post_type' => 'portfolio',  'post_status' => 'publish',  'posts_per_page' => -1, ) );  while ( $custom_post_type->have_posts() ) : $custom_post_type->the_post();   $image = wp_get_attachment_image_src($custom_post_type->ID);  $image_url = $image[0];  $image_width = $image[1];  $image_height = $image[2];  endwhile; 

Inside functions.php or outside of a loop

Outside of a loop we don’t have access to the_post(). So using setup_postdata() is a close equivalent of doing that. Which gives us access to the template tag functions. You won’t need to do this frequently, but it is handy for certain situations.

Custom function for use in single posts

function custom_post_thumbnail() {  global $post;  setup_postdata($post);   the_post_thumbnail(); } 

Usage

It can then be used like any other function in your template, in or out of the loop.

custom_post_thumbnail(); 

You could also add an action to your template.

In single.php or another template

do_action('before_single_post_loop');  while ( have_posts() ) : the_post();   // Post content  endwhile; 

Addition to custom function

function custom_post_thumbnail() {  global $post;  setup_postdata($post);   the_post_thumbnail(); }  add_action('before_single_post_loop', 'custom_post_thumbnail'); 

That’s it

These are all the ways that I’ve come across to add a post thumbnail. Are there any I have forgot? Let me know on twitter.

iamsteve.me

Функция wp_get_attachment_image_src

Используется для получения информации о картинках-вложениях. Ее синтаксис следующий.

Где $attachment_id — ID вложения, $size — требуемый размер картинки (thumbnail, medium, large, full и др.), $icon — должно ли изображение использоваться как иконка.

После выполнения функция возвращает 4 параметра:

  1. ссылку на картинку (тот самый thumbnail url, что мы ищем);
  2. ширину изображения;
  3. высоту изображения;
  4. true|false значение в зависимости от того представляет ли файл вложения сгенерированную картинку или полноразмерную, загруженную пользователем.

Кроме того, если функция не нашла соответствующее изображение, она возвращает значение false.

Самый простой пример ее использования:

Здесь считывается картинка-вложение с ID = 3. Если она найдена, то ссылка, а также ее размеры вставляются в простой HTML код вывода картинки через img.

Итого. Получить в wordpress ссылку на миниатюру можно с помощью функции wp_get_attachment_image_src, которая кроме thumbnail url передает также ширину/высоту изображения.

wordpressinside.ru

Categories

hitchhackerguide.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector