如何在WordPress自定义器中打开custom.php文件（无需注册页面/文章）

现有代码的核心问题 #

1. 变量拼写错误：PHP和JS中都把localized_script拼写成了locaized_script，导致无法正确读取本地化变量
2. URL处理逻辑错误：JS中错误地将current_url.includes()的布尔结果赋值给了current_url变量，后续判断完全失效
3. 预览URL设置错误：直接将预览URL指向插件目录下的custom.php文件，不符合WordPress模板加载机制——模板文件需要通过WordPress路由加载，而非直接访问插件文件

修正后的完整代码 #

1. PHP部分（脚本注册与本地化）

add_filter( 'template_include', function( $return ) {
    if ( isset( $_GET['is_custom_page_active'] ) && 'true' === $_GET['is_custom_page_active'] ) {
        // 确保PLUGIN_DIR_PATH已正确定义，比如：define( 'PLUGIN_DIR_PATH', plugin_dir_path( __FILE__ ) );
        return PLUGIN_DIR_PATH . 'templates/custom.php';
    }
    return $return;
} );

wp_enqueue_script( 'sa-enqueue-scripts', PLUGIN_URL . 'assets/js/custom.js', array( 'jquery', 'customize-preview' ), '1.0', true );
wp_localize_script( 'sa-enqueue-scripts', 'localized_script', array( 
    'home_url' => home_url( '/' ),
    'custom_page_param' => 'is_custom_page_active'
) );

注：这里把true === $_GET['is_custom_page_active']调整为'true' === $_GET['is_custom_page_active']，因为GET参数传递的是字符串类型，严格比较布尔值会失效

2. JavaScript部分（自定义器面板交互）

wp.customize.bind( 'ready', function() {
    // 绑定目标面板的展开/收起事件
    wp.customize.panel( 'open-woocommerce-section', function( panel ) {
        panel.expanded.bind( function( isExpanding ) {
            const previewer = wp.customize.previewer;
            const currentUrl = new URL( previewer.previewUrl() );
            const paramName = localized_script.custom_page_param;

            if ( isExpanding ) {
                // 检查URL是否已包含目标参数，避免重复添加
                if ( ! currentUrl.searchParams.has( paramName ) ) {
                    currentUrl.searchParams.set( paramName, 'true' );
                    previewer.previewUrl.set( currentUrl.toString() );
                }
            } else {
                // 收起面板时移除参数，恢复首页预览
                currentUrl.searchParams.delete( paramName );
                previewer.previewUrl.set( localized_script.home_url );
            }
        } );
    } );
} );

关键改进点 #

• 使用URL对象处理查询参数，避免字符串拼接导致的URL格式错误
• 修正变量拼写错误，确保本地化数据正常读取
• 遵循WordPress模板加载逻辑，通过GET参数触发template_include钩子，而非直接访问插件文件
• 增加参数存在性检查，避免重复添加查询参数

内容的提问来源于stack exchange，提问作者Syed Ali Ahmed