如何在WordPress新区块主题中添加带主题样式的自定义PHP页面？

针对你在Astory（WordPress 6.0+区块主题）中自定义PHP模板无法加载页眉、页脚、侧边栏及样式的问题，核心原因是区块主题依赖区块模板结构和全局样式钩子，传统PHP模板的写法需要适配区块主题规则，以下是具体解决方案：

核心问题分析 #

你的现有代码存在两个关键问题：

• 错误的HTML结构：get_header()后直接关闭</main>标签，导致页面结构错乱，样式无法正确渲染
• 未使用区块主题的标准内容容器，导致主题样式无法作用到自定义内容上

修改后的完整模板代码 #

<?php
/**
 * @package astory-child
 * Template Name: member_register_page
 */

// 加载主题全局头部（包含wp_head()和区块页眉部件）
get_header();

// 获取Astory主题的主内容容器类（参考主题默认模板的容器结构）
$content_container_class = 'wp-block-group alignfull'; // 替换为Astory实际的容器类，可在主题templates/page.html中查看
?>

<!-- 主题标准内容容器 -->
<main id="primary" class="site-main">
    <div class="<?php echo esc_attr($content_container_class); ?>">
        <div class="pageheading"><h1><?php the_title(); ?></h1></div>
        
        <?php the_content(); ?>

        <?php
        global $wpdb;

        // 原数据库查询逻辑保留
        $memberhousedet = $wpdb->get_results("SELECT * FROM wp_fluentform_entry_details WHERE field_name in ('house_no','house_name','house_ownr') and submission_id NOT IN (SELECT id FROM `wp_fluentform_submissions` where status='trashed' and form_id=6) GROUP BY id HAVING count(field_name)=1 ORDER BY submission_id");
        $hstblsbvlidary = [];
        $housedetvals = [];
        
        foreach($memberhousedet as $housedet){
            $hstblsbvlidary[]= $housedet->submission_id;
            $housetblid= $housedet->id;
            $housedetsbmsnval= $housedet->submission_id;
            $housedetres= $housedet->field_name;
            $housedetval= $housedet->field_value ;
            $housedetvals[] = array($housetblid,$housedetsbmsnval,$housedetres, $housedetval);
        }
        
        $distnctsbvals=array_unique($hstblsbvlidary); 
        $cntoftothusdet=count($housedetvals);
        $cntofdstnctentry=count($distnctsbvals);
        $rstarykeyvals=array_values($distnctsbvals);
        
        $hsdetcmbndary = [];
        for($i=0;$i<$cntofdstnctentry;$i++){
            $cnt=0;
            while($cnt<$cntoftothusdet){
                if($rstarykeyvals[$i]==$housedetvals[$cnt][1]){
                    $hsdetcmbndary[$housedetvals[$cnt][1]][$housedetvals[$cnt][2]]=$housedetvals[$cnt][3];
                }
                $cnt++;
            }
        }
        
        $housnonnamepasngary = [];
        $housownernmpsngary = [];
        $ic=0;
        while($ic<$cntofdstnctentry){
            $house_key = $hsdetcmbndary[$rstarykeyvals[$ic]]['house_no'].' - '.$hsdetcmbndary[$rstarykeyvals[$ic]]['house_name'];
            $housnonnamepasngary[] = $house_key;
            
            $housownernmpsngary[$house_key] = isset($hsdetcmbndary[$rstarykeyvals[$ic]]['house_ownr']) ? $hsdetcmbndary[$rstarykeyvals[$ic]]['house_ownr'] : '-';
            
            $ic++; 
        }
        
        $encodedpasableary = json_encode($housnonnamepasngary);
        $hsownrjsnary = json_encode($housownernmpsngary);
        ?>

        <div class="wp-block-columns">
            <?php echo do_shortcode( '[fluentform id="7"]' ); ?>
        </div>

        <script>
        jQuery(document).ready(function($){
            var jsonhsvals = <?php echo $encodedpasableary; ?>;
            var jsnhsownrvals = <?php echo $hsownrjsnary; ?>;
            
            console.log(jsonhsvals);
            var cntofhousdetary=jsonhsvals.length;
            for(var i=0; i<cntofhousdetary; i++) {
                $('#ff_7_house_name_select').append("<option value='"+jsonhsvals[i]+"'>"+jsonhsvals[i]+"</option>");   
            }
            
            $("#ff_7_housownr").prop('readonly', true);
            
            $('#ff_7_house_name_select').change(function(){
                var slctd_housenonam=$(this).val();  
                $("#ff_7_housownr").val(jsnhsownrvals[slctd_housenonam]);
            });
        });   
        </script>
    </div>
</main>

<?php
// 加载主题全局底部（包含wp_footer()和区块页脚部件）
get_footer(); 
?>

关键改动说明 #

1. 修复HTML结构：移除错误的</main>，替换为正确的<main>标签包裹所有内容，确保页面结构符合WordPress标准
2. 添加主题标准容器：通过$content_container_class使用Astory主题的内容容器类（可在主题templates/page.html文件中查看实际类名，比如可能是wp-block-post-content或entry-content），让主题样式能作用到自定义内容
3. 规范变量初始化：提前初始化数组变量，避免PHP警告
4. 保留核心业务逻辑：数据库查询、Fluent Form动态渲染的逻辑完全保留，仅调整结构适配区块主题

额外注意事项 #

• 如果Astory主题有自定义的侧边栏区块部件，可在<main>标签外添加get_sidebar()，区块主题通常仍支持该函数加载侧边栏部件
• 若仍存在样式缺失，可手动加载主题的全局样式表：

  wp_enqueue_style( 'astory-style', get_template_directory_uri() . '/style.css' );
  

  将代码添加到get_header()之前即可

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