背景介绍

1
2
3
4
5
6
7
8
9
10
11
12
添加序号计数器

为前三名添加特殊class

移除浏览量显示

添加target=”_blank”属性

保持原有查询逻辑不变

修改后的完整代码如下：

具体代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul>
    <?php 
    $args = array(
        'meta_key' => 'views',
        'orderby' => 'meta_value_num',
        'posts_per_page' => 8, // 显示8篇文章
        'order' => 'DESC'
    );
    query_posts($args);
    $count = 0; // 初始化计数器
    while (have_posts()) : the_post(); 
        $count++; // 每循环一次计数+1
        $class = ($count <= 3) ? 'red' : ''; // 前3名添加red类
    ?>
        <li>
            <i class="<?php echo $class; ?>"><?php echo $count; ?></i>
            <a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a>
        </li>    
    <?php 
    endwhile;
    wp_reset_query();
    ?>
</ul>

关键修改说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
添加了 $count 计数器变量跟踪文章序号

使用三元运算符动态设置class：$class = ($count <= 3) ? ‘red’ : ”;

在 标签中显示序号并应用样式类

在链接中添加了 target=”_blank” 实现新标签页打开

移除了浏览量显示部分

将文章数量改为8篇 (‘posts_per_page’ => 8)

最终效果会生成类似这样的结构：

1
2
3
4
5
6
7
8
<ul>
    <li><i class="red">1</i><a href="..." target="_blank">标题1</a></li>
    <li><i class="red">2</i><a href="..." target="_blank">标题2</a></li>
    <li><i class="red">3</i><a href="..." target="_blank">标题3</a></li>
    <li><i class="">4</i><a href="..." target="_blank">标题4</a></li>
    <!-- 继续显示到第8篇 -->
</ul>