Всё о миниатюрах в wordpress часть 2

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

Код отображения для первого способа (с использованием произвольных полей) и для третьего (с использованием PHP функции) я давал в предыдущем посте. В случае с плагинами, для каждого из них этот код конечно разный. Его вы можете найти в инструкции по установке плагина либо в папке с плагином в файле readme.txt.

• можно просто вставить код перед строчкой

<?php the_excerpt(); ?>

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

Если у вас на главной странице отображаются полные посты, а не анонсы, вам нужно найти в файле index.php вот такой код:

<?php the_content(); ?>

и заменить его на

<?php the_excerpt(); ?>

Так же не забывайте о том, что вы можете сами указывать, какой текст отображать в случае с the_excerpt в поле “Цитата”, которое находится в админке непосредственно под текстовым редактором.

• можно код отображения и код вывода анонса заключить в тэги div с разными классами, например так:

<div class="left">
Код отображения миниатюры
</div>
<div class="right">
<?php the_excerpt(); ?></div>

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

.left {float:left;width:20%;}
.right {float:right;width:80%;}

Эти строчки нужно добавить в файл style.css вашей темы.

В этом случае область вывода анонса разделится на 2 части (в соотношении: 20%-левая, там где миниатюра и 80%-правая, там где анонс). Естественно и процентное соотношение и расположение этих двух частей вы можете изменить по своему усмотрению. Это же касается и других свойств CSS, которые вы можете применять к вышеупомянутым блокам div (например align, padding, margin, border, font и др.) Подробно о каждом свойстве CSS и каждом HTML тэге вы можете прочесть на сайте htmlbook.ru

Чтобы задать стили для картинки, которая находится в блоке

<div class="left">Код отображения картинки</div>

нужно добавить еще вот такой стиль в style.css

.left img {border: 1px solid #cccccc;
margin:5px;
padding:5px;}

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

Если еще добавить рамку блоку div, в котором находится картинка, то можно добиться примерно таких результатов как здесь: hungred.com Хотя зачастую миниатюры всё же лучше смотрятся без рамки.

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