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

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

10.06.2016

542

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

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

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

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
FlexBlock. Современная верстка

FlexBlock. Современная верстка

Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке div с float (frame), далее промежуточный этап верстка diplay:inline-block. Так или иначе суть верстки — модульная сетка. Современный CSS дает нам Читать далее »

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

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

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

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

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

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

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

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

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