为前3个帖子添加单独的课程-WordPress

时间:2018-07-04 09:23:16

标签: php jquery arrays wordpress jquery-isotope

在我的wordpress帖子页面(index.php)上,我正在使用Metafizzy Isotope显示我的博客帖子。

我想在数组的最新3个项目中添加一个额外的类,以便我可以略微改变它们的样式。我当前的代码如下,该代码用于获取index.php上的帖子。每个三个类别都需要不同,即“第一”,“第二”和“第三”。

<?php $args = array( 'post_type' => 'post', 'posts_per_page' => 30 ); ?>

<?php $the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

<div class="grid">

<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>


<?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
$termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term 
$termsString .= $term->slug.' '; //create a string that has all the slugs 
}
?>


<div class="<?php echo $termsString; ?>grid-item">
    <div class="grid-item-inner">
        <div class="gi-inner-img">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
        </div>
        <div class="gi-inner-content">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
            <p><?php the_excerpt(); ?></p>
            <span class="item-date"><?php the_date(); ?></span>
        </div>
    </div>
</div> 


<?php endwhile;  ?>

</div> <!-- end -list -->

<?php endif; ?>

3 个答案:

答案 0 :(得分:3)

您必须定义一个变量,该变量将在每次循环内自动递增,因此将$count = 1放在while循环上方,或使用下面已经完成的代码。

<?php if ( $the_query->have_posts() ) : ?>

<div class="grid">

<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>


<?php $count = 1;
while ( $the_query->have_posts() ) : $the_query->the_post(); 
$termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term 
$termsString .= $term->slug.' '; //create a string that has all the slugs 
}
?>


<div class="<?php echo $termsString; ?>grid-item <?php if($count == 1){ echo "first"; } elseif($count == 2){ echo "second"; }elseif($count == 3){ echo "third"; } ?>">
    <div class="grid-item-inner">
        <div class="gi-inner-img">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
        </div>
        <div class="gi-inner-content">
            <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
            <p><?php the_excerpt(); ?></p>
            <span class="item-date"><?php the_date(); ?></span>
        </div>
    </div>
</div> 
<?php $count++;
endwhile;  ?>

</div> <!-- end -list -->

<?php endif; ?>

答案 1 :(得分:2)

看看工作代码。

        <?php 
        $flag=0;
        while ( $the_query->have_posts() ) : $the_query->the_post(); 
        $termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
        $termsString = ""; //initialize the string that will contain the terms
        foreach ( $termsArray as $term ) { // for each term 
        $termsString .= $term->slug.' '; //create a string that has all the slugs 
        }

        // class logic
        $class='';
        if($flag==0) $class="first";
        elseif($flag==1) $class="second";
        elseif($flag==2) $class="third";

        ?>


        <div class="<?php echo $termsString; ?>grid-item <?php echo $class;?>">
            <div class="grid-item-inner">
                <div class="gi-inner-img">
                    <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
                </div>
                <div class="gi-inner-content">
                    <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
                    <p><?php the_excerpt(); ?></p>
                    <span class="item-date"><?php the_date(); ?></span>
                </div>
            </div>
        </div> 


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

答案 2 :(得分:1)

您需要什么?只需添加课程? 最简单的方法是在while循环中增加;

喜欢

  $i = 1;
    while(condition) :

   $i++;

 endwhile;

在您的代码中,就像

    <?php $args = array( 'post_type' => 'post', 'posts_per_page' => 30 ); ?>

    <?php $the_query = new WP_Query( $args ); ?>

    <?php if ( $the_query->have_posts() ) : ?>

    <div class="grid">

    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>


    <?php 
$i = 1;
while ( $the_query->have_posts() ) : $the_query->the_post(); 
    $termsArray = get_the_terms( $post->ID, 'category' );  //Get the terms for this particular item
    $termsString = ""; //initialize the string that will contain the terms
    foreach ( $termsArray as $term ) { // for each term 
    $termsString .= $term->slug.' '; //create a string that has all the slugs 
    }
    ?>


    <div class="<?php echo $termsString; ?>grid-item <?php echo $i; ?>">
        <div class="grid-item-inner">
            <div class="gi-inner-img">
                <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_post_thumbnail( 'full' ); ?></a>
            </div>
            <div class="gi-inner-content">
                <a href="<?php echo get_permalink( $post->ID ); ?>"><?php the_title( '<h3>', '</h3>' ); ?></a>
                <p><?php the_excerpt(); ?></p>
                <span class="item-date"><?php the_date(); ?></span>
            </div>
        </div>
    </div> 


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

    </div> <!-- end -list -->

    <?php endif; ?>

现在您将拥有一个类似于“ grid-item 1”的类