Всё о миниатюрах в Wodpress
8 августа 2011| Рубрика: Wordpress
Доброго времени суток дорогие читатели призраки моего блога =). Буквально вчера занимался тем, что делал портальный шаблон для WordPress, и наткнулся на одну, так сказать, проблему. А выражалась эта проблема, в миниатюрах.
В портальных шаблонах часто картинки выводятся в разных пропорциях, где-то квадратная, где-то прямоугольная, и вот тут я и стал думать, как лучше всего будет это сделать…
Что самое главное было для меня, как вебмастера, при изготовлении шаблона, так это простота использования. Если бы я делал для себя, я бы мог выбрать и не очень простой способ, но это не для нас. Для начала давайте рассмотрим способы вывода миниатюр, рассмотрим плюсы и минусы всех способов….
Способ номер АДИН.
Это непосредственный вывод анонса записи, вместе с картинкой. То есть в самое начало статьи, вставляется картинка определённых размеров, обтекается ( или же без обтекания, если нам этого не надо) и ставится тег <!—more—> в то место, где мы хотим видеть ссылку «Далее»
В данном случае, код будет выглядеть следующим образом
Плюсы:
- простота
Минусы:
- Не получится вывести картинки различных пропорций
- картинка не только в анонсе, но и в статье полностью (что, я думаю, нам нафиг не надо)
Способ номер ДВА. И так, второй способ, это вывод картинки с помощью плагина. Поискал несколько часов различные плагины, посмотрел их плюсы, минусы и актуальность. Остановится на одном из них. Плагин Get The Image. Код который я использовал в своих «старых» шаблонах выглядел так
В этом случае, плагин брал картинку из поста, и делал из неё миниатюру. Так же можно использовать и произвольные поля, указывать размеры картинок, указывать класс картинки и тд. Честно говоря, не очень люблю данный вариант, т.к. шаблон будет зависеть от плагина, а если вы делаете его на продажу, по заказу или что-то типа того, этот вариант вам не подойдёт.
Когда то видел статью с подробным использованием данного плагина, если найду — выложу, или же если у кого будет жгучее желание воспользоваться данным способом – напишите. Помогу разобраться.
Плюсы:
- простота
- возможность обрезать картинки под различные пропорции/размеры
Минусы:
- плагин, а следовательно он должен поставляться с темой, что крайне неудобно
- картинка остаётся в статье
Способ номер ТРИ.
Третий способ, и один из наиболее «красивых», это использование произвольных полей. Что такое произвольные поля, это своего рода параметры типа ключ=>значение. Данный способ немного времязатратный, но это стоит того.
Допустим, у нас используется два типа пропорций в миниатюрах, это 3х4 и 1х1. Вот что мы делаем. Для начала мы загружаем картинку, обычным способом, через админку нашего сайта. Картинку в статью мы не вставляем, но копируем ссылку на данную картинку в буфер. Затем, создаём произвольное поле, и задаём ему имя 1х1 а в значение, вставляем ссылку на картинку (имя поля, вы можете естественно задать любое). Далее обрезаем вручную картинку до пропорций 3х4, загружаем, создаём ещё поле с именем 3х4, и вставляем путь к картинке. Да, Да..сплошной геморрой, но если вы делаете сайт для людей, вкладываете душу, каждую статью пишете с удовольствием, я думаю вам не составит труда проделать всё это. Далее перейдём к коду…
Сначала значение произвольного поля записывается в переменную, и если она не пустая , тогда выводится картинка, где в атрибуте src указывается значение произвольного поля, с именем ключа 1×1, а именно путь к нашей картинке. Если же произвольного поля нету, то выводится заготовленная картинка, с текстом «Нет миниатюры» (Ну по крайней мере у меня так).
То же самое вставляем в место, где нам надо вывести миниатюры с пропорциями 3х4, соответственно меняя 1х1 на 3х4.
Вот и всё, немного ёмко по этому способу, но и так сократил как мог)
Плюсы:
- возможно выводить любые картинки, различных пропорций
- миниатюры можно не показывать в статье
Минусы:
- времяёмкий процесс
Ну и наконец способ под номером ЧЕТЫРЕ. Это вывод миниатюр, с помощью встроенного в вордпресс «способа» (быть может вы в некоторых шаблонах, видели при загрузке картинки, ссылку «Использовать как миниатюру»). Так вот, именно об этом способе и будет идти речь.
Во первых, если у вас нету блока с добавлением миниатюры, надо его включать, для этого идём в файл functions.php и добавляем туда следующий код
add_action( 'after_setup_theme', xxx_setup' );
if ( ! function_exists( xxx_setup' ) ):
function xxx_setup() {
add_theme_support( 'post-thumbnails' );
}
endif;
Где вместо xxx указываете название вашей темы на латинице. Должно же у нас быть всё красиво.
Появляется вот такая ссылка, на странице добавления картинок:
Ну и конечно же, нам надо добавить код в те места, где мы хотим отображать данные миниатюры, код будет выглядеть так
Где 200,200 это ширина и высота миниатюры. Единственный минус тут в том, что миниатюры сохраняют свои пропорции. Т.е. если у вас была картинка 100х200, и вы вывели миниатюру с параметрами 200х200, то wordpress выведет вам картинку 200х400. Естественно класс, можно указать любой, а не такой как у меня (thims).
Плюсы:
- простота
- «правильность»
- миниатюры масштабируются
Минусы:
- нельзя изменять пропорции картинок
Однако последний минус, я исправлял в своих шаблонах, по средствам CSS. А именно..
- Создал блок <div></div>
- Поместил туда картинку так, что бы по ширине она была впритык, а по высоте вылазила
- Прописал картинке margin-top:-xx px, тем самым как бы сделав её по центру блока
- И прописал div’у overflow:hidden
Тем самым у нас картинка как бы обрезалась, под наши пропорции. Это только в том случае, если нам надо картинку по ширине, больше чем по высоте. В другом случае мы прописываем margin-left:-xx px
Вот и всё на этом. Если у кого будут какие либо вопросы, комментарии открыты, welcome.