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

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

HIT

10.06.2016

1140

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

Вариант 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.

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

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Блочная верстка сайта

Блочная верстка сайта

Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков. Для добавления блоков, используйте тэги <div class="box"> <div class="block-1">Содержимое</div> — ширина Читать далее »

Одинаковая высота блоков

Одинаковая высота блоков

Одинаковая высота блоков является насущной проблемой при разработке дизайна сайта, средствами css это делать не удобно, т.к. требует специальной верстки. Отлично с данной задачей справляется jQuery. Скрипт EqualHeight Скрипт для Читать далее »

Галерея изображений Masonry

Галерея изображений Masonry

Masonry — это принцип построения изображений (блоков) занимая все пространство, по аналогии со строительной кладкой. Галерея изображений Masonry jquery Вставляем изображения в общий div с классом grid, каждое изображение в Читать далее »

/

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

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

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