Главная
Wordpress
Четные и нечетные посты на главной WordPress
  • 06 Мар 2015г
  • 1395
  • 0
  • Рубрика: Wordpress

Четные и нечетные посты на главной WordPress

Четные и не четные

Доброго времени суток. 🙂

На днях начал работу над новой темой WordPress. Это будет платная тема для личного блога. Хотелось как то придать ей необычный вид. Немного помыслив и набросив варианты, решил выделить записи на главной.

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

Я решил разбить записи на четные и нечетные и прижать их к разным сторонам. Нечетные записи - 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 пикселей от левого.

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

Как вы относитесь к необычному виду блога?

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(2 голоса, в среднем: 3 из 5)

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий