Создание 2-х колоночного шаблона WordPress. Часть 6. Контент (продолжение)

Создание 2-х колоночного шаблона WordPress

Дабы не плодить многабукаф, решил я разделить отдельные темки цикла «Создание шаблона WordPress» на части. Сегодня продолжим разговор за самый важный блок, а именно — Контент.

Изображения в постах WordPress

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

part61.gif

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

#noticias {
float: left;
margin: 0;
padding: 0 0 20px 20px;
width: 550px;
}

С учетом того, что в правилах для этого блока задан отступ слева в 20 пикселей, размер картинки выбираем: 550 – 20 – 5(на всякий случай) = 525.

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

part62.gif

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

part63.gif

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

Вариант 1. Прописать заранее в листе стилей CSS для всех изображений в тексте обтекание слева или справа. Например:

#noticias img {
float: left;
margin: 0 10px 10px 0;
}

Это правило означает, что все изображения, помещенные в блоке #noticias, будут «плавать» слева от текста. Причем снизу и справа от картинки текст будет на расстоянии 10 пикселей.

part64.gif

Точно также можно задать и плавание справа:

#noticias img {
float: right;
margin: 0 0 10px 10px;
}

part65.gif

Обратите внимание: значения полей изменились. Теперь уже снизу и слева от картинки текст расположен на расстоянии 10 пикселей.

Вариант 2. Прописать, опять же заранее, в листе стилей CSS два класса для изображений, соответственно для правого и левого обтекания. Например так:

#noticias .floatleft {
float: left;
margin: 0 10px 10px 0;
}

#noticias .floatright {
float: right;
margin: 0 0 10px 10px;
}

Затем, когда пишете пост, переключитесь в режим отображения кода (вообще рекомендую всем заранее зарулить в свой профиль в админке и убрать галочку в строке «Использовать визуальное редактирование», чтобы всегда писать посты только в режиме кода).

Добавив в пост картинку, увидим в тексте примерно следующее:

<img src='http://www.vorobyaninov.com/wp-content/uploads/2008/08/muzshiksosv.jpg' alt='muzshiksosv.jpg' />

Если нам нужно, чтобы картинка «плавала» левее текста, то мы прямо по ходу написания поста правим этот код следующим образом:

<img class="floatleft" src='http://www.vorobyaninov.com/wp-content/uploads/2008/08/muzshiksosv.jpg' alt='muzshiksosv.jpg' />

То есть, просто к тэгу img добавляем class со значением floatleft.

Лирическое отступление:

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

Вариант 3. Прописываем стиль непосредственно в коде картинки. Этим способом пользуюсь я сам, потому что мне так проще и удобнее. Хотя должен признать, что это идет в разрез с правилами консорциума W3C.

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

<img style="float: left; margin: 0 10px 10px 0;" src='http://www.vorobyaninov.com/wp-content/uploads/2008/08/muzshiksosv.jpg' alt='muzshiksosv.jpg' />

Здесь мы внедрили стиль прямо «по-месту». Правила здесь пишутся практически точно так же, как и в CSS, только без фигурных скобок. Не теряем знаки : и ; ну и кавычки конечно же!

UPD от 01.12.2015: В современных версиях движка WordPress обтекание можно задавать непосредственно во время добавления картинки в пост. Для этого в файле стилей вашего шаблона должно быть заранее прописано два простых правила:

.floatleft {
float: left;
margin: 0 10px 10px 0;
}

.floatright {
float: right;
margin: 0 0 10px 10px;
}

Все супер, картинка встала как надо! только вот почему вдруг получилась вот такая вот фигня?

part66.jpg

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

В том числе, и нижеследующему посту, так как он является ни чем иным как тем же текстом! А произошло такое по простой причине: у нашего поста с картинкой слишком мало своего текста. Потому нижележащий пост «подтянулся» кверху.

Чтобы этого не происходило, открываем файл index.php, находим там вот это место:

<?php the_content("Continue reading ".the_title('', '', false)."..."); ?>

Этот кусок кода выводит непосредственно сам пост. Сразу же за ним впишем следующую строку:

<div class="clearfloat"></div>

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

.clearfloat {
clear: both;
}

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

Вариант 4. Использование сторонних программ-приложений. Как вариант — это тоже можно использовать. Речь идет о Windows Live Writer.

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

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

Создание 2-х колоночного шаблона для Вордпресс. Часть 1. Рисуем макет
Создание 2-х колоночного шаблона для Вордпресс. Часть 2. Состав шаблона
Создание 2-х колоночного шаблона для Вордпресс. Часть 3. Шапка
Создание 2-х колоночного шаблона для Вордпресс. Часть 4. Шапка (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 5. Контент
Создание 2-х колоночного шаблона для Вордпресс. Часть 6. Контент (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 7. Сайдбар (Навигация)
Создание 2-х колоночного шаблона для Вордпресс. Часть 8. Подвал
Создание 2-х колоночного шаблона для Вордпресс. Часть 9. Комментарии

11.08.2008

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: