WordPress插件开发：实现特定URL独立访问的React公共页面

一、PHP端：精准控制资源加载与路由匹配 #

首先在插件根文件wp-react-kickoff.php里，区分后台和公共页面场景，只在对应场景加载React资源，同时给React传递页面类型标识：

1. 给公共页面注册路由
   先让WordPress识别/invite-only这个URL，避免出现404：

   function register_invite_only_route() {
       add_rewrite_rule(
           '^invite-only/?$',
           'index.php?invite_only_page=1',
           'top'
       );
   }
   add_action('init', 'register_invite_only_route');
   
   function add_invite_only_query_var($vars) {
       $vars[] = 'invite_only_page';
       return $vars;
   }
   add_filter('query_vars', 'add_invite_only_query_var');
   

2. 控制React资源的加载范围
   只在后台插件页面或指定公共页面加载React脚本，同时传递页面类型参数：

   function enqueue_react_assets() {
       // 判断是否是公共页面
       $is_public_page = get_query_var('invite_only_page') ? true : false;
       // 判断是否是后台插件页面（替换成你的后台页面ID，可通过get_current_screen()->id查看）
       $is_admin_page = is_admin() && get_current_screen()->id === 'toplevel_page_your-plugin-slug';
   
       // 非目标页面直接跳过资源加载
       if (!$is_admin_page && !$is_public_page) {
           return;
       }
   
       wp_enqueue_script('wp-react-kickoff-script', plugins_url('build/index.js', __FILE__), array('wp-element'), '1.0.0', true);
       
       // 给React传递页面类型标识
       wp_localize_script('wp-react-kickoff-script', 'wpReactKickoffData', array(
           'pageType' => $is_admin_page ? 'admin' : 'public',
       ));
   }
   add_action('wp_enqueue_scripts', 'enqueue_react_assets');
   add_action('admin_enqueue_scripts', 'enqueue_react_assets');
   

3. 给公共页面添加React挂载容器
   创建templates/public-page-template.php文件，仅放置React挂载节点：

   <?php
   /**
    * 公共页面模板
    */
   get_header(); ?>
       <div id="wp-react-kickoff-public-root"></div>
   <?php get_footer();
   

   再让WordPress在访问公共URL时加载这个模板：

   function load_invite_only_template($template) {
       if (get_query_var('invite_only_page')) {
           return plugin_dir_path(__FILE__) . 'templates/public-page-template.php';
       }
       return $template;
   }
   add_filter('template_include', 'load_invite_only_template');
   

   后台页面的挂载容器则放在你注册的后台菜单页面代码中，比如：

   <div id="wp-react-kickoff-admin-root"></div>
   

二、React端：根据标识渲染对应组件 #

在React入口文件（比如src/index.js）里，根据PHP传递的pageType，仅渲染对应组件到指定容器：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Settings from './components/Settings';
import PublicPage from './components/PublicPage';

const { pageType } = window.wpReactKickoffData;

// 后台场景渲染Settings组件
if (pageType === 'admin') {
    const adminRoot = document.getElementById('wp-react-kickoff-admin-root');
    if (adminRoot) {
        ReactDOM.createRoot(adminRoot).render(<Settings />);
    }
} 
// 公共页面场景渲染PublicPage组件
else if (pageType === 'public') {
    const publicRoot = document.getElementById('wp-react-kickoff-public-root');
    if (publicRoot) {
        ReactDOM.createRoot(publicRoot).render(<PublicPage />);
    }
}

三、收尾调试 #

1. 进入WordPress后台「设置→固定链接」，直接点击保存，刷新路由规则
2. 测试后台插件页面，确认仅显示Settings组件
3. 访问www.mywordpress.com/invite-only，确认仅显示PublicPage组件

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