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)".";
    }

有效的Codepen：https://codepen.io/anon/pen/VBgKrW

与数字WordPress相关的帖子

1 个答案: