WordPress文章网格页JS调用阅读时间短码失效求助

你的猜测完全正确：WordPress的短码解析是服务器端预执行的流程——页面从服务器输出到浏览器之前，PHP就已经完成了所有短码的解析替换。而你用JS在浏览器加载完页面后动态插入的短码，只是普通文本字符串，服务器不会再对其进行二次解析，自然无法生效。

下面给出两种可行的解决方案：

方案1：服务器端直接输出阅读时长（推荐） #

这是最高效、最稳妥的方式，不需要依赖JS，直接在PHP层面生成阅读时长内容。

方法A：修改主题/Elementor模板 #

找到Elementor文章网格中每个文章卡片的输出位置（主题自带网格找对应PHP模板，Elementor自定义模板用编辑器的动态标签或自定义代码），直接调用你写的get_post_reading_time函数：

// 传入当前文章的永久链接，直接输出阅读时长
echo get_post_reading_time(['url' => get_permalink()]);

方法B：Elementor自定义动态标签 #

如果习惯用Elementor可视化编辑，可以把阅读时长做成自定义动态标签：

1. 在主题function.php中添加标签注册代码：

add_action('elementor/dynamic_tags/register', function($dynamic_tags) {
    class Reading_Time_Tag extends \Elementor\Core\DynamicTags\Tag {
        public function get_name() {
            return 'reading-time-tag';
        }
        public function get_title() {
            return '阅读时长';
        }
        public function get_group() {
            return 'post';
        }
        public function get_categories() {
            return [\Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY];
        }
        public function render() {
            $post_id = get_the_ID();
            $post = get_post($post_id);
            $content = $post->post_content;
            $word_count = str_word_count(strip_tags($content));
            echo ceil($word_count / 200) . ' 分钟阅读';
        }
    }
    $dynamic_tags->register_tag(new Reading_Time_Tag());
});

2. 回到Elementor编辑器，在文章网格的目标位置插入「动态标签」，选择你创建的「阅读时长」标签即可。

方案2：AJAX异步获取阅读时长（适合必须用JS的场景） #

如果因为某些限制只能用JS动态加载，可以通过WordPress的AJAX接口，让客户端请求服务器计算阅读时长：

步骤1：在function.php中添加AJAX接口 #

// 允许登录/未登录用户调用该接口
add_action('wp_ajax_get_reading_time', 'ajax_get_reading_time');
add_action('wp_ajax_nopriv_get_reading_time', 'ajax_get_reading_time');

function ajax_get_reading_time() {
    // 验证参数是否存在
    if (!isset($_GET['post_url'])) {
        wp_send_json_error('缺少文章URL');
    }
    $url = urldecode($_GET['post_url']);
    $post_id = url_to_postid($url);
    
    if (!$post_id) {
        wp_send_json_error('无效的文章链接');
    }
    
    // 复用原有阅读时长计算逻辑
    $post = get_post($post_id);
    $content = $post->post_content;
    $word_count = str_word_count(strip_tags($content));
    $reading_time = ceil($word_count / 200);
    
    wp_send_json_success($reading_time);
}

步骤2：修改JS脚本调用AJAX #

document.addEventListener('DOMContentLoaded', function(){
    let childDivs = document.querySelectorAll('.void-row > *');
    childDivs.forEach(child =>{
        let links = child.querySelectorAll('a');
        if (links.length < 5) return; // 避免索引越界报错
        let postUrl = links[0].href;
        
        // 调用WordPress AJAX接口获取阅读时长
        fetch(`${window.location.origin}/wp-admin/admin-ajax.php?action=get_reading_time&post_url=${encodeURIComponent(postUrl)}`)
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    links[4].textContent = `${data.data} 分钟阅读`;
                } else {
                    links[4].textContent = '阅读时长未知';
                }
            })
            .catch(() => {
                links[4].textContent = '阅读时长未知';
            });
    });
});

内容的提问来源于stack exchange，提问作者Lilly Clus