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

Admin PHP, WordPress 6 комментариев

Были времена, когда 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” (6)

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

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

  • Admin
    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
        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

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

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

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