26 Сентябрь 2011

Обтекаемость картинки в WordPress

Обтекаемая картинка верстка под WordPress

Приветствую вас, уважаемый читатель!

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

Заодно, в процессе верстки, научимся работать с редко используемым CSS-псевдоклассом :first-child и поупражняемся в искусстве владения FireBug-ом.

Постановка задачи:

На страницах блога с хронологическим перечнем постов (главная страница и т.д.) иллюстрирующее изображение должно располагаться слева от обтекающего текста. На странице полного текста статьи изображение должно позиционироваться по умолчанию.

Видеоурок:

Скачать видеоурок (29 Мбайт, *.wmv).

Что нам понадобится для выполнения поставленной задачи:

  • Знания о назначении файлов темы. Об этом я подробно рассказывал в видеоуроке 5-2 курса верстки для WordPress.
  • Для демонстрации верстки я использую свежеустановленный движок WordPress 3.2.1 (движок я качал здесь) с темой по умолчанию «twentyeleven».

В бой!

После анализа HTML-кода главной страницы FireBug-ом (видеоурок по работе с FireBug) или аналогичным расширением для Chrome становится понятным, что текст каждого поста заключен в блок <div class=”entry-content”>.

Анализ кода в FireBug

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

Уважаемый читатель, ознакомившийся с уроками 5-1 и 5-2 верстки для WordPress, должен четко понимать, что за отображение главной страницы отвечает файл index.php в папке с темой twentyeleven. Покопавшись в файле index.php не сложно догадаться, что блок <div class=”entry-content”>, для случая удачного обнаружения записей блога, вынесен в файл content.php (этот файл также расположен в папке с нашей темой).

Открываем content.php на редактирование, находим блок <div class=”entry-content”> и добавляем ему дополнительный класс «imgleft»: <div class="entry-content imgleft">.

Остается настроить положение изображений в элементе с классом «imgleft» посредством CSS-свойств.

Открываем на редактирование файл style.css внутри папки с темой twentyeleven и в конце дописываем необходимые CSS-инструкции:

Листинг 1. Настройка отображения картинки

.imgleft img
{
float: left;
width: 150px;
}

Таким образом, все изображения, попавшие в блок с классом imgleft, будут обтекаться справа и иметь ширину 150 пикселов (высота будет выбрана автоматически с сохранением пропорций).

Результат применения свойства float:left

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

Поискав причину возникновения желтых прямоугольников FireBug-ом можно умозаключить, что это следствие CSS-стилей темы twentyeleven.

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

В теме twentyeleven отступы между абзацами формируются добавлением свойства margin-bottom: 1.625em к каждому из абзацев поста. Конечно, можно в свойствах класса imgleft обнулить отступы между абзацами и тем самым ликвидировать верхний прямоугольник на скриншоте; но представьте, что в коротком описании к посту встретятся несколько абзацев — наше решение приведет к тому, что все абзацы слипнуться, это совсем не хорошо.

Мы пойдем другим путем и используем псевдокласс :first-child.

Листинг 2. Использование псевдокласса :first-child

.imgleft p:first-child
{
margin-bottom: 0;
}

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

Псевдоклассы в CSS довольно разнообразны. Предлагаю желающим почитать соответствующий раздел на сайте htmlbook.ru.

Проблема с верхним прямоугольником решена.

Причина появления нижнего отступа — заданные по умолчанию внутренний и внешний отступы для изображений (padding и margin). С этим мы легко справимся немного изменив листинг 1:

Листинг 3. Модификация листинга 1 с целью решения проблемы нижнего отступа

.imgleft img
{
float: left;
width: 150px;
padding: 0;
margin: 0 10px 0 0;
}

В результате имеем желаемую интерпретацию в браузере:

Интерпретация в браузере

Есть одна «пичалька», псевдокласс :first-child не работает в IE6. Но скорее это не проблема верстальщика, а проблема пользователя, применяющего устаревший браузер.

RIP IE6

В случае малого количества текста в описании поста вверх запросто может подскочить ссылка «читать далее», а в худшем случае за ней может подпрыгнуть и что-нибудь еще.

Верстка под WordPress

Для того чтобы обеспечить постоянное положение ссылки под картинкой можно воспользоваться простеньким CSS-кодом:

Листинг 4. Фиксация положения ссылки «читать далее» под картинкой

.more-link
{
display: block;
clear: both;
}

Ссылка «читать далее» имеет класс more-link. Благодаря свойствам листинга 4 данный элемент становится блочным и отменяется его обтекаемость со всех сторон.

Результат верстки

С уважением, Андрей Морковин.