В моем нынешним шаблоне, который установлен на этом сайте, записи просто находятся внутри блоков, у которых фон, отличается от основного плюс рамка. Это их выделяет, но особо необычного в этом нет. Тут же хочу сделать следующую вещь.
Я решил разбить записи на четные и нечетные и прижать их к разным сторонам. Нечетные записи - 1,3,5,7 и тд. будут прижаты к левой части контента, а вот четные записи 2,4,6,8 к правой. При этом их ширина немного уже, чем ширина всего контента.
Немного поискав, я нашел метод, который вносит дополнение в основной цикл и четным постам присваивает новый класс. Выглядит это примерно так.
Забегу наперед, но скажу также и то, что можно не только двигать записи. Например можно сделать разный размер для миниатюр на главной. Выделить заголовки и придать новые стили четным и нечетным записям. Также с помощью данного метода, можно выделить не только четные и нечетные записи, можно выделить, например, каждую третью запись или четвертую и тд. В общем, все зависит от Вашей фантазии.
Давайте же рассмотрим, что нужно сделать, для того, чтобы у нас все получилось.
Как и писал выше, данный способ вносит изменения в цикл. Так что для того чтобы работало все как надо, нам нужно во всех местах, где есть цикл и где вы хотите изменить вывод записей. Такие циклы есть на главной - index.php, в файле вывода записей категории - category.php и тд.
Стандартный цикл имеет примерно следующий вид
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?> // Тут запись <?php endwhile; ?> <?php endif; ?>
Новый цикл немного изменен и для того чтобы все получилось, записи, которые будут внутри, нужно заключить в блок и прописать ему какой-то основной класс плюс добавить условие. Имеет все это, вот такой вот вид:
<?php if ( have_posts() ) : $count = 0; while ( have_posts() ) : the_post(); $count++; ?> <div class="post_block<?php if ($count % 2 == 0 ) echo ' two'; ?>"> // Тут запись </div> <?php endwhile; ?> <?php endif; ?>
цикл считает записи и в классе, там где условие, к нужной записи добавляет новый класс. В нашем случаи - это two. Обратите, что в нашем коде перед классом two есть пробел. Тогда у Вашего блока, будет два класса. как и задумано. Если не поставить пробел, то у вас к классу post_block, как в примере просто добавится три буквы в название и он станет - post_blocktwo.
Так тоже можно по сути, но тогда Вам придется прописывать дважды одинаковые стили, изменяя всего те что нужно. В первом же случаи, просто пропишите новые стили для класса two.
В условии есть код $count % 2 == 0, где как раз и задается, какой записи по счету присваивать новый класс. В данном случаи там стоит цифра - 2, изменять каждую вторую запись. Если поставите - 3, то будет изменятся каждая 3 и тд.
Далее, как писал выше, просто добавьте нужные стили. В моем случаи это было прижатие к разным сторонам. Стили примерно такие:
.post_block{margin:0 100px 40px 0;position:relative;padding:25px;background:#f4f4f4;}
.two{margin:0 0 40px 100px;}
По стилях видно, что мы сдвигаем блок от правой стороны на 100 пикселей, а блок у которому присвоен класс - two, наоборот, на 100 пикселей от левого.
Как и говорил, менять можно что угодно, все зависит от Вашей фантазии.
Как вы относитесь к необычному виду блога?
На этом все, спасибо за внимание. 🙂
