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

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

HIT

10.06.2016

2096

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

Вариант 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]
  • Похожие записи
  • Комментарии
  • Вложения
Блочная верстка сайта

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

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

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

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

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

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

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

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

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

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6260

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

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