如何在 Elementor 文章详情页中显示文章阅读量（两种实现方式）

在使用 Elementor 自定义 WordPress 网站时，很多站长都希望在文章详情页中显示阅读量（浏览次数），以提升页面的互动感和专业性。本文将详细介绍两种主流方式来实现 Elementor 文章页的阅读量展示：使用插件 和 自定义代码，适合不同技术背景的用户。

方法一：使用插件实现（适合初学者）

借助 WordPress 插件，你可以快速且高效地统计并显示文章的阅读次数。

推荐插件

• Post Views Counter（推荐，活跃更新）
• WP-PostViews（老牌轻量插件）

设置步骤

1. 安装插件
   进入后台 插件 > 安装插件，搜索“Post Views Counter”，安装并启用。
2. 配置插件
   • 进入 设置 > Post Views Counter
   • 勾选需要统计的文章类型（如“文章”）
   • 显示位置可以不勾选，我们将在 Elementor 中自定义展示
3. Elementor 中调用阅读量
   • 在文章详情页模板中，添加一个“短代码”小工具
   • 输入以下短代码：

     [post-views]
     

   就能显示当前文章的阅读量了。
   

方法二：通过代码手动实现（适合开发者）

如果你希望更加灵活地控制阅读量统计和展示方式，可以通过代码实现自己的逻辑。

1. 添加阅读量统计功能

将以下代码添加到当前主题的 functions.php 文件中：

// 增加阅读量
function htseo_set_post_views($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if ($count == '') {
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '1');
    } else {
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}

// 获取阅读量
function htseo_get_post_views($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    return $count ? $count : '0';
}

// 在单篇文章访问时增加阅读量
function htseo_track_post_views($post_id) {
    if (!is_single()) return;
    if (empty($post_id)) {
        global $post;
        $post_id = $post->ID;
    }
    htseo_set_post_views($post_id);
}
add_action('wp_head', 'htseo_track_post_views');

2. 创建用于 Elementor 的短代码

继续在 functions.php 中添加以下短代码函数：

// 创建短代码用于显示阅读量
function htseo_post_views_shortcode() {
    if (!is_singular()) return '';
    global $post;
    return '👁️ ' . htseo_get_post_views($post->ID) . ' 阅读';
}
add_shortcode('htseo_post_views', 'htseo_post_views_shortcode');

3. Elementor 中调用短代码

在 Elementor 的文章详情模板中：

• 拖入一个“短代码”小工具
• 输入：

  [htseo_post_views]
  

即可以显示带图标的阅读量，例如：👁️ 128 阅读

总结：选择适合你的方式

无论你是初学者还是 WordPress 高级用户，都可以选择适合自己的方式来优雅地展示文章阅读量，让你的网站更具专业性和互动性。