为前 3 个帖子添加个人 class - Wordpress
Add individual class for first 3 posts - Wordpress
在我的 wordpress 帖子页面 (index.php) 上,我使用 Metafizzy Isotope 来显示我的博客帖子。
我想向数组中的最新 3 项添加一个额外的 class,这样我就可以稍微改变它们的样式。我当前的代码如下,用于获取 index.php 上的帖子。每三个的 class 需要不同,即 "first"、"second" 和 "third"。
<?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; ?>
你需要什么?就加一个class?
最简单的方法是在 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; ?>
现在您将拥有 class 喜欢 "grid-item 1"
看看工作代码。
<?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; ?>
在我的 wordpress 帖子页面 (index.php) 上,我使用 Metafizzy Isotope 来显示我的博客帖子。
我想向数组中的最新 3 项添加一个额外的 class,这样我就可以稍微改变它们的样式。我当前的代码如下,用于获取 index.php 上的帖子。每三个的 class 需要不同,即 "first"、"second" 和 "third"。
<?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; ?>
你需要什么?就加一个class? 最简单的方法是在 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; ?>
现在您将拥有 class 喜欢 "grid-item 1"
看看工作代码。
<?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; ?>