/ Wordpress / Первая последняя записи в ряду

Первая последняя записи в ряду

HIT

10.06.2016

1587

Добавляем классы для первых и последних записей в ряду.

Вариант 1: Глобально, в файле функций

Вставляем в файл functions.php. В данном примере разделение по 4 записи в ряду.

add_filter('post_class', 'dobavit_pervii_klass');
 
function dobavit_pervii_klass($klassi) {
  
  global $wp_query;
  
  if (!(($wp_query->current_post) % 4)):
  $klassi[] = 'first';
  elseif (!((1+$wp_query->current_post) % 4)):
  $klassi[] = 'last';
  endif;
 
  return $klassi;
    
}
Данная функция некорректно работает с вызовом get_posts. А также сбои возникают при подгрузках Ajax

Вариант 2: Локально, в выводе записей

Данный код внедряем в шаблоне вывода записей.

<?php
if (have_posts()) :

$i = 1;

while (have_posts()) :

if ($i === 1) { $new_class = "first-post"; }
elseif ($i % 3 == 0) {$new_class = "last-post"; $i = 0; }
else { $new_class = ""; }

the_post();
?>

<div class="<?php $allClasses = get_post_class(); foreach ($allClasses as $class) { echo $class . " "; } ?> <?php echo $new_class; ?>" id="post-<?php the_ID(); ?>">


<a href="<?php the_permalink(); ?>">
<?php
if( has_post_thumbnail() )
{the_post_thumbnail('rectangle');}
else
{echo '<img src="'.get_template_directory_uri().'/images/img-default.jpg" />';}
?>
</a>

<div class="line-cont">


<h3 class="title-post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="excerpt"><?php the_excerpt(); ?></div>
<?php if( get_the_tag_list()): ?><?php the_tags( '<small class="tag">', ' / ', '</small>' ); ?><?php endif; ?>


</div>
</div>
<?php
$i++;
endwhile;
endif;
?>

В самом цикле можно было бы просто делать ссылку на solus.php (отдельным файл с конструкцией отдельной записи), но так в нее не будет проходить переменная $new_class.
Есть альтернатива: выводить solus.php через include ( include(TEMPLATEPATH.»/solus.php»); ).

Для добавления нового класса к post_class я применил такую конструкцию

<div class="<?php $allClasses = get_post_class(); foreach ($allClasses as $class) { echo $class . " "; } ?> <?php echo $new_class; ?>" id="post-<?php the_ID(); ?>">

Система расстановки записей

В зависимости от шаблона или модуля записи могут выводится по разному: по одной в ряд, по 3 в ряд, по 4 и т.д.

Для того чтобы назначать кратность нужно сделать 2 вещи:

1. Изменить кратность в строке формирования цикла elseif ($i % 3 == 0) {$new_class = «last-post»; $i = 0; }
2. Глобально для разных шаблонов задавать класс кратности. В примере ниже для шаблона Результат поиска записям добавляется класс quaternion (по 4), т.к. в шаблоне нет сайтбара, для остальных шаблонов задается класс ternary (по 3).

add_filter('post_class', 'dobavit_fold_klass');
 
function dobavit_fold_klass($klassi) {
    global $wp_query;
    if (is_search()) : $klassi[] = 'quaternion';
    else : $klassi[] = 'ternary';
    endif;
    return $klassi;
}

Для классов quaternion и ternary задаем соответствующие параметры ширины

.hentry {float: left; position: relative;}

.ternary {width: 32%; margin: 0 1% 30px 1%;}
.quaternion {width: 24%; margin: 0 0.515% 30px 0.515%;}

.first-post {margin-left: 0;}
.last-post {margin-right: 0;}

Есть еще один альтернативный вариант — сделать Нестандартный цикл wordpress.

Либо, если все блоки на одном фоне, использовать облегченный способ верстки.

[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Фоновые линии

Фоновые линии

Добавим линии в верстку сайта. Это разбавит однородный фон, а также придаст стройности разным блокам контента. 6 секторов Разделение фона линиями на 6 секторов. 12 секторов Тот же самый принцип, Читать далее »

/
Responsive block’s

Responsive block’s

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

Верстка типовых блоков

Верстка типовых блоков

Находим оптимальные решения верстки типовых блоков, т.е. конструкций которыми на различных сайтах приходиться пользоваться часто. Изображение текст Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности Читать далее »

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

Пока нет комментариев. Будь первым!

Первая последняя записи в ряду
Сравнение товаров (Compare)
Рекомендации для васСравнение товаров (Compare)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.