Как изменить превью сайта wordpress - Исправление ошибок и поиск оптимальных решений проблем

Чуть больше практики по работе с миниатюрами WordPress в моём видеоуроке.

Потрясающая фишка в WordPress!

Начну с нуля. Итак, для начала вы должны понять разницу между миниатюрами и обычными изображениями из поста. Миниатюра — это что-то вроде превьюшки к посту, в самом посте она может даже и не использоваться.

Предположим, у вас есть какая-то категория, и на странице этой категории перед некоторыми записями (а может быть и перед каждой) есть какая-то картинка, которая по сути и является превьюшкой поста, т.е. миниатюрой. Если мы перейдем на страницу одной из записей, то можем найти эту картинку в её содержимом, а можем и не найти.

В общем ладно, в двух словах, миниатюра — это изображение-превью к постам, которое:

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

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

Шаг 1. Включение поддержки миниатюр для вашей темы WordPress

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

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

add_theme_support( 'post-thumbnails' ); // для всех типов постов

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

add_theme_support( 'post-thumbnails', array( 'post' ) );

или только для страниц (page):

add_theme_support( 'post-thumbnails', array( 'page' ) );

или только для записей и только для страниц:

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

Можно ли назначить миниатюру таксономии WordPress?

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

Шаг 2. Как установить миниатюру для поста?

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

Способ 1. Метабокс «Миниатюра записи»

Он вот такой:

Имейте ввиду, что даже если метабокс у вас подключен, он может не отображаться на странице редактирования поста. Как включить его отображение?

Для начала посмотрите в правую верхнюю часть страницы (возможно ее потребуется проскроллить к началу). Там должна быть вот такая вкладка Настройки экрана:

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

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

Способ 2. Кнопка «Добавить медиафайл»

Итак, переходим на страницу редактирования поста и нажимаем кнопку Добавить медиафайл:

В появившемся окне кликаем по ссылке Задать миниатюру:

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

Шаг 3. Выводим миниатюры постов на страницах сайта

То, как мы будем выводить миниатюры в данном случае может во многом зависеть от вашего шаблона WordPress. Чаще всего, во многих темах WordPress миниатюры в основном выводятся вместе с тегом <img> сразу. Но что, если нам надо получить URL миниатюры?

Рассмотрим оба случая.

the_post_thumbnail() и get_the_post_thumbnail(). Стандартный способ вывода миниатюр.

Функции the_post_thumbnail() и get_the_post_thumbnail() имеют несколько отличий:

get_the_post_thumbnail()	the_post_thumbnail()
Возвращает миниатюру поста в виде HTML-тега `<img>`, возвращаемый HTML-код можно использовать в других функциях или записать в переменную.	Выводит миниатюру поста, является эквивалентом для: echo get_the_post_thumbnail( null );
Позволяет в качестве первого параметра указать ID поста, миниатюру которого нужно получить.	При помощи этой функции можно вывести только миниатюру текущего поста из цикла.
В качестве второго параметра можно указать размер получаемой миниатюры, по умолчанию — размер, заданный в Параметры > Медиафайлы.	В качестве первого параметра можно указать размер выводимой миниатюры.

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

<?php
while( have_posts() ) : the_post();
	?>
	<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
	<a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail() ?></a>
	<?php
endwhile;

Этот пример выводит заголовки (функция the_title()) и миниатюры постов со ссылками (функция the_permalink()) на сам пост.

Тот же самый пример для функции the_post_thumbnail():

<?php
while( have_posts() ) : the_post();
	?>
	<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
	<a href="<?php the_permalink() ?>"><?php the_post_thumbnail() ?></a>
	<?php
endwhile;

Получение URL миниатюры при помощи функции wp_get_attachment_image_src() и get_post_thumbnail_id()

Функция wp_get_attachment_image_src() нужна для получения параметров изображения — его URL, ширины и высоты (в данном случае нам будет интересен именно URL). Она не работает в цикле и её обязательным параметром является ID вложения (ID миниатюры в данном случае).

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

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

$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' ); // возвращает массив параметров миниатюры
echo $thumbnail_attributes[0]; // URL миниатюры

Как видите, в качестве второго параметра мы также можем указать размер получаемого изображения в виде строки ( один из зарегистрированных размеров, например thumbnail, medium, large, full и т.д.) или в виде массива array( 100, 100 ). Чтобы миниатюры на сайте получались качественными, задавайте соответствующие размеры.

Как выбрать область обрезки миниатюры?

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

Для того, чтобы вы смогли сами выбирать область картинки для отображения на сайте, установите себе плагин Manual Image Crop. Этот плагин позволяет для каждого загруженного изображения для его каждого размера вручную установить область, отображаемую на сайте. Потрясающий инструмент!

Миша

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

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

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

inet.ws - Powerful VPS around the World!

Решение для WordPress: восстановить миниатюры. Это означает сброс размеров вашего изображения в основных настройках WordPress. Такой сброс можно быстро сделать с помощью плагина.

В этом посте мы покажем, как исправить проблемы с изображениями с помощью плагина WordPress Regenerate Thumbnails и вручную с помощью WP-CLI.

Что происходит с вашими изображениями

Чтобы понять, как регенерировать миниатюры в WordPress, важно знать, как обрабатываются изображения и размеры изображений.

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

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

Варианты размеров по умолчанию:

Миниатюры – 150 x 150 пикселей.
Средний – 600 x 600 пикселей.
Большой – 1024 x 1024 пикселей.

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

Но старые изображения, которые вы ранее загрузили, тема не изменит.

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

Решение состоит в том, чтобы регенерировать миниатюры.

Как изменить размер миниатюр в WordPress (3 метода)

Если вы хотите изменить размер миниатюры или изображения, есть три основных способа:

1. Изменить размеры изображений в вашей теме

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

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

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

2. Обрезать изображения в медиатеке

Другой вариант – изменить размер изображений, обрезав их в мультимедийной библиотеке.

Шаг 1

Перейдите в Медиа> Библиотека на панели администратора WordPress.

Кликните на изображение, размер которого нужно изменить.

Во всплывающем окне нажмите кнопку Изменить изображение.

Чтобы отредактировать его, нажмите кнопку редактирования.

Шаг 2

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

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

Если вы хотите точно обрезать изображение, вы можете отрегулировать соотношение сторон, указав нужное соотношение. Например, 1:1 для квадратного изображения, или 4: 3, 16: 9 и любые другие необходимые соотношения.

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

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

Или можно сделать выбор, а затем ввести точный размер изображения в пикселях в поле Выбор под изображением Crop справа.

Теперь жмите Обрезать и Сохранить.

Шаг 3

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

Введите желаемый размер изображения и нажмите Масштаб.

У вас есть несколько вариантов изменения размера изображения.

Шаг 4

Выберите, к каким стандартным размерам изображения вы хотите применить изменения:

Все размеры изображений.
Миниатюры.
Все размеры, кроме миниатюр.

Смотрите также:

Как добавить папки в медиатеку WordPress.

3. Изменить размер изображения в настройках мультимедиа

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

Шаг 1

На панели администратора перейдите в Настройки>Медиа.

Шаг 2

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

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

Шаг 3

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

Сохраните изменения, нажав кнопку в нижней части страницы.

Как регенерировать миниатюры в WordPress

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

Один из самых простых способов – использовать бесплатный плагин WordPress Regenerate Thumbnails. Он быстро исправит ранее загруженные изображения.

Важно: плагин Regenerate Thumbnails совместим с WooCommerce.

Шаг 1

Установите и активируйте плагин Regenerate Thumbnails.

В Инструменты> Regenerate Thumbnails находятся настройки, связанные с изображениями WordPress.

Шаг 2

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

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

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

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

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

Шаг 3

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

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

Когда процесс будет завершен, вы увидите сообщение «Все готово!».

Теперь ваши миниатюры и изображения должны быть восстановлены.

Как принудительно регенерировать миниатюры

В качестве альтернативы можно использовать плагин Force Regenerate Thumbnails. Как следует из названия, он подталкивает к регенерации миниатюр, удаляя старые размеры изображений, поэтому WordPress вынужден регенерировать изображения. Этот плагин также совместим с плагином WooCommerce.

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

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

Но, если у вас возникли проблемы, вы можете попробовать Force Regenerate Thumbnails.

Шаг 1

Чтобы заставить WordPress восстанавливать миниатюры, установите и активируйте плагин Force Regenerate Thumbnails.

Перейдите в Инструменты> Принудительное повторное создание миниатюр в панели администратора WordPress.

Шаг 2

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

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

Восстановление определенных изображений

Частная ситуация: вам не нужно восстанавливать все миниатюры, а только некоторые конкретные. Если плагин Regenerate Thumbnails все еще установлен, вы можете это сделать так:

Шаг 1

Перейдите в Медиа> Библиотека. В представлении сетки щелкните конкретное изображение.

По умолчанию медиа-библиотека отображается в виде сетки.

Шаг 2

Затем справа нажмите кнопку Восстановить миниатюры.

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

Смотрите также:

Как автоматически добавлять альтернативный текст в изображения WordPress

Регенерирация миниатюр с помощью WP-CLI

Если вы предпочитаете не использовать плагин, есть другое решение для WordPress: регенерируйте миниатюры без плагина, сделав это вручную с помощью WP-CLI.

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

Восстановление миниатюр с помощью WP-CLI – намного лучший вариант по сравнению с использованием плагина WordPress. Он быстрее и не подчиняется ограничениям и тайм-аутам HTTP.

Основная команда для восстановления миниатюр приведена ниже:

wp media regenerate

После его ввода подтвердите, что хотите восстановить все миниатюры, нажав на клавиатуре букву «y» вместо «да».

Восстановите все эскизы с помощью WP-CLI

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

wp media regenerate --yes

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

Регенерация определенных эскизов с помощью WP-CLI

Есть возможность повторно создать определенные миниатюры с помощью WP-CLI и идентификаторов изображений, которые вы хотите обновить.

Вот как это сделать:

wp media regenerate 12 34 567

Просто не забудьте заменить три примера идентификаторов – «12», «34» и «567» – на фактические идентификаторы конкретных изображений, которые вы хотите восстановить.

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

Приятно знать, что для WordPress есть два быстрых решения регенерировать миниатюры. Это можно сделать в несколько кликов с помощью плагина Regenerate Thumbnails. Или используйте WP-CLI, тогда вы закончите работу быстрее, чем приготовится чашечка кофе.

Источник: kinsta.com

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Источник

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

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

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

photo.jpg
photo-150×150.jpg
photo-300×126.jpg
photo-672×360.jpg

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

Настройки размеров изображений в WordPress

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

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

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

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

Плагин Regenerate Thumbnails

Популярный плагин Regenerate Thumbnails позволяет обновить или перегенерировать все размеры изображений для всех существующих файлов в медиатеке WordPress. Сделать это можно в разделе Инструменты → Regen. Thumbnails:

Обновить миниатюры для всех файлов в WordPress

Если вы хотите обновить размеры только для определенных изображений в медиатеке WordPress, сделать это можно в разделе Медиафайлы → Библиотека. В настоящий момент плагин Regenerate Thumbnails работает только в режиме списка:

Обновить размеры для одного файла

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

Альтернативы

Обновить все размеры изображений можно командой wp media regenerate если вы используете утилиту WP-CLI. Сгенерировать размеры «по требованию» позволит плагин Dynamic Image Resizer, а с помощью модуля Photon популярного плагина Jetpack можно генерировать размеры «на лету» с помощью CDN-сервисов сети WordPress.com.

В самом ядре WordPress также появится возможность генерировать размеры изображений «на лету». Следить за развитием данного функционала можно в баг-трекере WordPress.

Подписаться на рассылку

Подписаться →
Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!

Вступление

Уже давно на WordPress можно в редакторе задавать “Изображение записи”. Эта миниатюра отображается рядом с анонсом статьи. В шаблонах WordPress прописаны размер миниатюры и ее расположение по отношению к тексту анонса. А раз они прописаны, значит, их можно поменять.

Как изменить размер и расположение миниатюры WordPress вы узнаете их этой статьи.
Обращу ваше внимание, что в статье будем пытаться изменить размер и расположение миниатюры Wordpress непосредственно в текущем шаблоне. В файлах шаблона миниатюра прописывается, как Thumbnail. Чаще всего, миниатюра показывается слева от анонса статьи. Размер может быть разный, чаще от 100 на 100 px.

Размер миниатюры можно изменить

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

Изменить размер миниатюры можно в файле шаблона, в который входит тег вывода анонса статьи. Скорее всего это будет content.php. В административной части сайта открываем редактор. В файле content.php ищем (слово поиска: thumbnail) код содержащий функцию вывода на экран html код картинки:

<?php the_post_thumbnail( $size, $attr ); ?>

Например такого вида:

<?php if(has_post_thumbnail()) {
 echo '<span class="thumbnail"><a href="'; the_permalink(); echo '">';
the_post_thumbnail(array(100,100)); echo '</a></span>';
 }
 the_excerpt(); } ?>

Меняем значения [100,100] на нужный нам размер Миниатюры. На фото пример замены размера миниатюры записи с 100×100 px на 200×200 px.

Изменить отображение миниатюры по отношению к тексту анонса

Изменить размер и расположение миниатюры WordPress можно редакцией таблицей стилей шаблона. Для этого открываем Редактор. Ищем файл style.css (Таблица стилей). В файле ищем секцию: /* Images */. В секции ищем код, опять со словом thumbnail.


.entry-summary .thumbnail img {
	float: none;
	margin-right: 10px;
	max-width: 100px;
	max-height: 100px;
	padding: 3px;
	width: expression(document.body.clientWidth 
< 742? '200px' : document.body.clientWidth > 1000? '200px' : 'auto');
}

И меняем Значение свойства float:

float:left | right | none

На выбор вставляем одно из значений: left | right | none ( левое | правое | нет ).

Также меняем значения в секции ниже, в соответствии с тем, что установили в файле Loop-singl.php.

max-width: 100px; меняем на нужный размер;
max-height: 100px; меняем на нужный размер.

Не забываем сохраниться.

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

Размеры миниатюр в файле function.php

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

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

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

if ( function_exists( 'add_theme_support' ) ) { 
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true );

Причем изображение будет обрезаться (true). Код вставляется в файл function.php.

Вывод

На этом все! Надеюсь эти старенькие советы помогут изменить размер и расположение миниатюры WordPress.

www.wordpress-abc.ru

Еще статьи

Что такое миниатюра wordpress и где ее можно использовать?

Миниатюра wordpress — это уменьшенная копия изображения на сайте, использующем для администрирования движок wordpress, по другому ее можно назвать превью изображения или мини картинка.

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

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

Проверка поддержки миниатюры wordpress темой.

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

Если миниатюры wordpress подключены, то в правой колонке мы увидим окошко под названием «Миниатюра записи», со ссылкой «Задать миниатюру».

Если этого окошка мы не видим, следует проверить отсутствие возможности добавлять миниатюру в настройках экрана. Для этого, в правом верхнем углу, необходимо кликнуть на вкладку «Настройки экрана». И проверить отсутствие пункта «Миниатюра записи».

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

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

Подключение миниатюры wordpress и вывод ее в анонсе статьи.

Чтобы подключить миниатюры wordpress к нашей теме, необходимо в админке, или с помощью текстового редактора NotePad++, открыть файл functions.php и в самом низу, перед ?>, добавить следующий код:

add_theme_support( 'post-thumbnails' );

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

А как теперь использовать ее в анонсе статьи? Чтобы вывести миниатюру на главной странице, необходимо прописать в файле index.php или loop.php, в нужном месте код:

<?php the_post_thumbnail(); ?>

Если вы испытываете затруднения в поиске нужного места, то просто найдите вот такой код:

<?php the_content(); ?>

Или же, такой:

<?php the_excerpt(); ?>

И перед ним вставьте код вывода миниатюры wordpress.

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

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>

Немного подробнее о том, из чего состоит данный код:

1. открывающий тег <a>, и закрывающий </a> — тег предназначенный для создания ссылок. Именно он сделает миниатюру ссылкой.
2. href=»<?php the_permalink(); ?>» — ссылка на статью.
3. title=»<?php the_title(); ?>» — тайтл (заголовок) ссылки, который будет виден, при наведении на нее курсора. Берется из заголовка статьи.
4. <?php the_post_thumbnail(); ?> — функция вывода мини картинки.

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

img.wp-post-image{
здесь стили миниатюры
}

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

Параметры миниатюры wordpress.

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

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

the_post_thumbnail(); // стандартный вывод, без параметров, о котором мы говорили выше.
the_post_thumbnail('thumbnail'); // уменьшенная копия изображения (по умолчанию 150px x 150px). Есть возможность настройки из админки, но при этом размер не должен превышать 150px
the_post_thumbnail('medium'); // средний размер (по умолчанию 300px x 300px). Возможность настройки из админки.
the_post_thumbnail('large'); // крупный размер (по умолчанию 640px x 640px). Возможность настройки из админки.
the_post_thumbnail('full'); // полный размер (оригинальный размер изображения).
the_post_thumbnail( array(100,100) ); // свои размеры. Возможно назначить любые размеры ширины и высоты.

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

И соответственно, для каждого параметра, есть свои селекторы, для файла стилей css.

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

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

Автоматическое назначение миниатюры wordpress и вывод ее в анонсе статьи.

А как быть, если на сайте довольно внушительный список контента и задавать миниатюру вручную, будет довольно проблематично. Для этого мы можем использовать другую функцию, которая автоматически будет создавать мини картинку из первого изображения статьи. Для этого, в файле functions.php, после ?> добавим функцию:

<?php
function catch_that_image() {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
 $first_img = $matches [1] [0];

 return $first_img;
}
?>

Теперь, чтобы вывести миниатюру в анонсе статьи, то есть на главной, открываем файл index.php или loop.php и добавляем код с функцией вывода миниатюры (функцию из предыдущего примера можно удалить), в то же место, что и при стандартном выводе:

<img title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" />

Теперь, немного разберемся, из чего состоит данный код.

1. Тег <img> — собственно именно этот тег и будет выводить картинку, так как сама функция только выдергивает ссылку на первое изображение из поста.
2. title=»<?php the_title(); ?>» — тайтл (заголовок) изображения, который можно увидеть при наведении курсора на миниатюру записи wordpress.
3. src=»<?php echo catch_that_image(); ?>» — ссылка на изображение, которое будет выводиться. Как можно заметить, именно здесь находится функция, которая и отвечает за ссылку на мини картинку.
4. alt=»<?php the_title(); ?>» — альтернативный текст изображения. В случаях, когда в браузере отключена загрузка изображений, будет появляться alt, как бы описывая, что здесь должно быть за изображение.
5. width=»150″ — задается ширина миниатюры. В данном случае изображение будет уменьшаться прямо пропорционально, ориентируясь на указанную ширину.

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

<?php the_content(); ?>

А чтобы данная ошибка исчезла, достаточно заменить его, на:

<?php the_excerpt(); ?>

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

Последнее, что мы можем сделать сегодня, это сделать миниатюру wordpress, ссылкой. Для этого, просто обернем код тегом <a> с ссылкой на статью:

<a href="<?php the_permalink(); ?>" ><img title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" /></a>

По использованию миниатюры wordpress в анонсе статьи, в принципе все. Но ведь нам еще может понадобится оформить внешний вид картинки, с помощью файла style.css. Возможно, у некоторых возникнет проблема, связанная с тем, какие селекторы использовать, для оформления.

Для оформления мини картинки, выводимой данным способом, можно просто добавить класс для тега <img>. Например, чтобы код выглядел так:

<a href="<?php the_permalink(); ?>" ><img class="mini" title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" /></a>

Здесь мы добавили класс mini, который выглядит так: class=»mini». Вы можете добавить любой другой. После данной манипуляции, стили для миниатюры можно будет прописать вот так:

img.mini{
здесь стили миниатюры
}

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

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

У меня на этом все. Удачи!

Источник

Что происходит с вашими изображениями

Варианты размеров по умолчанию:

Миниатюры – 150 x 150 пикселей.
Средний – 600 x 600 пикселей.
Большой – 1024 x 1024 пикселей.

Но старые изображения, которые вы ранее загрузили, тема не изменит.

Решение состоит в том, чтобы регенерировать миниатюры.

Если вы хотите изменить размер миниатюры или изображения, есть три основных способа:

1. Изменить размеры изображений в вашей теме

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

2. Обрезать изображения в медиатеке

Другой вариант – изменить размер изображений, обрезав их в мультимедийной библиотеке.

Шаг 1

Перейдите в Медиа> Библиотека на панели администратора WordPress.

Кликните на изображение, размер которого нужно изменить.

Во всплывающем окне нажмите кнопку Изменить изображение.

Чтобы отредактировать его, нажмите кнопку редактирования.

Шаг 2

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

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

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

Теперь жмите Обрезать и Сохранить.

Шаг 3

Введите желаемый размер изображения и нажмите Масштаб.

У вас есть несколько вариантов изменения размера изображения.

Шаг 4

Выберите, к каким стандартным размерам изображения вы хотите применить изменения:

Все размеры изображений.
Миниатюры.
Все размеры, кроме миниатюр.

Смотрите также:

Как добавить папки в медиатеку WordPress.

3. Изменить размер изображения в настройках мультимедиа

Шаг 1

На панели администратора перейдите в Настройки>Медиа.

Шаг 2

Шаг 3

Сохраните изменения, нажав кнопку в нижней части страницы.

Как регенерировать миниатюры в WordPress

Важно: плагин Regenerate Thumbnails совместим с WooCommerce.

Шаг 1

Установите и активируйте плагин Regenerate Thumbnails.

В Инструменты> Regenerate Thumbnails находятся настройки, связанные с изображениями WordPress.

Шаг 2

Шаг 3

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

Когда процесс будет завершен, вы увидите сообщение «Все готово!».

Теперь ваши миниатюры и изображения должны быть восстановлены.

Как принудительно регенерировать миниатюры

Но, если у вас возникли проблемы, вы можете попробовать Force Regenerate Thumbnails.

Шаг 1

Чтобы заставить WordPress восстанавливать миниатюры, установите и активируйте плагин Force Regenerate Thumbnails.

Перейдите в Инструменты> Принудительное повторное создание миниатюр в панели администратора WordPress.

Шаг 2

Восстановление определенных изображений

Шаг 1

Перейдите в Медиа> Библиотека. В представлении сетки щелкните конкретное изображение.

По умолчанию медиа-библиотека отображается в виде сетки.

Шаг 2

Затем справа нажмите кнопку Восстановить миниатюры.

Смотрите также:

Как автоматически добавлять альтернативный текст в изображения WordPress

Регенерирация миниатюр с помощью WP-CLI

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

Основная команда для восстановления миниатюр приведена ниже:

wp media regenerate

Восстановите все эскизы с помощью WP-CLI

wp media regenerate --yes

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

Регенерация определенных эскизов с помощью WP-CLI

Вот как это сделать:

wp media regenerate 12 34 567

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

Алексей Шевченко

редактор wpcafe

Источник: hostenko.com/wpcafe

Источник

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

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

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

Содержание

Добавление изображения-превью для поста или страницы в WordPress
Проблема повторяющихся изображений в постах
Включение поддержки миниатюры в шаблоне
Заключение

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

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

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

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

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

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

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

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

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

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

get_template_part( 'template-parts/content', 'single' );

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

<?php twentysixteen_post_thumbnail(); ?>

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

<?php if (is_home() or is_category()) { twentysixteen_post_thumbnail(); } ?>

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

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

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

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

add_theme_support( 'post-thumbnails');

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

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 );

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

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

<? php the_post_thumbnail (); ?>

Заключение

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

Источник

When you change WordPress themes, your existing images may not be the right size.

The solution for WordPress? Regenerate thumbnails. This means resetting your image dimensions in WordPress core settings. It can also be done quickly by using a plugin.

In this post, we’ll dig deeper into the WordPress regenerate thumbnails solution as well as show you how to fix image issues with the Regenerate Thumbnails WordPress plugin and manually using WP-CLI.

Let’s start!

Prefer to watch the video version?

What Happens to Your Images

To figure out how to regenerate thumbnails WordPress-style, it’s essential to first understand how image and image sizes are handled.

WordPress has settings to automatically crop images that you upload. The settings can be found in the admin dashboard under Settings > Media.

WordPress will automatically crop your images.

On the Media Settings page, there are sizes for “thumbnails”, “medium,” and “large.” You can update the pixel count for each of them, as needed.

But, don’t forget to click Save Changes toward the bottom of the page if you do update the sizes.

Here are the default sizing options:

Thumbnails – 150 px x 150 px
Medium – 600 px x 600 px
Large – 1024 px x 1024 px

Keep in mind that the theme you’re using may have specific sizes for images that will override the options on the Media Settings page. If you switch to a new theme, the settings are updated to the sizes that the new theme has set.

But, older images you previously uploaded are unaffected.

This is where things get a little sticky. You need to be able to resize all the images you previously uploaded to conform to the new image sizes that were set. Unfortunately, there aren’t any settings to do that.

The solution is to do what’s referred to as “regenerate thumbnails.”

When you change WordPress themes, your existing images may not be the right size. 🤦‍♂️ The solution? Regenerate thumbnails. Learn more about this easy fix right here ⬇️Click to Tweet

How Do I Resize Thumbnails in WordPress? (3 Methods)

Before exploring how to regenerate thumbnails in WordPress, it’s important to note the ways you can resize images in the WordPress dashboard.

What’s possibly even more essential to note is these solutions won’t necessarily resize your older images so you’ll still need to go into WordPress, regenerate thumbnails without the help of a plugin, or otherwise use a plugin.

If you want to resize a thumbnail or image, there are three main ways to do it:

1. Changing the Image Sizes in Your Theme

Since your WordPress theme can modify the default image sizes, you can choose to switch themes or you can check to see if there are settings available that are specific to adjusting the image sizes.

Each theme is different so be sure to check the corresponding documentation to see if there’s a way you can change your theme’s image sizes without installing a different theme altogether.

Alternatively, you could choose to create a child theme and change the image sizes with PHP code.

2. Cropping Images in the Media Library

Another option is to change the size of your images by cropping them in the Media Library.

Step 1

Go to Media > Library in the WordPress admin dashboard.

You can change image sizes in the Media Library.

Then, click on a listed image that you want to resize.

In the pop-over, click the Edit Image button.

Click the button under the image to edit it.

Step 2

After that, you have several options to edit the image.

You can click on the image and drag your mouse over the image and let go when you have selected the area you want to keep. Then, you can click on Crop.

If you want to crop the image precisely, you can adjust the aspect ratio by entering the ratio you want.

For example, you can use 1:1 to create a square or you can use 4:3, 16:9, and any other ratio you want.

Then, hold down the shift key as you drag your mouse over the image. Let go when you have the part of the image selected that you want to keep. You can click on it and move the selection around so you can crop the exact part of the image you need.

You can also click and drag the corners of the selection if you didn’t get the size of the image that you wanted at first.

Or you can make a selection, then enter the exact size of the image you want in pixels in the Selection field under Image Crop on the right.

When you’re done, click Crop, then the Save button.

Step 3

If you’d rather resize the image instead of cropping it, you can scale the image in the settings on the right.

Enter the size of the image that you want, then click Scale.

You have several options available to resize your image.

Step 4

You can also choose which standard image sizes you want your changes to apply to under Thumbnail Settings.

You can choose to have your adjustments apply to:

All image sizes
Thumbnails
All sizes except thumbnails

3. Resizing Images in the Media Settings

This is helpful if you only need to edit one or two images, but if you want to resize all your images, it’s best to do this through the settings page.

Step 1

In your admin dashboard, go to Settings > Media.

You can adjust default image sizes on the Media Settings page.

Step 2

Enter the new dimensions you want for all the thumbnails, medium, or large images. Enter your desired width and height for just one type of image, or all of them, as needed.

If you want to resize thumbnails to a size that isn’t proportional, check the Crop thumbnail to exact dimensions box under the Thumbnail size section.

Step 3

Then, you can check the Organize my uploads into month and year-based folders box if you don’t want all your new images unorganized in the uploads folder.

When you’re happy with your adjustments, click the Save Changes button toward the bottom on the page.

How to Regenerate Thumbnails in WordPress

After changing these settings or changing themes, you’ll have to regenerate your thumbnails if images aren’t updated on your public-facing site, as previously mentioned.

One of the easiest ways is using the free WordPress plugin Regenerate Thumbnails to quickly fix your previously uploaded images.

This plugin is also compatible with WooCommerce.

Step 1

To start, install and activate the Regenerate thumbnails plugin.

Then, go to Tools > Regenerate Thumbnails, WordPress image-related settings being found here.

You can regenerate thumbnails, medium, and large image sizes as well.

Step 2

By default, the Skip regenerating existing correctly-sized thumbnails option is checked. Uncheck this box to use the Regenerate Thumbnails plugin to adjust all your images.

But, leave it checked if you want to save your server’s resources.

This is recommended if you already updated some of your image sizes such as through your theme. You can also choose to check the box underneath this option to Delete thumbnail files for old unregistered sizes. Selecting it frees up space on your server.

Make sure you don’t need these images before you choose this setting. If some of the images are in use on your site and you select this option, they’ll be deleted and will no longer be displayed on your site. Visitors will see a broken image.

You may also see the Update the content of posts to use the new sizes checkbox, which you can choose if you want the images that you’re currently using in your posts updated.

Step 3

After you chose the options you want, click the button to Regenerate Thumbnails, medium, large, and new file sizes included.

Then, wait for the process to complete. Depending on how many images you have on your site, this could take a while so grab a coffee or glass of water while you wait. It typically only takes a few minutes for larger websites on an high-performance server.

You’ll see the “All done!” message when the process is complete.

That’s it.

Your thumbnails and images should now be regenerated.

How to Force Regenerate Thumbnails

You can also use the Force Regenerate Thumbnails plugin as an alternative. As the name infers, it pushes the regeneration of thumbnails by deleting old image sizes so WordPress is forced to regenerate the images. This plugin is also compatible with WooCommerce online stores.

Keep in mind that at the time of publication, this plugin has not been updated for the last 3 major releases so use it with caution. Be sure to test it in a staging or local testing environment before you use it on your live website.

The reason why you would need to use this plugin over the Regenerate Thumbnails plugin is that the latter just resizes images, it doesn’t delete the old image sizes unless you check that option.

But, if you’re having trouble with it, you can give Force Regenerate Thumbnails a try.

Step 1

To force WordPress to regenerate thumbnails, install and activate the Force Regenerate Thumbnails plugin.

Then, go to Tools > Force Regenerate Thumbnails in the WordPress admin dashboard.

You can force-regenerate thumbnails in one click.

Step 2

To delete all images sized with the old settings and force WordPress to regenerate thumbnails, click the Regenerate All Thumbnails button.

Wait a while and your images will be resized. If you have a smaller site, this will take practically no time at all, but for larger sites with tons of images, this could take a few minutes.

Regenerating Specific Images

There could be use cases where you won’t need to regenerate all your thumbnails, but just some specific ones. With the Regenerate Thumbnails plugin still installed, you can do that as well. Here’s how.

Step 1

Go to Media > Library. In the grid view, click on a specific image.

By default, the Media Library is in grid view.

Step 2

Then on the right, click the Regenerate Thumbnails button.

You can regenerate thumbnails in the attachment details.

If you’re viewing the Media Library in the list view, click on the Regenerate Thumbnails link after hovering over the image that you want to regenerate.

Click the link to regenerate thumbnails in the list view.

Regenerate Thumbnails with WP-CLI

If you prefer not to use a plugin, there’s another solution for WordPress: Regenerate thumbnails without a plugin by doing so manually with WP-CLI.

Keep in mind that you need to have access to the command line on your server for this option.

Regenerating thumbnails using WP-CLI is a far superior option over using a WordPress plugin because it’s faster and isn’t subject to HTTP limitations and timeouts.

The basic command to regenerate thumbnails is below:

wp media regenerate

After entering it, confirm you want to regenerate all thumbnails by pressing the letter “y” for “yes” on your keyboard.

Regenerate All Thumbnails with WP-CLI

Once you have fired up the command line, you can enter the following command for WordPress to regenerate thumbnails without a plugin in a matter of seconds:

wp media regenerate --yes

With this command, thumbnails will be regenerated without having to manually confirm it.

Regenerate Specific Thumbnails Using WP-CLI

You also have the option to regenerate specific thumbnails using WP-CLI and the IDs of the images you want to update.

Here’s the command to do that:

wp media regenerate 12 34 567

Just be sure to replace the three example IDs – “12,” “34,” and “567” – with the actual IDs of the specific images you want to regenerate.

You can include as many IDs as you want. Just be sure to separate each of them with a space.

Learn to quickly fix your WordPress images after changing your theme with this guide 🚀Click to Tweet

Summary

It can be frustrating to see that your images aren’t displayed properly when you switch themes.

Fortunately, there are two quick solutions for WordPress. It can be done in a few clicks with the help of the Regenerate Thumbnails plugin. Or, you could use WP-CLI to finish in less time than it takes to make a coffee.

Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:

Easy setup and management in the MyKinsta dashboard
24/7 expert support
The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
An enterprise-level Cloudflare integration for speed and security
Global audience reach with up to 35 data centers and 275 PoPs worldwide

Test it yourself with $20 off your first month of Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.

Источник

When you change WordPress themes, your existing images may not be the right size.

The solution for WordPress? Regenerate thumbnails. This means resetting your image dimensions in WordPress core settings. It can also be done quickly by using a plugin.

Let’s start!

Prefer to watch the video version?

What Happens to Your Images

To figure out how to regenerate thumbnails WordPress-style, it’s essential to first understand how image and image sizes are handled.

WordPress has settings to automatically crop images that you upload. The settings can be found in the admin dashboard under Settings > Media.

WordPress will automatically crop your images.

On the Media Settings page, there are sizes for “thumbnails”, “medium,” and “large.” You can update the pixel count for each of them, as needed.

But, don’t forget to click Save Changes toward the bottom of the page if you do update the sizes.

Here are the default sizing options:

Thumbnails – 150 px x 150 px
Medium – 600 px x 600 px
Large – 1024 px x 1024 px

But, older images you previously uploaded are unaffected.

The solution is to do what’s referred to as “regenerate thumbnails.”

When you change WordPress themes, your existing images may not be the right size. 🤦‍♂️ The solution? Regenerate thumbnails. Learn more about this easy fix right here ⬇️Click to Tweet

How Do I Resize Thumbnails in WordPress? (3 Methods)

Before exploring how to regenerate thumbnails in WordPress, it’s important to note the ways you can resize images in the WordPress dashboard.

If you want to resize a thumbnail or image, there are three main ways to do it:

1. Changing the Image Sizes in Your Theme

Since your WordPress theme can modify the default image sizes, you can choose to switch themes or you can check to see if there are settings available that are specific to adjusting the image sizes.

Each theme is different so be sure to check the corresponding documentation to see if there’s a way you can change your theme’s image sizes without installing a different theme altogether.

Alternatively, you could choose to create a child theme and change the image sizes with PHP code.

2. Cropping Images in the Media Library

Another option is to change the size of your images by cropping them in the Media Library.

Step 1

Go to Media > Library in the WordPress admin dashboard.

You can change image sizes in the Media Library.

Then, click on a listed image that you want to resize.

In the pop-over, click the Edit Image button.

Click the button under the image to edit it.

Step 2

After that, you have several options to edit the image.

You can click on the image and drag your mouse over the image and let go when you have selected the area you want to keep. Then, you can click on Crop.

If you want to crop the image precisely, you can adjust the aspect ratio by entering the ratio you want.

For example, you can use 1:1 to create a square or you can use 4:3, 16:9, and any other ratio you want.

You can also click and drag the corners of the selection if you didn’t get the size of the image that you wanted at first.

Or you can make a selection, then enter the exact size of the image you want in pixels in the Selection field under Image Crop on the right.

When you’re done, click Crop, then the Save button.

Step 3

If you’d rather resize the image instead of cropping it, you can scale the image in the settings on the right.

Enter the size of the image that you want, then click Scale.

You have several options available to resize your image.

Step 4

You can also choose which standard image sizes you want your changes to apply to under Thumbnail Settings.

You can choose to have your adjustments apply to:

All image sizes
Thumbnails
All sizes except thumbnails

3. Resizing Images in the Media Settings

This is helpful if you only need to edit one or two images, but if you want to resize all your images, it’s best to do this through the settings page.

Step 1

In your admin dashboard, go to Settings > Media.

You can adjust default image sizes on the Media Settings page.

Step 2

Enter the new dimensions you want for all the thumbnails, medium, or large images. Enter your desired width and height for just one type of image, or all of them, as needed.

If you want to resize thumbnails to a size that isn’t proportional, check the Crop thumbnail to exact dimensions box under the Thumbnail size section.

Step 3

Then, you can check the Organize my uploads into month and year-based folders box if you don’t want all your new images unorganized in the uploads folder.

When you’re happy with your adjustments, click the Save Changes button toward the bottom on the page.

How to Regenerate Thumbnails in WordPress

After changing these settings or changing themes, you’ll have to regenerate your thumbnails if images aren’t updated on your public-facing site, as previously mentioned.

One of the easiest ways is using the free WordPress plugin Regenerate Thumbnails to quickly fix your previously uploaded images.

This plugin is also compatible with WooCommerce.

Step 1

To start, install and activate the Regenerate thumbnails plugin.

Then, go to Tools > Regenerate Thumbnails, WordPress image-related settings being found here.

You can regenerate thumbnails, medium, and large image sizes as well.

Step 2

By default, the Skip regenerating existing correctly-sized thumbnails option is checked. Uncheck this box to use the Regenerate Thumbnails plugin to adjust all your images.

But, leave it checked if you want to save your server’s resources.

You may also see the Update the content of posts to use the new sizes checkbox, which you can choose if you want the images that you’re currently using in your posts updated.

Step 3

After you chose the options you want, click the button to Regenerate Thumbnails, medium, large, and new file sizes included.

You’ll see the “All done!” message when the process is complete.

That’s it.

Your thumbnails and images should now be regenerated.

How to Force Regenerate Thumbnails

The reason why you would need to use this plugin over the Regenerate Thumbnails plugin is that the latter just resizes images, it doesn’t delete the old image sizes unless you check that option.

But, if you’re having trouble with it, you can give Force Regenerate Thumbnails a try.

Step 1

To force WordPress to regenerate thumbnails, install and activate the Force Regenerate Thumbnails plugin.

Then, go to Tools > Force Regenerate Thumbnails in the WordPress admin dashboard.

You can force-regenerate thumbnails in one click.

Step 2

To delete all images sized with the old settings and force WordPress to regenerate thumbnails, click the Regenerate All Thumbnails button.

Wait a while and your images will be resized. If you have a smaller site, this will take practically no time at all, but for larger sites with tons of images, this could take a few minutes.

Regenerating Specific Images

Step 1

Go to Media > Library. In the grid view, click on a specific image.

By default, the Media Library is in grid view.

Step 2

Then on the right, click the Regenerate Thumbnails button.

You can regenerate thumbnails in the attachment details.

If you’re viewing the Media Library in the list view, click on the Regenerate Thumbnails link after hovering over the image that you want to regenerate.

Click the link to regenerate thumbnails in the list view.

Regenerate Thumbnails with WP-CLI

If you prefer not to use a plugin, there’s another solution for WordPress: Regenerate thumbnails without a plugin by doing so manually with WP-CLI.

Keep in mind that you need to have access to the command line on your server for this option.

Regenerating thumbnails using WP-CLI is a far superior option over using a WordPress plugin because it’s faster and isn’t subject to HTTP limitations and timeouts.

The basic command to regenerate thumbnails is below:

wp media regenerate

After entering it, confirm you want to regenerate all thumbnails by pressing the letter “y” for “yes” on your keyboard.

Regenerate All Thumbnails with WP-CLI

Once you have fired up the command line, you can enter the following command for WordPress to regenerate thumbnails without a plugin in a matter of seconds:

wp media regenerate --yes

With this command, thumbnails will be regenerated without having to manually confirm it.

Regenerate Specific Thumbnails Using WP-CLI

You also have the option to regenerate specific thumbnails using WP-CLI and the IDs of the images you want to update.

Here’s the command to do that:

wp media regenerate 12 34 567

Just be sure to replace the three example IDs – “12,” “34,” and “567” – with the actual IDs of the specific images you want to regenerate.

You can include as many IDs as you want. Just be sure to separate each of them with a space.

Learn to quickly fix your WordPress images after changing your theme with this guide 🚀Click to Tweet

Summary

It can be frustrating to see that your images aren’t displayed properly when you switch themes.

Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:

Easy setup and management in the MyKinsta dashboard
24/7 expert support
The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
An enterprise-level Cloudflare integration for speed and security
Global audience reach with up to 35 data centers and 275 PoPs worldwide

Test it yourself with $20 off your first month of Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.

Источник

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

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

Где на сайте выводятся миниатюры изображений?

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

Как добавить миниатюру к публикации?

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

За то, в каком виде (размер, позиция) показывать миниатюру, отвечает тема. Если в теме доступен выбор нескольких макетов, то и размер/позиция миниатюры будут разными.

Как добавить новые размеры миниатюр?

WordPress по умолчанию поддерживает несколько размеров миниатюр. Это можно проверить, перейдя в админ-раздел Настройки -> Медиафайлы.

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

Иногда нужно добавить свои размеры миниатюр. Для этого используют WordPress-функцию add_image_size().

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

add_image_size( 'square-thumb', 244, 244 );

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

Часто при использовании функции add_image_size() или при смене темы на сайте все еще отображаются изображения со старыми размерами или же их оригиналы. Чтобы исправить ситуацию, можно воспользоваться одним из следующих плагинов: Ajax Thumbnail Rebuild или Regenerate Thumbnails.

Как отключить стандартные размеры миниатюр?

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

миниатюра – 150×150 пикселей (px – что это?);
средний – 300×300 пикселей;
умеренный-крупный – максимальная ширина 768 пикселей (не показывается в разделе Медиафайлы);
крупный 1024×1024 пикселей.

Также дополнительные размеры могут создавать плагины или темы.

Чтобы отключить стандартные размеры, которые создает движок, перейдите в раздел Настройки -> Медиафайлы, где в нужных полях поставьте значение 0.

Для отключения размера «умеренный-крупный» нужно перейти по адресу /wp-admin/options.php и в опции medium_large_size_w задать значение 0.

Также это можно сделать специальным кодом, который нужно добавить в файл functions.php активной WordPress-темы.

function wpschool_remove_default_image_sizes( $sizes ) {
    return array_diff( $sizes, array(
        'thumbnail',
        'medium',
        'medium_large',
        'large',
    ) );
}
add_filter( 'intermediate_image_sizes', 'wpschool_remove_default_image_sizes' );

После этого обязательно нужно пересоздать миниатюры с помощью указанных выше плагинов (Ajax Thumbnail Rebuild или Regenerate Thumbnails).

Как отключить размеры миниатюр, создаваемые темами?

Сначала нужно найти слаги размеров, которые генерирует активная тема WordPress. Самый простой способ – добавить небольшой код в файл functions.php.

add_action( 'after_setup_theme', function() {
    echo '<pre>';
    print_r( wp_get_additional_image_sizes() );
    echo '</pre>';
    die();
}, 999 );

В итоге на экране будет выведено:

Array (
    [thumb-big] => Array(
        [width] => 770
        [height] => 330
        [crop] => 1
    )
    [thumb-wide] => Array(
        [width] => 330
        [height] => 140
        [crop] => 1
    )
)

Слаги тем расположены в квадратных скобках. Видно, что активная тема генерирует 2 размера: thumb-big и thumb-wide. Чтобы их отключить:

function wpschool_remove_default_image_sizes( $sizes ) {
    return array_diff( $sizes, array(
        'thumb-big',
        'thumb-wide',
    ) );
}
add_filter( 'intermediate_image_sizes', 'wpschool_remove_default_image_sizes' );

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

Источник

Шаг 1. Включение поддержки миниатюр для вашей темы WordPress

Можно ли назначить миниатюру таксономии WordPress?

Шаг 2. Как установить миниатюру для поста?

Способ 1. Метабокс «Миниатюра записи»

Способ 2. Кнопка «Добавить медиафайл»

Шаг 3. Выводим миниатюры постов на страницах сайта

the_post_thumbnail() и get_the_post_thumbnail(). Стандартный способ вывода миниатюр.

Получение URL миниатюры при помощи функции wp_get_attachment_image_src() и get_post_thumbnail_id()

Как выбрать область обрезки миниатюры?

Миша

Что происходит с вашими изображениями

Как изменить размер миниатюр в WordPress (3 метода)

1. Изменить размеры изображений в вашей теме

2. Обрезать изображения в медиатеке

Шаг 1

Шаг 2

Шаг 3

Шаг 4

3. Изменить размер изображения в настройках мультимедиа

Шаг 1

Шаг 2

Шаг 3

Как регенерировать миниатюры в WordPress

Шаг 1

Шаг 2

Шаг 3

Как принудительно регенерировать миниатюры

Шаг 1

Шаг 2

Восстановление определенных изображений

Шаг 1

Шаг 2

Регенерирация миниатюр с помощью WP-CLI

Восстановите все эскизы с помощью WP-CLI

Регенерация определенных эскизов с помощью WP-CLI

Смотрите также:

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

Плагин Regenerate Thumbnails

Альтернативы

Подписаться на рассылку

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

Вступление

Размер миниатюры можно изменить

Изменить отображение миниатюры по отношению к тексту анонса

Размеры миниатюр в файле function.php

Вывод

Еще статьи

Похожие посты:

Что такое миниатюра wordpress и где ее можно использовать?

Проверка поддержки миниатюры wordpress темой.

Подключение миниатюры wordpress и вывод ее в анонсе статьи.

Параметры миниатюры wordpress.

Автоматическое назначение миниатюры wordpress и вывод ее в анонсе статьи.

Что происходит с вашими изображениями

1. Изменить размеры изображений в вашей теме

2. Обрезать изображения в медиатеке

Шаг 1

Шаг 2

Шаг 3

Шаг 4

3. Изменить размер изображения в настройках мультимедиа

Шаг 1

Шаг 2

Шаг 3

Как регенерировать миниатюры в WordPress

Шаг 1

Шаг 2

Шаг 3

Как принудительно регенерировать миниатюры

Шаг 1

Шаг 2

Восстановление определенных изображений

Шаг 1

Шаг 2

Регенерирация миниатюр с помощью WP-CLI

Восстановите все эскизы с помощью WP-CLI

Регенерация определенных эскизов с помощью WP-CLI

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

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

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