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

Admin PHP, WordPress

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

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

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

// Добавляет поддержку миниаютюр
add_theme_support( 'post-thumbnails');

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

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

// Добавляем поддержку миниатюр к новому типу записей
add_theme_support( 'post-thumbnails', array( 'news' ) );

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

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

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

<?php if ( has_post_thumbnail()) { ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(thumbnail); ?>
</a>
 <?php } ?>

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

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

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

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

add_image_size( 'new_size', 400, 300, true );

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

<?php the_post_thumbnail(new_size); ?>

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

Как удалить автоматически создаваемые ненужные размеры миниатюр на WordPress.

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

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

add_image_size( 'new_size', 400, 300, true );

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

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

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

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

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

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

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

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

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

// Качество для компрессии изображений
add_filter( 'jpeg_quality', create_function( '', 'return 80;' ) );

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

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

  • Александра
    11.09.2018 в 12:41

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

  • Admin
    Автор записи
    11.09.2018 в 14:35

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

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

    • Александра
      17.09.2018 в 13:52

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

      $image .= '';
      // $image .= '<a href="' . esc_url( get_the_permalink() ) . '" title="'.the_title_attribute( 'echo=0' ).'" rel="nofollow">';
      // $image .= '<a href="'get_post_meta(id, 'url-thumb', true )'" rel="nofollow">';
      $image .= get_the_post_thumbnail( get_the_id());
      $image .= '</a>';
      $image .= '';
      echo $image;

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

      • Admin
        Автор записи
        17.09.2018 в 16:50

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

        // $image .= '<a href="' . get_post_meta($post->ID, 'url-thumb', true) . '" rel="nofollow">';

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

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

        global $post;

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

        • Александра
          17.09.2018 в 16:58

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

  • Тина
    05.06.2023 в 21:34

    Люди добрые, помогите, пожалуйста, никак не получается в новой версии вордпресс подключить в свою тему поддержку миниатюры.
    В файле фанкшин код прописан
    add_theme_support(‘post-thumbnails’, array( ‘news’ )); //поддержка миниатюр
    /*set_post_thumbnail_size(200,150, TRUE);*/
    add_action(‘init’, ‘register_nav_menus_on_init’);

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

Добавить комментарий для Admin Отменить ответ

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Работа с миниатюрами в WordPress"