Цикл wordpress: как добавить css определенным по счету постам?

34 сообщения

#7 лет назад

Здравствуйте! Подскажите, пожалуйста, как добавить css определенным по счету постам?
Есть такой вот цикл в теме wordpress:

<main id="main" class="site-main" role="main">


         <?php if ( have_posts() ) : ?>


            <?php /* Start the Loop */ ?>

            <div class="posts-loop">

            <?php while ( have_posts() ) : the_post(); ?>


               <?php

                  /* Include the Post-Format-specific template for the content.

                   * If you want to override this in a child theme, then include a file

                   * called content-___.php (where ___ is the Post Format name) and that will be used instead.

                   */

                  get_template_part( 'template-parts/' . $post_template );

               ?>


            <?php endwhile; ?>

            </div><!-- / .posts-loop -->


            <div class="postnav">

               <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

            </div>


         <?php else : ?>


            <?php get_template_part( 'template-parts/content', 'none' ); ?>


         <?php endif; ?>

      </main><!-- #main -->

А вот содержимое файла content.php, куда нужно добавить CSS для постов.

<article id="post-<?php the_ID(); ?>" <?php post_class( 'list-post grid_item' ); ?> >

Здесь вся информация постов и т.д.

</article>

Необходимо добавить CSS, скажем, "custom-post" для каждой 5-й записи (или любой другой, 6, 7....)

<article id="post-<?php the_ID(); ?>" <?php post_class( 'list-post grid_item' ); ?> >

Важное уточнение! Класс "custom-post" необходимо добавить, начиная с ПЕРВОГО поста и дальше каждый 5-й. Получается css класс должен добавляться таким по счету постам: 1, 5, 10 и т.д.

34 сообщения

#7 лет назад

Нашел простое вроде бы решение, но не знаю рабочее ли оно для моей ситуации, и не знаю куда всталять код.
Outside your loop:

$classes = array(

0=>'first-column',

1=>'second-column',

2=>'third-column'

);

$i = 0;

In your loop:

<article id="post-<?php the_ID(); ?>" <?php post_class($classes); ?>>

output like :

<article class="first-column format-standard hentry category-uncategorized">

<article class="second-column format-standard hentry category-uncategorized">

<article class="third-column format-standard hentry category-uncategorized">

<article class="first-column format-standard hentry category-uncategorized">

<article class="second-column format-standard hentry category-uncategorized">

<article class="third-column format-standard hentry category-uncategorized">

834 сообщения

#7 лет назад

В начале, перед while вставить
$i=0; $first = true; $iter = 5;
значение переменной $iter кол-во постов которым будет приписываться что то
в месте где надо впилить стиль
<?php if($i == $iter || $first) {echo 'style="display:block;"'; $i = ($first) ? 1 : 0; $first = false; } else {$i++;} ?>

Можно еще делением по модулю=) Как в вашем примере

953 сообщения

#7 лет назад

<?php $i=0; while ( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" class="list-post grid_item<?php if($i==0 || $i%5==0){echo ' custom-post';} ?>">

Здесь вся информация постов и т.д.

</article>

<?php $i++; endwhile; ?>

1 сообщение

#7 лет назад

Может я чего-то недопонял в Вашей проблеме, но что мешает применять к стилям постов :nth-child(5n) ?

1205 сообщений

#7 лет назад

lufter, самое оптимальное, на мой взгляд, решение.
orl_76, так правильней будет и кроссбраузерно.

144 сообщения

#7 лет назад

Тоже сразу про nth-child подумал, но автору еще и первый нужен, так что нужен еще и first-child, как-то ссылка.