• Главная
  •  > 
  • Новости
  •  > 
  • Подключение миниатюр wordpress, их настройка и использование.

Подключение миниатюр wordpress, их настройка и использование.

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

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

Примечание : Если вы решите изменять размеры картинок, при помощи CSS, то вас ждет один неприятный сюрприз. Дело в занимаемом дисковом пространстве картинок. К примеру, если вы выведите на сайте 100Кб картинку, и установите в CSS свойство width в "50px", то, несмотря на то, что картинка будет выглядеть маленькой, она по прежнему будет занимать 100Кб. Наверное, вы уже понимаете сколько лишнего трафика будет проходить каждый раз, когда будет открываться страница хотя бы с десятком таких миниатюр.

Примечание : Большинство готовых модулей уже содержат встроенные механизмы для автоматического создания миниатюр и может показаться, что использование этих механизмов будет самым простым выходом. Однако, в большинстве случаев эти механизмы либо имеют зашитые настройки, которые не просто изменить или вынести в отдельный блок настроек, либо используют другие части модуля, либо равномерно распределены по всему модулю (их код разбросан по разным файлам).

Пишем инструмент для автоматического создания миниатюр

Примечание: Если вас не интересуют этапы создания и вам нужен готовый модуль, то перейдите к следующему разделу "Настройка скрипта".

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

  • Уникальность имен миниатюр . Когда у вас много статей или товаров, то, велика вероятность, что найдутся, как минимум, два изображения с одинаковыми названиями. Так же вы просто можете сортировать картинки по каталогам, не заботясь об уникальности имен.
  • Поддержка разных типов картинок . В основном, это gif, png и jpg.
  • Динамические размеры . В любой момент времени вам могут потребоваться другие размеры миниатюр. Например, вы изменили немного верстку для отображения элементов списка и вам необходимо изменить размеры миниатюр. Это действие должно решаться простым изменением параметра в url.
  • Кэширование картинок . Картинки должны не только физически создаваться на диске (т.к. изменение размера изображения занимает время), но и кэшироваться браузером (каждое обращение за картинкой - это лишний запрос). А так же сами картинки должны периодически заново создаваться. Ведь, возможно, что какие-то картинки были изменены, со времени создания миниатюр.
  • Возможность быстро удалить все миниатюры . Все миниатюры должны храниться в одном месте. В противном случае, банальная очистка сайта от лишних файлов или необходимость массового пересоздания миниатюр вызовут у вас определенные трудности.
  • Простота внедрения . Скрипт должен легко встраиваться на любой сайт и использовать минимальный набор базовых функций языка php.

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

Создайте файл с названием "thumb.php" и внесите первый блок - блок с параметрами:

В этом блоке определены следующие параметры: каталог для хранения миниатюр, ограничения размера (ширины) и его значение по умолчанию, время кэширования результата, значение идентификатора по умолчанию. Если большая часть параметров понятна, то параметр идентификатора необходимо пояснить. Идентификатор используется для того, чтобы отделить картинки с одинаковыми названиями друг от друга. Целочисленный ID есть практически везде, он есть у любой статьи и у любого товара. В крайнем случае, его достаточно просто определить.

Примечание : Изменение размера картинки происходит пропорционально, поэтому достаточно использовать только ширину миниатюры.

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

  • site.ru/thumb.php?&&

Примечание : Короткие имена выбраны для простоты. Вы можете изменить названия параметров, но тогда придется немного подкорректировать код.

Определяем блок:

// Проверяем наличие параметра с полным путем к картинке if (isset($_GET["f"])) $f = (string) $_GET["f"]; // Если параметра нет, то выходим else exit; // Получаем информацию о пути $path_parts = pathinfo($f); // Получаем родительский каталог, // где хранится картинка $path_images = $path_parts["dirname"]; // Получаем полное название картинки $f = $path_parts["basename"]; // Разбираем название файла $image_filename = basename($f,".".$path_parts["extension"]); $image_extension = $path_parts["extension"]; // Проверяем, что название картинки состоит из символов, тире и цифр // Вы можете удалить эту проверку, // например, в случае если вы используете кириллицу if (!preg_match("/^({1,100})$/", $f)) exit; // Получаем ширину файла if (isset($_GET["s"])) $s = (int) $_GET["s"]; else $s = $size_def; // Проверяем ограничение минимального размера миниатюры if ($s < $size_min) $s = $size_min; // Проверяем ограничение максимального размера миниатюры if ($s > $size_max) $s = $size_max; // Используем id статьи как унификатор if (isset($_GET["id"])) $id = (int) $_GET["id"]; else $id = $id_def; // Идентификатор не может быть отрицательным if ($id < 0) $id = $id_def;

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

// Проверка наличия функции для получения типа if (!function_exists("mime_content_type")) { function mime_content_type($f) { $extension = pathinfo($f, PATHINFO_EXTENSION); $extension = strtolower($extension); switch ($extension) { case "jpg": case "jpeg": return "image/jpeg"; break; case "png": case "gif": return "image/". $extension; break; } } }

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

// Формируем физический путь к миниатюре $file_thumb = $_SERVER["DOCUMENT_ROOT"] . "/" . $path_thumbs . $image_filename ."-thumb-" . $id . "-" . $s .".". $image_extension; // Если файл с миниатюрой существует if (file_exists($file_thumb)) { $cache_modified = time() - @filemtime($file_thumb); // Если время кэширования картинки не истекло, // то возвращаем картинку if ($cache_modified < $cache_lifetime) { // Время последнего изменения header("Last-Modified: ". gmdate("D, d M Y H:i:s", filemtime($file_thumb)) ." GMT", true, 200); // Длина header("Content-Length: ". filesize($file_thumb)); // Тип header("Content-Type: ". mime_content_type($file_thumb)); // Кэширование header("Cache-Control: public"); header("Expires: " . date("r", @filemtime($file_thumb) + $cache_lifetime)); echo file_get_contents($file_thumb); exit; } }

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

// Формируем физический путь к картинке $file_image = $_SERVER["DOCUMENT_ROOT"] . "/" . $path_images ."/". $f; // Если картинка существует, // то создаем миниатюру if (file_exists($file_image)) { // Получаем размеры и тип файла $is = getimagesize($file_image); // Если файл не является изображением, // то ничего не возвращаем if ($is === false) exit; // В соответствии с типом получаем картинку switch ($is) { case 1: $image = imagecreatefromgif($file_image); break; case 2: $image = imagecreatefromjpeg($file_image); break; case 3: $image = imagecreatefrompng($file_image); break; default: exit; break; } // Считаем коэффициент для изменения размера высоты $coefficient = $s / $is ; // Если ширина картинки больше требуемой if ($is > $s) { $th_width = $s; $th_height = floor($is * $coefficient); $thumb = imagecreatetruecolor($th_width, $th_height); imagecopyresampled($thumb, $image, 0, 0, 0, 0, $th_width, $th_height, $is, $is); } // Иначе отдаем картинку "как есть" // Примечание: Увеличение картинки в большинстве случаев сделает ее некрасивой. // Поэтому лучше заменить слишком мелкую картинку и затем заменить ее большой. // Например, из картинки 16х16 врядли получится нормальная картинка 200х200 else { $thumb = $image;} // Сохраняем файл, в соответствии с типом switch ($is) { case 1: imagegif($thumb, $file_thumb); break; case 2: imagejpeg($thumb, $file_thumb); break; case 3: imagepng($thumb, $file_thumb); break; default: exit; break; } // Отдаем изображение браузеру header("Last-Modified: ". gmdate("D, d M Y H:i:s", filemtime($file_thumb)) ." GMT", true, 200); header("Content-Length: ". filesize($file_thumb)); header("Content-Type: ". mime_content_type($file_thumb)); header("Cache-Control: public"); header("Expires: " . date("r", time() + $cache_lifetime)); echo file_get_contents($file_thumb); }

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

Настраиваем php-скрипт для автоматического изменения размеров изображений

Примечание: Если вы пропустили раздел "Пишем инструмент" или же не создавали файл, то скачать готовый файл вы можете тут: thumb.zip

Полученный файл скопируйте в то место, где вам будет угодно. Например, в папку "utils". После чего приступите к настройке. Откройте файл и перезапишите настройки по умолчанию:

  • $path_thumbs - путь к папке для хранения миниатюрами (по умолчанию путь "images/thumbs/"). Не забудьте создать этот каталог.
  • $size_min - минимальная ширина миниатюры в пикселях (по умолчанию 1).
  • $size_def - ширина миниатюр в пикселях по умолчанию (по умолчанию 40)
  • $size_max - максимальный размер в пикселях миниатюры (по умолчанию 1600)
  • $cache_lifetime - время кэширования каждой миниатюры в секундах (по умолчанию 84000 * 30, т.е. тридцать дней)
  • $id_def - значение идентификатора по умолчанию (по умолчанию 0). Идентификатор применяется для создания уникальных имен миниатюр.

После внесения настроек, php-скрипт для автоматического изменения размеров уже можно использовать. Для этого еще раз вспоминаем шаблон:

  • site.ru/utils/thumb.php?&&

Пример реального запроса будет выглядеть так:

  • site.ru/utils/thumb.php?id=15 &s=100 &f=images/razdel-1/statya-15/start.png

Однако, в эпоху использования красивых ЧПУ ссылок, такой запрос будет выглядеть несколько некрасиво. Поэтому необходимо добавить в файл ".htaccess" в корне сайта следующие строки (при условии, что хостинг поддерживает mod_rewrite и что в файле.htaccess есть строка с "RewriteEngine On"):

#Добавлять строки после строки "RewriteEngine On" #Thumbs RewriteRule ^thumb/({1,11})/({1,11})/(.*) utils/thumb.php?id=$1&s=$2&f=$3

  • site.ru/thumb/{Идентификатор} /{Ширина} /{Полный путь к изображению}

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

  • site.ru/thumb/15/100/images/razdel-1/statya-15/start.png

Миниатюры, по сути, дублируют изображения на сайте. Поэтому может потребоваться настройка файла robots.txt. Конечно, поисковые системы должны адекватно реагировать на существование миниатюр, и не считать это за попытку манипуляцией поисковой выдачи. Тем не менее, если вы сомневаетесь в этом, то стоит добавить к правилам в robots.txt следующие строки (при условии, что thumb.php находится в папке utils):

Disallow: /thumb/ Disallow: /utils/thumb.php

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

Скачать готовый инструмент можно тут:


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

И чтобы не затягивать, сразу начнем разбирать все вопросы, перечисленные выше.

Что такое миниатюра wordpress и где ее можно использовать?

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

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

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

Проверка поддержки миниатюры wordpress темой.

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

Если миниатюры wordpress подключены, то в правой колонке мы увидим окошко под названием «Миниатюра записи», со ссылкой «Задать миниатюру».

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

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

И обратите внимание, что из-за особенностей перевода тем, данная опция может называться по другому, например «Характерное изображение», и ссылка на создание миниатюры может быть такой: «Установить специальное изображение».

Подключение миниатюры wordpress и вывод ее в анонсе статьи.

Чтобы подключить миниатюры wordpress к нашей теме, необходимо в админке, или с помощью текстового редактора NotePad++ , открыть файл functions.php и в самом низу, перед?>, добавить следующий код:

Add_theme_support("post-thumbnails");

После чего, в редакторе записи у нас появится возможность задать миниатюру. И если у нас не очень много статей, то мы можем задать, для каждой, миниатюру wordpress в ручную.

А как теперь использовать ее в анонсе статьи? Чтобы вывести миниатюру на главной странице, необходимо прописать в файле index.php или loop.php , в нужном месте код:

Если вы испытываете затруднения в поиске нужного места, то просто найдите вот такой код:

Или же, такой:

И перед ним вставьте код вывода миниатюры wordpress.

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

" title="">

Немного подробнее о том, из чего состоит данный код:

  • 1. открывающий тег , и закрывающий — тег предназначенный для создания ссылок. Именно он сделает миниатюру ссылкой.
  • 2. href="" — ссылка на статью.
  • 3. title="" — тайтл (заголовок) ссылки, который будет виден, при наведении на нее курсора. Берется из заголовка статьи.
  • 4. — функция вывода мини картинки.

Теперь, должно быть немного понятней, как это работает. Нам останется только оформить внешний вид картинки, в зависимости от наших потребностей. Для этого, необходимо в style.css добавить следующий код, если его нет:

Img.wp-post-image{ здесь стили миниатюры }

И между скобками, вместо «здесь стили миниатюры», добавить необходимые стили. Это, что касается обычного, стандартного вывода, без использования, каких-либо параметров.

Параметры миниатюры wordpress.

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

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

The_post_thumbnail(); // стандартный вывод, без параметров, о котором мы говорили выше. the_post_thumbnail("thumbnail"); // уменьшенная копия изображения (по умолчанию 150px x 150px). Есть возможность настройки из админки, но при этом размер не должен превышать 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)); // свои размеры. Возможно назначить любые размеры ширины и высоты.

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

И соответственно, для каждого параметра, есть свои селекторы, для файла стилей css.

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

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

Автоматическое назначение миниатюры wordpress и вывод ее в анонсе статьи.

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

/i", $post->post_content, $matches); $first_img = $matches ; return $first_img; } ?>

Теперь, чтобы вывести миниатюру в анонсе статьи, то есть на главной, открываем файл index.php или loop.php и добавляем код с функцией вывода миниатюры (функцию из предыдущего примера можно удалить), в то же место, что и при стандартном выводе:

" src="" alt="" width="150" />

Теперь, немного разберемся, из чего состоит данный код.

  • 1. Тег — собственно именно этот тег и будет выводить картинку, так как сама функция только выдергивает ссылку на первое изображение из поста.
  • 2. title="" — тайтл (заголовок) изображения, который можно увидеть при наведении курсора на миниатюру записи wordpress.
  • 3. src="" — ссылка на изображение, которое будет выводиться. Как можно заметить, именно здесь находится функция, которая и отвечает за ссылку на мини картинку.
  • 4. alt="" — альтернативный текст изображения. В случаях, когда в браузере отключена загрузка изображений, будет появляться alt, как бы описывая, что здесь должно быть за изображение.
  • 5. width="150" — задается ширина миниатюры. В данном случае изображение будет уменьшаться прямо пропорционально, ориентируясь на указанную ширину.

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

А чтобы данная ошибка исчезла, достаточно заменить его, на:

После этого, данная проблема должна исчезнуть.

Последнее, что мы можем сделать сегодня, это сделать миниатюру wordpress, ссылкой. Для этого, просто обернем код тегом с ссылкой на статью:

" >" src="" alt="" width="150" />

По использованию миниатюры wordpress в анонсе статьи, в принципе все. Но ведь нам еще может понадобится оформить внешний вид картинки, с помощью файла style.css . Возможно, у некоторых возникнет проблема, связанная с тем, какие селекторы использовать, для оформления.

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

" >" src="" alt="" width="150" />

Img.mini{ здесь стили миниатюры }

Вот и все. Теперь вы сможете подключить поддержку миниатюр к вашему шаблону и использовать их, для вывода анонсов статей. А также, оформить миниатюры wordpress по своему желанию.

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

У меня на этом все. Удачи!

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

Получается, что у вас есть 2 варианта решения задачи — использовать либо вручную для каждой статьи создавать миниатюры. В первом случае появляется ощущение «вынужденного» и не совсем оптимального решения, второй и вовсе может заставить вас потратить 4-5 часов на возню с картинками. К счастью, недавно нашел еще и третий вариант — плагин Auto Post Thumbnail .

Данный модуль позволяет генерировать миниатюры (thumbnails) из первой картинки в тексте для любых постов блога или записей пользовательских типов. Если первое изображение не найдено, плагин автоматически продолжит поиск пока миниатюра не будет создана. В том случае, если для записи thumbnails уже установлено, просто ничего не произойдет. Короче говоря, принцип работы предельно прост и логичен. Кстати, если же по каким-то причинам вы хотите запретить формирование миниатюры для того или иного поста, тогда создаете произвольное поле (custom field) skip_post_thumb в соответствующей записи.

Установка плагина элементарна и выполняется как всенла: классический метод путем скачивания файлов модуля с официального сайта , его распаковки и загрузки на ФТП в директорию /wp-content/plugins/ с последующей активацией в разделе «Плагины» из админки; либо в пункте меню «Добавить плагин» ищите модуль по названию «Auto Post Thumbnail», где скачиваете и активируете его. Вот и все!

После установки у вас появится новый пункт меню — Auto Post Thumbnail , где имеется всего одна кнопка для начала работы — Generate Thumbnails. Там же указано примечание, о котором я говорил выше — перед запуском просят установить произвольные поля skip_post_thumb для постов, где не хотите ничего генерировать. Если таковых нет, просто кликаем по кнопке.

О ходе процесса обработки всех постов блога будете проинформированы с помощью специального статусбара. После завершения обработки увидите соответствующее уведомление. Похожая автогенерация миниатюр проводится при изменении , но там для этих целей используют Regenerate Thumbnails.

Можете пройтись по постам дабы убедиться в правильности работы данного плагина. Также советую проверить внешний вид блога и насколько корректно отображаются посты. Есть вероятность что для выбранного wordpress шаблона у вас по умолчанию в коде было добавлено отображение миниатюр. В итоге получится что-то вроде этого (когда выводится и картинка из поста, и thumbnail):

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

Во-первых, открываете файлы, которые отвечают за отображение списка постов блога — index.php, home.php либо archive.php, catagory.php, tag.php, где находим функцию отображения текста the_content (я упоминал о ней в посте про ) и меняем ее на:

Этот код отобразит краткий анонс поста блога без выделений и картинок исключительно в текстовом виде. Дальше в файле шаблона для отображения полного текста заметки (single.php) мы наоборот находим функцию миниатюр the_post_thumbnail и удаляем уже ее. Как правило, она выводится со следующим кодом:

"alignleft post_thumbnail" ) ) ; } ?>

"alignleft post_thumbnail")); } ?>

В итоге должно получится, что на всех страницах со списками новостей будут отображать миниатюры + краткий текст, а на полных записях — все то оформление и изображения, которые вы задаете в редакторе. Решение, я считаю, достаточно гибкое, а плагин Auto Post Thumbnail работает на отлично! Кстати, если вы покупаете сайты и приходится иногда переделывать откровенные ГС в более-менее красивые проекты, данный модуль точно пригодится — могу сказать по личному опыту. Хотя, в принципе, есть еще один вариант решения задачи — это но там больше кода и нужно в нем ориентироваться получше.