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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

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

  • Александра
    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

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

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *