繁体   English   中英

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

[英]Add individual class for first 3 posts - Wordpress

在我的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; ?>

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

<?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; ?>

看一下工作代码。

        <?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;  ?>

你需要什么? 只需添加课程? 最简单的方法是在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”的类

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM