Использование Masonry. Как сделать так, чтобы каждое миниатюрное изображение X-го поста занимало несколько столбцов?

Question

Чтобы быть конкретным:

• Я использую Masonry, чтобы показывать все сообщения в определенной категории.
• Миниатюры для каждого сообщения отображаются на странице категории в формате из трех столбцов с использованием столбцов с изменяемой шириной CSS.
• Мне нужно показать седьмое миниатюрное изображение, охватывающее ширину всех трех столбцов.

Раньше я добавлял счетчик к сообщениям, чтобы настроить таргетинг на X-е сообщение, чтобы соответствующим образом применить класс и стиль.Но возможно ли это в масонстве, которое абсолютно позиционирует элементы?

РЕДАКТИРОВАТЬ

Я использую этот код для запроса сообщений на странице каменной кладки:

    if ( get_query_var( 'paged' ) ) {
    $paged = get_query_var( 'paged' );
} elseif ( get_query_var( 'page' ) ) {
    $paged = get_query_var( 'page' );
} else {
    $paged = 1;
}
$args = array(
    'posts_per_page' => 12, 
    'paged' => $paged
);

// Override the primary post loop
query_posts( $args );

Answer 1

Итак, я не мог понять, как добавить класс рядных последовательностей на каждый Post / Article Div, но я просто изменил шаблон для 7-го поста в шаблоне кладки.

Я сделал это так:

<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while (have_posts()) : the_post(); ?>

<?php $count++; ?>
<?php if ($count == 7) : ?>

     <article class="masonry-entry masonry-3col masonry-post-no-7">
     </article>

<?php else: ?>  

     <article class="masonry-entry masonry-3col">
     </article>
<?php endif; ?>
<?php endwhile; ?>

.

Answer 2

Это не должно быть проблемой с Masonry, по крайней мере, у меня никогда не было проблем с ним (или его аналогичным эквивалентом Isotope).На самом деле, красота этих библиотек заключается в том, что вы можете иметь такой макет.Остальное сводится к правильным стилям CSS.Я не знаю, как вы применяете свой класс счетчика/индекса, но я бы сделал это, как показано ниже:

function wpse151589_indexed_post_class( $classes ) {
    global $wp_query;

    // the current_post property value starts counting at 0
    // we are doing + 1 to start from 1
    $index = $wp_query->current_post + 1;

    // if you want the number to always have 3 digits
    // like 001, uncomment the next line
    //$index = sprintf( '%1$03d', $index );

    // results in classes like post-nr-1/001
    $classes[] = 'post-nr-' . $index;

    return $classes;
}
add_filter( 'post_class', 'wpse151589_indexed_post_class' );

---

Редактировать: Ответ на комментарий

Есть некоторые вещи, которые мне хотелось бы отметить,

1. Делать нет использовать query_posts()

   Есть причина, по которой даже на соответствующей странице кодекса говорится:

   Эта функция не предназначена для использования плагинами или темами.Как будет объяснено позже, существуют лучшие и более производительные варианты изменения основного запроса.

   И позже:

   Для общих запросов к сообщениям используйте WP_Query или get_posts.

   И:

   Это сильно рекомендуется использовать pre_get_posts вместо этого отфильтруйте и измените основной запрос, проверив is_main_query

   Два наиболее информативных и выдающихся источника по почему на самом деле находятся здесь, на WordPress Development, их абсолютно стоит прочитать:

   • Когда следует использовать WP_Query, query_posts() и get_posts()?
   • Когда использовать WP_query(), query_posts() и pre_get_posts
     
     

2. Что post_class() нельзя использовать снаружи петля является нет истинный

   Есть даже раздел об этом в документации.Предоставлена ​​страница кодекса для post_class не самое лучшее, но достаточно ясно, что у функции есть два параметра: $classes и $post_id.

   post_class( $classes, $post_id );
   

   Что значит:

   Для отображения сообщений вне цикла или в альтернативном цикле вторым параметром функции post_class может быть идентификатор сообщения.Классы затем будут определены на основе этого поста.

   Это - в дополнение к информации от 1.- дает возможность использовать это в своих целях.
   
   

3. А WP_Query объект имеет свойство с именем $current_post

   $current_post
   (доступно во время Петля) Индекс сообщения, отображаемого в данный момент.

   Его можно использовать в своих целях, поэтому не нужно изобретать велосипед.