與數字WordPress相關的帖子

Question

我想在帖子中添加數字以獲取以下輸出：

 <?php 
                        $args= array(
                            'posts_per_page'=>8,
                            'date_query' => array(
                                array(
        'year' => date( 'Y' ),
        'week' => date( 'W' ),
    ),
),
                            'meta_key' => 'popular_posts',
                            'order' => 'DESC',
                            'orderby' => 'meta_value_num'

                            );
                            $i=0;
                            $funLoop = new WP_Query( $args );
                            while ($funLoop -> have_posts() ) : $funLoop->the_post(); $i++;
                            $cat = get_the_category($post->ID)[0];
                        ?>

 <div class="small-12 medium-6 columns unpadded"> <article class="small-12 med columns articles-<?php echo$cat->slug; ?>"> <a href="<?php the_permalink();?>"> <div class="number"> 1. </div> 

Answer 1

最好的方法是將您的內容包裝在<ol> 。 但是，如果不能，則可以使用css計數器。

示例：您的html：

<div class="small-12 medium-6 columns unpadded">
<article class="small-12 med columns articles-<?php echo$cat->slug; ?>">
<a href="<?php the_permalink();?>">
<div class="number">

</div>
</a>
<a href="<?php the_permalink();?>">
<div class="number">

</div>
</a>
<a href="<?php the_permalink();?>">
<div class="number">

</div>
</a>
</article>

CSS：

    body {
      counter-reset: mynum;
    }

    .artikulli a .number {
      counter-increment: mynum;
    }
   .artikulli a .number:before {
      content: counter(mynum)".";
    }

工作碼本： https ://codepen.io/anon/pen/VBgKrW