WordPress вывести только изображения

Описание тонкостей по выводу миниатюры записи 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. Помимо описанных здесь действий, можно также организовать вывод миниатюры по умолчанию для всех постов, разместить на ней любую подпись или даже добавить несколько разных картинок к одной статье.

Источник

Качественный вывод изображений на 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 на всю читаемую область, но в данной статье об этом касаться не будем.

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

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

Источник

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

Миниатюры

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

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

Источник