自定义页面模板无法使用Divi Builder功能的解决方案咨询

我给Divi主题做了扩展，下面是其中一个自定义页面模板文件，用来从API获取并展示数据，但现在这个模板没法用Divi Builder编辑。想问问有没有办法既能用Divi Builder的功能，又能添加这些从API获取的内容？

/**
 * Template Name: Exams Template
 */

do_action('et_before_main_content');
get_header(); 
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <header class="page-header">
            <h1 class="page-title"><?php echo esc_html( get_the_title() ); ?></h1>
        </header>

        <div class="styled-boxes">
            <?php
            // Fetch exams data from REST API endpoint
            $response = wp_remote_get( 'http://testyourself.net/wp-json/wp/v1/exams/' );
            if ( is_wp_error( $response ) ) {
                echo '<p>Error fetching exams data.</p>';
            } else {
                $exams_data = json_decode( wp_remote_retrieve_body( $response ), true );
                // Check if exams data is available
                if ( ! empty( $exams_data ) ) {
                    foreach ( $exams_data as $exam ) {
                        ?>
                        <div class="styled-box">
                            <h2><?php echo esc_html( $exam['title'] ); ?></h2>
                            <div class="exam-content"><?php echo wpautop( $exam['content'] ); ?></div>
                            
                        </div>
                        <?php
                    }
                } else {
                    echo '<p>No exams data available.</p>';
                }
            }
            ?>
        </div><!-- .styled-boxes -->

    </main><!-- #main -->
</div><!-- #primary -->

<?php 
get_footer(); 
do_action('et_after_main_content');
?>

方法一：创建Divi自定义模块（推荐） #

这种方式完全融入Divi生态，能在Builder里可视化调用API数据，是最灵活的方案：

1. 注册自定义模块
   在主题functions.php或自定义插件中添加以下代码，注册一个专门展示考试数据的Divi模块：

function et_pb_custom_exams_module() {
    if ( class_exists( 'ET_Builder_Module' ) ) {
        class ET_Builder_Module_Custom_Exams extends ET_Builder_Module {
            public $slug       = 'et_pb_custom_exams';
            public $vb_support = 'on';

            protected $module_credits = array(
                'module_uri' => '',
                'author'     => '',
                'author_uri' => '',
            );

            public function init() {
                $this->name = esc_html__( '考试数据列表', 'et_builder' );
            }

            public function get_fields() {
                return array(
                    'api_url' => array(
                        'label'           => esc_html__( 'API地址', 'et_builder' ),
                        'type'            => 'text',
                        'default'         => 'http://testyourself.net/wp-json/wp/v1/exams/',
                        'description'     => esc_html__( '输入获取考试数据的API地址', 'et_builder' ),
                        'toggle_slug'     => 'main_content',
                    ),
                );
            }

            public function render( $attrs, $content = null, $render_slug ) {
                $api_url = $this->props['api_url'];
                $response = wp_remote_get( $api_url );
                
                if ( is_wp_error( $response ) ) {
                    return '<p>获取考试数据失败。</p>';
                }
                
                $exams_data = json_decode( wp_remote_retrieve_body( $response ), true );
                $output = '<div class="styled-boxes">';
                
                if ( ! empty( $exams_data ) ) {
                    foreach ( $exams_data as $exam ) {
                        $output .= sprintf(
                            '<div class="styled-box">
                                <h2>%s</h2>
                                <div class="exam-content">%s</div>
                            </div>',
                            esc_html( $exam['title'] ),
                            wpautop( $exam['content'] )
                        );
                    }
                } else {
                    $output .= '<p>暂无考试数据。</p>';
                }
                
                $output .= '</div>';
                return $output;
            }
        }

        new ET_Builder_Module_Custom_Exams();
    }
}
add_action( 'et_builder_ready', 'et_pb_custom_exams_module' );

2. 使用模块

• 启用Divi Builder编辑页面，在模块列表里找到「考试数据列表」模块，拖拽到页面任意位置
• 可在模块设置中修改API地址，还能通过Divi自带的样式面板调整模块的间距、背景、字体等样式

方法二：修改现有模板，兼容Divi Builder #

如果想保留原有模板结构，同时让Builder编辑页面其他内容，可以修改模板文件：

/**
 * Template Name: Exams Template
 */

do_action('et_before_main_content');
get_header(); 
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <?php
        // 检测是否启用Divi Builder，是则渲染Builder内容
        if ( function_exists( 'et_builder_is_used' ) && et_builder_is_used( get_the_ID() ) ) {
            while ( have_posts() ) : the_post();
                the_content();
            endwhile;
        } else {
            // 未启用Builder时显示默认标题
            ?>
            <header class="page-header">
                <h1 class="page-title"><?php echo esc_html( get_the_title() ); ?></h1>
            </header>
            <?php
        }
        ?>

        <!-- 固定显示API获取的考试数据 -->
        <div class="styled-boxes">
            <?php
            $response = wp_remote_get( 'http://testyourself.net/wp-json/wp/v1/exams/' );
            if ( is_wp_error( $response ) ) {
                echo '<p>获取考试数据失败。</p>';
            } else {
                $exams_data = json_decode( wp_remote_retrieve_body( $response ), true );
                if ( ! empty( $exams_data ) ) {
                    foreach ( $exams_data as $exam ) {
                        ?>
                        <div class="styled-box">
                            <h2><?php echo esc_html( $exam['title'] ); ?></h2>
                            <div class="exam-content"><?php echo wpautop( $exam['content'] ); ?></div>
                        </div>
                        <?php
                    }
                } else {
                    echo '<p>暂无考试数据。</p>';
                }
            }
            ?>
        </div><!-- .styled-boxes -->

    </main><!-- #main -->
</div><!-- #primary -->

<?php 
get_footer(); 
do_action('et_after_main_content');
?>

这种方式下：

• 启用Divi Builder时，Builder编辑的内容会显示在页面顶部（或默认标题位置），考试数据列表固定显示在底部
• 可通过自定义CSS调整考试数据列表的位置和样式

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