Как вывести миниатюр wordpress

Работа с миниатюрами записи в WordPress

Миниатюра записи – это прикрепленная превью картинка, к анонсу записи в WordPress. В полной записи, этой картинки может и не быть или у неё будут другие размеры. Миниатюра и обычное изображение записи (контент статьи) – это не одно и тоже.

Как убрать миниатюру из записи

Если в админке WordPress вы откроете какую-нибудь запись, то в правом сайдбаре, увидите бокс – Изображение записи. Бокс содержит саму миниатюру, кнопку заменить изображение и ссылку Удалить изображение записи. Нажимаете на ссылку и миниатюра удалится только из записи, но не из медиа-библиотеки.

Как вывести миниатюру записи

Что делать, если WordPress не выводит миниатюры к записям? В правом сайдбаре админки нет бокса Изображение записи. Для вывода превью-картинок, нужно в functions.php включить поддержку миниатюры записи.

function twentynineteen_setup() <
add_theme_support(‘post-thumbnails’);
>
add_action( ‘after_setup_theme’, twentynineteen _setup’ );

Пока что мы видим миниатюру записи только в админке. Для вывода её на сайте, нужно внутри цикла в файлах темы добавить функцию the_post_thumbnail(). Эта функция выводит html код изображения миниатюры и вставляет его вместо статичного тега img.

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

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

Как запретить создавать дубли изображений

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

В медиа настройках убираем генерацию среднего и крупного размера, прописав им нули. Размер 150×150 удалять не рекомедуется, поскольку он используется для превьюшек в медиа-библиотеки админки WordPress.

WordPress втихаря генерирует ещё один размер medium_large. Отключить его можно двумя способами:

Вставить хук в functions.php

add_filter( ‘intermediate_image_sizes’, ‘delete_intermediate_image_sizes’ );
function delete_intermediate_image_sizes( $sizes ) <
return array_diff( $sizes, array(
‘medium_large’,
) );
>

Зайти прямо по адресу your_domain/wp-admin/options.php и сделать как на скриншоте.

Как изменить размер миниатюры

WordPress предусмотрел возможность изменять размер миниатюр.

В настройках медиафайлов, просто меняете размеры на нужные вам. В админке указаны три стандартных размера: 150×150, 300×300 (medium) и 1024×1024 (large). WordPress создаст миниатюру с новыми указанными размерам по самой широкой стороне, сохраняя пропорции.

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

Передадим три параметра: название, ширину и высоту.

//добавим в function.php
add_image_size( ‘new-thumb’, 50, 50 );

// выведем свою миниатюру записи в index.php
the_post_thumbnail(‘new-thumb’);?>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Работа с миниатюрами в WordPress

Были времена, когда WordPress не умел работать с миниатюрами (thumbnails). Завершилась эта эпоха в конце 2009 года, когда впервые в движке WordPress появилась их поддержка. Сегодня WordPress предлагает богатый функционал работы с миниатюрами.

Как включить поддержку миниатюр в шаблоне WordPress

Для поддержки миниатюр в шаблоне сайта, в файл functions.php надо добавить следующий php код:

Как добавить миниатюры к произвольному типу записей

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

где news — тип произвольной записи.

Как вывести миниатюры на странице

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

Значение thumbnail, которое указано в скобках для функции the_post_thumbnail может иметь следующий вид: thumbnail, medium, large, full. Это названия размеров изображений, которые генерирует WordPress по умолчанию.

Добавляем новые размеры к изображениям

Если нужно добавить отдельный вид размеров, со своим названием, то это делается следующим php кодом в файле functions.php:

И чтобы вывести в шаблоне сайта именно это изображение, в функции the_post_thumbnail нужно указывать своё новое название:

Удаление автоматически-создаваемых миниатюр

Обрезка миниатюр в WordPress

Разберем следующий php код:

‘new_size’ — название размера
«400, 300» — ширина и длина
«true» — пропорции картинки будут обрезать ровно.

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

В чем различие true и false?

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

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

Если же не указывать true, то изображения могут быть разных пропорций и не всегда это будет смотреться гармонично. Если хочется заморачиваться, это можно исправить добавив к изображению лишний фон по вертикали или диагонали, чтобы привести картинку к определенным пропорциям, например: 3:2 или 4:3. Фон добавляется в Photoshop или любом другом редакторе.

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

Сжатие изображений на сайте

По умолчанию WordPress сжимает уменьшенные копии JPEG изображений (качество 90%). Степень сжатия можно регулировать добавив эту настройку в файл function.php:

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

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

Комментарии к статье “ Работа с миниатюрами в WordPress ” (6)

• 

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

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

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

• 

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

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

• 

Синтаксис php у вас в коде нарушен, вы не сделали конкатенацию в строке. Должно быть так:

Там же я поменял id на $post->ID.

Возможно перед кодом нужно будет также поставить:

К сожалению, более подробно проверить ваш код некогда. Но движетесь вы вроде в правильном направлении)

• 

Спасибо Вам огромное!! Все заработало!
С синтаксисом у меня большие проблемы, т.к. сама все изучаю)

• 

Так или иначе все с азов начинают. Рад был помочь )

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

Если возникнут вопросы пишите на электронную почту.

Источник

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

Источник