Запрос WordPress Post — перенос элемента внутри div и добавление активного класса

#php #html #css #wordpress

#php #HTML #css #wordpress

Вопрос:

Мне нужен ваш опыт, я в замешательстве от такого подхода.

Что я пытаюсь сделать, так это то, что если span3 равен 3 элементам, он обернет его внутри элемента и строки div, и у первого элемента div будет активный класс.

Чего я пытаюсь достичь

   <div class="item active">
                <div class="row-fluid">
                    <div class="span3">
                        <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                    <div class="span3">
                        <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                    <div class="span3">
                        <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
                <!--/row-fluid-->
  </div>
 

Мой текущий почтовый индекс запроса WordPress

 <?php
$args = array(
   'post_type' => 'post',
   'posts_per_page' => -1,
   );
query_posts($args);
$x = 0;
while (have_posts()) : the_post(); ?>
<div class="item active">
          <div class="row-fluid">
              <div class="span3">
                         <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width: 100%;" /></a>
              </div>
          </div>
</div>

<?php if ($x == 3) { echo '</div></div><div class="item"><div class="row-fluid">'; $x = -1; } $x  ; ?>
<?php endwhile; ?>
 

Ответ №1:

Для этого вы можете использовать modulo сравнение.

По сути, ваши элементы упаковки (открытие и закрытие) будут выводиться только в том случае, если значение по модулю = 0 или 2. Это означает, что три ваших интервала будут выведены до того, как будут добавлены открывающие и закрывающие теги.

 <?php
$args = array(
    'post_type' => 'post',
    'posts_per_page' => -1,
);
query_posts($args);
$x = 0;
while (have_posts()) : the_post(); ?>
    /* This will evaluate to "0" to the 1st, 4th, 7th, etc. */
    <?php if ( $x % 3 === 0 ) : ?>
        <div class="item active">
            <div class="row-fluid">
    <?php endif; ?>
        <div class="span3">
            <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width: 100%;" /></a>
        </div>
    /* This will evaluate to "2" every third item. So it will add the closing tag */
    <?php if ( $x % 3 === 2 ) : ?>
            </div><!-- /row-fluid -->
        </div><!-- /item -->
    <?php endif; ?>

    <?php $x  ; ?>
<?php endwhile; ?>