Миниатюры в WordPress. Создание дополнительных размеров изображений в WordPress
+17

Из этой статьи вы узнаете как работать с миниатюрами записей в WordPress.

Думаю, эта статья будет интересна и тем, у кого уже есть блог на движке WordPress, и тем кто только знакомится с возможностями блога на WordPress.

WordPress позволяет стандартными средствами настроить использование миниатюр для записей. Стандартными средствами, это не прибегая к помощи сторонних плагинов. Преимуществом данного решения является меньший объем кода, и следовательно меньшая нагрузка на сервер. А вот недостатков у этого решения практически нет. Единственное что необходимо, так это минимальные познания в программировании на языке PHP. И то, если нужно применить только лишь базовый функционал, то можно обойтись и без этого.

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

Миниатюры в WordPress (иллюстрация 1)

Миниатюра представляет собой изображение выбранное для записи или страницы. Обычно миниатюры отображаются вверху поста. Многие шаблоны для WordPress позволяют выводить миниатюры записей. Это, с одной стороны, функционально, а, с другой — делает дизайн сайта более структурированным и привлекательным. Представьте себе, что все записи имеют свои миниатюры, которые отражают содержание статьи; все миниатюры одинакового размера и расположены на определенных местах. Посетителю все сразу видно и понятно, и он будет возвращаться на ваш сайт вновь и вновь (при условии, что содержание статей, конечно же добротное). Вот в данной статье я и расскажу (и покажу) как научить ваш сайт использовать миниатюры в WordPress.

В WordPress, начиная с версии 2.9, имеется встроенная функция для работы с миниатюрами Post_Thumbnails.

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

Миниатюры в WordPress (иллюстрация 2)

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

Миниатюры в WordPress (иллюстрация 3)

Размеры миниатюр задаются в окне ПараметрыМедиафайлы

Миниатюры в WordPress (иллюстрация 4)

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

Миниатюры в WordPress (иллюстрация 5)

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

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

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

Допустим, у вас был установлен размер миниатюр 150х150 пикселей. В таком режиме вы добавляли записи на сайт, задавали для них миниатюры. Для всех добавленных изображений генерировались копии с размерами изображения 150х150 пикселей. В один прекрасный момент вам понадобилось увеличить размер миниатюр до 200 пикселей по всем сторонам, потому что вы изменили дизайн сайта отредактировав установленный шаблон, или, вообще, сменили его на другой. Вы задаете в Настройках медиафайлов новые размеры миниатюр, убеждаетесь что все получилось — миниатюры отображаются в новом размере, и радуетесь. Но есть одно НО!

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

Миниатюры в WordPress (иллюстрация 6)

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

Исправить это можно сгенерировав миниатюры в новом размере для всех изображений. И поможет нам в этом плагин Regenerate Thumbnails. Установить его можно либо скачав с сайта Wordpress.org либо через Консоль.

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

Миниатюры в WordPress (иллюстрация 7)

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

Миниатюры в WordPress (иллюстрация 8)

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

Включаем поддержку миниатюр в WordPress

А что делать если шаблон изначально не поддерживает работу с миниатюрами?

Для начала нужно объявить поддержку миниатюр. Делается это добавлением в файл functions.php следующего кода

if ( function_exists( 'add_theme_support' ) ) { 
  add_theme_support( 'post-thumbnails' ); 
}

Если строка

add_theme_support( 'post-thumbnails' );

уже присутствует в файле functions.php, значит в вашей теме уже включена поддержка миниатюр.

После этого в окнах редактирования записей и страниц появится меню Миниатюра записи. Процесс установки миниатюр описан выше.

Теперь нужно добавить следующий код

<?php 
if ( has_post_thumbnail() ) { // Проверка на наличие миниатюры для записи
  the_post_thumbnail('thumbnail');
} 
?>

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

<?php the_content(); ?>

которая отвечает за вывод содержимого записи (в файл index.php, single.php и др.).

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

img.attachment-thumbnail {
	float: left;
	margin: 5px;
	padding: 5px;
	border: 1px solid #999;
}

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

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

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

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

the_post_thumbnail();                  // без параметров, миниатюра
the_post_thumbnail('thumbnail');       // Миниатюра (по умолчанию 150px x 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) );  // Другие размеры

Для регистрации дополнительных размеров миниатюр в WordPress используется функция

add_image_size()

например,

add_image_size ('sidebar-preview', 100, 100, true); // Режим жесткой обрезки
Используется в тех случаях, когда необходимо обрезать изображение до жестко заданных размеров. 

add_image_size ('post-preview', 200, 200, false); // Режим мягкой обрезки - по умолчанию
Изменяет размеры изображения пропорционально, не искажая его.

add_image_size ('single-preview', 600, 9999 ); // Режим мягкой обрезки с неограниченной высотой
Используется при выводе крупных изображений в статьях.

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

<?php the_post_thumbnail ('sidebar-preview'); ?> 
Этот код должен быть вставлен в цикл записей.

Для настройки отображения миниатюр с помощью таблиц стилей использовать соответствующие селекторы

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

При работе с миниатюрами можно использовать следующие функции

has_post_thumbnail()      // проверяет наличие миниатюры (возвращает true при наличии, false - при отсутствии)
the_post_thumbnail()      // предназначена для вывода миниатюры на экран
get_the_post_thumbnail()  // возвращает значение для использование в коде PHP

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

<?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail('thumbnail'); ?>
   </a>
<?php endif; ?>

В итоге миниатюра будет заключена внутрь ссылки. По щелчку на миниатюре будет происходить переход на страницу записи.

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

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {
  $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
  return $html;
}

в файл functions.php вашего шаблона.

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

<?php the_post_thumbnail('thumbnail'); ?>

На этом все!
Если возникнут вопросы — не стесняйтесь задавать!

+17
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: Уроки Wordpress. Прямая ссылка на запись.

Комментарии к записи Миниатюры в WordPress. Создание дополнительных размеров изображений в WordPress: 52

  1. Иван сказал(а):

    Здравствуйте, подскажите пожалуйста мне такое:
    WP 3.2.1, шаблон не поддерживал, поэтому добавил код в function.php , все нормально. Потом код отображения миниатюр в индексный, прямо перед . В общем миниатюра отображается, а вот текст никак не хочет заливать снизу миниатюру. Ну сначала миниатюра слева отображается, потом внизу под миниатюрой начинается 1-я строка текста, а хотелось бы как у всех слева (можно справа) миниатюра, и паралельно отображался начало текста. В чем причина? Пробовал вставить таблицу стилей кот наверху, без изменений. При обычной вставке фотки в текст (слева, по центру, справа) текст же заливает все остальное пространство? не могу понять. У меня вставка в index.php такая:

    • remak сказал(а):

      Должно быть это все таки таблицы стилей. Посмотрите стили для класса миниатюр и для блока текста записи. Назначено ли в CSS миниатюре свойство float?

  2. sv9t сказал(а):

    Хорошая статья! примеров только бы побольше, пришлось с кодексом WP смотреть и получилось). Спасибо!

    • remak сказал(а):

      Спасибо! По поводу примеров, в будущем постараюсь увеличить их количество.

  3. ds сказал(а):

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

    • remak сказал(а):

      Тут трудно сразу сразу сказать. Однозначно будет использоваться выравнивание по левому краю float: left. Если подробнее, то нужно видеть код.

      • ds сказал(а):

        все оказалось просто — нужно было задать свойство элемента display: inline, float: left почему-то не получилось.

  4. Андрей сказал(а):

    Добрый день. У меня к вам вопрос. У меня есть опция «Задать миниатюру», все вроде работает, все я правильно делаю. Но сохранив все изменения, на сайте вместо миниатюры 150х150, выводится обычная картинка привязанная к статье. Что я только не пробовал, и плагины и обрезаю на компьютере и потом вставляю в опцию «задать миниатюру». Ничего не получается. Грешу на код, но где его искать?! Ткните пожалуйста, если не трудно:)

  5. Екатерина сказал(а):

    Спасибо, статья помогла избавиться от лишних изображений. Но у меня вопрос, использую тему twentyeleven и при загрузке полноразмерного изображения, в блоге отображается картинка гораздо меньше, хотя при загрузке на комп — загружается полный размер. В теме множество настроек ширины. Использую одноколончатый вариант, выбираю шаблон записи image. Посмотрела в стилях, поставила по ширине 100%, но не помогает. Помогите разобраться

  6. Михаил сказал(а):

    А вот этот код куда вставлять?

    <a href="» title=»» >

    Спасибо.

    Мне надо, чтобы картинка-миниатюра была ссылкой на запись

  7. Владимир сказал(а):

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

    • remak сказал(а):

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

  8. Ilnur сказал(а):

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

  9. vik сказал(а):

    Здравствуйте! Не могу в своей теме найти файл, в котором задаются размеры миниатюры. Изначально функция вывода миниатюр в теме была, я её нашла в файле Функции. А где задаётся размер картинки миниатюры найти не могу. Может поможете? Тема whitebluebox 1.0 Спасибо!

    • remak сказал(а):

      Ваша тема миниатюры поддерживает, но размеры, по моему, задаются в меню Параметры — Медиафайлы. Жестких размеров в файлах темы я не нашел.

      • vik сказал(а):

        Нет, не там. я там меняла. И в css не нахожу и в функциях не нашла и в основном шаблоне тоже. Вот, даже не представляю где ещё искать.. :(

  10. za сказал(а):

    add_image_size (‘sidebar-preview’, 100, 100, true); // Режим жесткой обрезки это добовляем в functions
    это где хотим увидеть картинку
    только вот по высоте не режет почемуто только ширина работает просто картинка уменьшается все варианты уже перепробывал может кто подскажет как
    сделать размеры к примеру 200 по ширене 100 по высоте этот вариант the_post_thumbnail( array(100,100) ); тоже неполучается…

    • hutki сказал(а):

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

  11. nsu830 сказал(а):

    как сделать, чтобы под миниатюрой можно было выводить «подпись», допустим «фото с сайта…»?

  12. Firix сказал(а):

    Хороший пост, оказался очень полезным) Также советую почитать тут: http://moneynub.ru/

  13. JamJam сказал(а):

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

  14. Алексей сказал(а):

    Добрый день! в моей теме при нажатии на миниатюру всплывает окно с полноразмерной фотографией, а при нажатии на подпись продукта реализуется переход по ссылке. Открыв файл function.php я увидел там только код jquery. Понимаю, что код в разных темах может быть разным, но может дадите мне ориентир, какую функцию или атрибут искать?

  15. vitaly-go сказал(а):

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

  16. Marina сказал(а):

    Спасибо за совет с плагином Regen.Thumbnails

  17. Владимир сказал(а):

    add_image_size (‘sidebar-preview’, 100, 100, true); // Режим жесткой обрезки это добовляем в functions
    это где хотим увидеть картинку
    только вот по высоте не режет почемуто только ширина работает просто картинка уменьшается все варианты уже перепробывал может кто подскажет как
    сделать размеры к примеру 200 по ширене 100 по высоте этот вариант the_post_thumbnail( array(100,100) ); тоже неполучается…

    Просьба ответить на этот вопрос

  18. IS сказал(а):

    Спасибо! Я новичок в вордпрессе, а здесь все просто и понятно: и как сделать, и что для чего, пригодилось.

  19. Sergies сказал(а):

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

    • remak сказал(а):

      Может расширение у файлов разные?

      • sergies сказал(а):

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

  20. сисадмин сказал(а):

    У себя я вообще не нашел файла function.php. Или он не в каждой теме присутствует?

    • admin сказал(а):

      Исправил. Файл functions.php — присутствует в каждой теме.

      • Murat сказал(а):

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

  21. Анатолий сказал(а):

    Где хранятся (и хранятся ли) имена файлов-миниатюр?

  22. Сергей сказал(а):

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

  23. Регина сказал(а):

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

  24. Роман сказал(а):

    Здравствуйте! У меня такая проблемка. При создании миниатюры к посту, через кнопки «Задать специальное изображение»—>»Использовать как миниатюру поста» картинка не обрезается, а показывается в уменьшенном размере. А если я вставляю миниатюру путем отмечания соответственной галочки, то в новости появляются обе картики, разных размеров. Так вот, как можно сделать так, чтобы выходила обрезанная миниатюра через добавление кнопкой «Задать специальное изображение»? Поскольку если вставлять миниатюру другим способом, то все получается, но тогда миниатюра данной новости не показывается в списках последних новостей и т. п. Возможно мой вопрос не совсем по теме, но все же помогите, если кто сталкивался с такой проблемой.

    • velemos сказал(а):

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

  25. Тимофей сказал(а):

    Спасибо! Очень подробно всё расписано, очень полезная статья.

  26. Саша сказал(а):

    «Можно связать миниатюру со ссылкой на текущую запись. Для этого нужно немного видоизменить вставляемый код»

    Спасибо, ты лучший, я неделю искал как это сделать!

  27. Андрей сказал(а):

    Спасибо за статью! Очень помогла..

  28. Soockanny сказал(а):

    GL

  29. Сергей сказал(а):

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

  30. Wasija сказал(а):

    Спасибо. И автор хороший и плагин супер.

  31. Леночка сказал(а):

    Прошу помощи! У меня есть рубрики, в которых выводятся привью статей с миниатюрами. И мне очень не нравится, что заголовки статей находятся с правой стороны от миниатюра, а не сверху. Помогите, где и как это можно исправить? Перерыла весь archive.php но не могу найти строчку, которая за это отвечает!

  32. Халоо сказал(а):

    При обновлении вордпресса, данная свистелка-перделка слетит из файла функш?

  33. Антон Петрович сказал(а):

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

  34. Илья сказал(а):

    Хороша статья!

  35. Андрей сказал(а):

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

  36. Даниил сказал(а):

    Добрый день! У меня немного другая проблема. Дело в том, что на главной странице темы Simple Catch я не хочу, чтобы показывались миниатюры, а были видны статьи с картинками. Но почему-то эти картинки не появляются в списке статей, только текст. Не подскажите, в чем может быть проблема?

  37. Гриша сказал(а):

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

    Большой по объему код нельзя вставлять в комментарии!

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

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