WordPress后台新建页面时如何设置路径变量实现统一页面路由？

WordPress后台新建页面时确实没有原生支持路径变量的选项，但可以通过自定义重写规则实现你要的效果，具体步骤如下：

1. 创建基础承载页面 #

先在wp-admin的页面管理里新建一个页面，将页面的slug设置为club（对应URL里的/club/部分），这个页面会作为所有/club/xxx这类请求的统一承载页面。

2. 添加自定义重写规则 #

在主题的functions.php文件或者自定义插件中添加以下代码，用来匹配/club/xxx的URL并映射到刚才创建的club页面：

// 添加重写规则
function custom_club_rewrite_rule() {
    add_rewrite_rule(
        '^club/([^/]+)/?$', // 匹配/club/xxx的URL结构
        'index.php?pagename=club&club_slug=$matches[1]', // 转发到club页面，并传递club_slug变量
        'top' // 设置规则优先级为最高
    );
}
add_action('init', 'custom_club_rewrite_rule');

// 注册查询变量，让WordPress识别club_slug
function custom_club_query_var($vars) {
    $vars[] = 'club_slug';
    return $vars;
}
add_filter('query_vars', 'custom_club_query_var');

3. 刷新固定链接规则 #

代码添加完成后，进入WordPress后台的「设置」->「固定链接」，无需修改设置，直接点击「保存更改」，这一步会刷新WordPress的重写规则，让刚才添加的规则生效。

4. 在JS中获取路径变量 #

现在访问/club/first-club、/club/second-club这类URL时，都会指向你创建的club页面。你可以通过两种方式在JS中拿到路径变量：

• 直接解析URL：通过window.location.pathname拆分路径获取变量，比如：

const pathParts = window.location.pathname.split('/');
const clubSlug = pathParts[2]; // 对应xxx部分

• 从PHP传递到JS：在club页面的模板文件中，将WordPress获取到的club_slug变量输出为全局JS变量，方便直接使用：

<script>
window.clubSlug = '<?php echo esc_js(get_query_var('club_slug')); ?>';
</script>

之后你的JS逻辑就可以用这个变量去请求对应的API数据了。

注意事项 #

• 确保你的固定链接设置不是默认的「朴素」模式（即带?page_id=xxx的格式），建议使用「帖子名称」模式，这样重写规则才能正常工作。
• 如果使用子主题，修改functions.php时要操作子主题的文件，避免主题更新时代码丢失。

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