Как изменить размеры рекомендуемых изображений в WordPress

Опубликовано: 2017-04-10

Обновление 10 марта 2017 г.

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

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

Избранные изображения, конечно, очень важны для креативщиков и всех, кто создает сайт WordPress, содержащий много изображений. Чтобы использовать избранные изображения в любой теме Graph Paper Press, все, что вам нужно сделать, это выбрать избранное изображение по ссылке в правой части экрана в редакторе сообщений.

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

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

Изменение размера рекомендуемого изображения в functions.php

Чтобы изменить размеры рекомендуемых изображений по умолчанию, вам нужно изменить код в файле functions.php . Доступ к этому файлу можно получить либо через FTP, либо вы можете редактировать его непосредственно на панели инструментов WordPress в разделе « Внешний вид»> «Редактор». Я всегда рекомендую первый подход, а не второй.

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

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

 set_post_thumbnail_size (50, 50); // 50 пикселей в ширину и 50 пикселей в высоту, режим изменения размера

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

 set_post_thumbnail_size (50, 50, правда); // 50 пикселей в ширину и 50 пикселей в высоту, режим обрезки

Это устанавливает размер избранных изображений по умолчанию.

Добавление дополнительных размеров изображения

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

 add_image_size («большой палец категории», 300, 9999); // 300 пикселей в ширину (и неограниченная высота)

Затем вы можете использовать этот новый размер в шаблоне темы с помощью следующего кода:

 <?php the_post_thumbnail('категория-большой палец'); ?>

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

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

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

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

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

Защитите свои правки на будущее с помощью дочерней темы

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

Использование дочерней темы решает эту проблему, так как при обновлении родительской темы дочерняя тема остается нетронутой. Если вы вносите какие-либо изменения в код темы либо в файл functions.php , либо в таблицы стилей, либо в любые другие файлы, всегда лучше использовать дочернюю тему.

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

Чтобы создать дочернюю тему, подключитесь к своему сайту через FTP и создайте новую папку в /wp-content/themes/ для новой дочерней темы. Общепринятой практикой является называть папку так же, как тему, которую вы хотите отредактировать, с добавлением «-child». Например: «awesome-child», если вы создаете дочернюю тему темы Awesome.

Вы должны создать таблицу стилей в папке дочерней темы, даже если вы не собираетесь редактировать CSS. Создайте новый файл с именем style.css и вставьте в него следующий код:

 /*
Название темы: Удивительный ребенок
URI темы: http://example.com/awesome-child/
Описание: Потрясающая детская тема
Автор: Graph Paper Press
URI автора: http://example.com
Шаблон: Потрясающе
Версия: 1.0.0
Теги: светлый, темный, адаптивный макет, доступность
Текстовый домен: awesome-child
*/

@import URL("../awesome/style.css");

/* =Здесь начинается настройка темы
-------------------------------------------------- ------------ */

Измените название темы и другие детали по мере необходимости.

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

Шаблон для functions.php выглядит так:

 <?php //Открытие тега PHP

// функции

?> // Закрывающий тег PHP

Затем вы можете добавить код изменения размера изображения между тегами PHP, так что вы получите что-то вроде этого:

 <?php // Открывающий тег PHP

если ( функция_существует( 'добавить_тему_поддержку' ) ) {
add_theme_support('миниатюры постов');
set_post_thumbnail_size (150, 150, правда); // размеры миниатюры поста по умолчанию (обрезанные)

// дополнительные размеры изображения
// удаляем следующую строку, если вам не нужны дополнительные размеры изображения
add_image_size («большой палец категории», 300, 9999); //300 пикселей в ширину (и неограниченная высота)
}

?> // Закрывающий тег PHP

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

Полюбуйтесь вашими новыми избранными изображениями с измененным размером

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