WordPress. Как расположить посты в несколько колонок.

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

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

На самом деле все очень просто, когда знаешь, куда воткнуть эти три строчки. Но ведь в том-то и загвоздка, что надо знать что и куда.

Сначала коротко, для тех, кто итак все знает:
Для верстки в несколько колонок достаточно каждый пост заключить в теги

 <div style="width: 250px; float:left;"> </div>

Где 250 это ширина колонки. Так же можно подумать над выводом сразу двух постов в блоке, чтобы между верхним и нижним не было разрывов. Но это сами. ))

И не забудьте после завершения цикла воткнуть

<div style="clear: both;"></div>

чтобы отменить float:left;

Для тех, кто знает чуть меньше, буду рассказывать по-порядку.
1) Находим файл отвечающий за вывод постов. Это обычно index.php для главной, arhive.php для архивов, category.php для рубрик. Если какого-то из файлов нет, то обычно его заменяет все тот же index.php

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

while (have_posts()) : the_post();

его и ищите.
Когда нашли эту строку, то ищем ниже строчку

 endwhile;

Убедитесь, что она относится именно к нужному циклу, а не к другому. Хотя обычно других циклов в файле все равно нет. Рядом с этими строчками мы и будем работать.

Итак сразу после открытия цикла пишем

	<div style="width: 250px; float:left; 
margin:10px 1px 10px 10px; 
padding:20px 5px 20px 5px; 
border:1px solid #d3d3d3;">

Параметры width, margin, padding и border вы будете подгонять под свои вкусы. Однако смысл их я, конечно, объясню.
margin задает отступы ВОКРУГ блока, тем самым увеличивая занимаемое им место. Параметры задаются по часовой стрелке. Верх, право, низ, лево. Есть разные записи этого параметра, я описал только самую понятную.
padding задает отступы ВНУТРИ блока. Порядок сторон тот же.
width это собственно ширина блока. Однако считать надо в сумме с вторым и четвертым параметрами margin. Сумма значения должна несколько раз умещаться в ширину родительского блока. Если вы не можете узнать ширину родительского блока, то просто угадайте ее методом подбора, меняя параметр width нашего блока.
border это рамка для красивости. Толщина, тип и цвет. Если рамка не нужна эту часть можно просто удалить.

Но это не все.
Обязательно закройте тэг, вставив строчку

</div>

перед концом цикла.

Ну и завершающую

<div style="clear: both;"></div>

После цикла.

Не забывайте учитывать языки и если после кода php нет закрывающего тега

?>

, то поставьте его сами, но опять откройте после вашей вставки.

__
По-мойму клевый пост вышел. Мне самому несколько раз его очень не хватало.
Еще два будут про вывод картинки и про обрезку текста.


Автор: Elsper.ru


VN:F [1.9.14_1148]
Rating: 8.6/10 (9 votes cast)
WordPress. Как расположить посты в несколько колонок., 8.6 out of 10 based on 9 ratings

10 thoughts on “WordPress. Как расположить посты в несколько колонок.

  1. Используя такую схему, необходимо следить за высотой блоков. В ситуации, когда левый верхний блок (1) будет больше по высоте, чем правый верхний (2), левый нижний (3) уедет вправо, а слева будет пустота, соответственно и ниже посты тоже поедут. Т.к. выравнивание влево блока (3) упрется в выступающую часть блока (1).
    (1)(2)
    (_)(3)

  2. учитывая замечание ptic, можна сделать анализ на четность и верхний пост кидать или на всю ширину, или на 50% в итоге получим если четно то
    (1)(2)
    (3)(4)
    если не четно то
    ( 1 )
    (2) (3)
    (4) (5)

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

  4. Есть возможность каждому блоку придать класс с личным id, очень удобно при редактировании

  5. Спасибо!!! Три дня пытался посты в рамку заключить пока не нашёл ваш пост!!! Всё заработало именно так как и хотел! Большое спасибо! 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Спoнcopcкиe ссылки

Частные объявления Знакомства Железногорска.