WordPress中Shortcode/Builder脚本渲染异常问题排查

我使用Divi主题，在主题的functions.php文件中添加了自定义代码，目的是为WooCommerce结账页添加复选框，并通过AJAX加载“agreements-policies”页面的协议内容。但实际查看时，协议页面内容出现未渲染的代码（截图：）。请问是代码存在问题，还是自定义代码的放置位置有误？

以下是我添加的代码：

add_action( 'woocommerce_review_order_before_submit', 'add_custom_agreement_checkbox', 9 );
function add_custom_agreement_checkbox() {
    ?>
    <!-- Wrapper for Agreements and Policies -->
    <div id="agreements-wrapper" class="woocommerce-agreements-and-policies-wrapper" style="max-height: 200px; overflow: auto; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; margin-bottom: 20px; display: none;">
        <!-- Konten dari halaman agreements-policies akan muncul di sini melalui AJAX -->
    </div>

    <!-- Checkbox untuk Agreements and Policies -->
    <p class="form-row terms">
        <label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
            <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="custom_agreement_checkbox" id="custom_agreement_checkbox" />
            <span>Saya sudah membaca dan menyetujui <a href="javascript:void(0);" id="load-agreement-content">Green Camp Agreement and Policies</a></span>&nbsp;<span class="required">*</span>
        </label>
    </p>
    <?php
}

// AJAX handler untuk mengambil konten dari halaman "agreements-policies"
add_action( 'wp_ajax_load_agreement_content', 'load_agreement_content' );
add_action( 'wp_ajax_nopriv_load_agreement_content', 'load_agreement_content' );

function load_agreement_content() {
    $agreements_page = get_page_by_path('agreements-policies');

    if ( $agreements_page ) {
        $content = $agreements_page->post_content;
        $content = do_shortcode( $content ); // Proses shortcodes
        wp_send_json_success( $content );
    } else {
        wp_send_json_error( 'Sorry, the Agreements and Policies page content is not available.' );
    }

    wp_die();
}

// Validate if the custom checkbox is checked
add_action( 'woocommerce_checkout_process', 'validate_custom_agreement_checkbox' );
function validate_custom_agreement_checkbox() {
    if ( ! isset( $_POST['custom_agreement_checkbox'] ) ) {
        wc_add_notice( __( 'Please agree to the Green Camp Agreement and Policies to proceed.' ), 'error' );
    }
}
// Function untuk enqueue script AJAX
function enqueue_custom_ajax_script() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // Delegasi event untuk menangani klik pada link "Green Camp Agreement and Policies"
        $(document).on('click', '#load-agreement-content', function(e) {
            e.preventDefault();

            // Ajax request untuk mengambil konten halaman agreement
            $.ajax({
                url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                type: 'POST',
                data: {
                    action: 'load_agreement_content'
                },
                beforeSend: function() {
                    // Bisa tambahkan loader di sini jika diinginkan
                },
                success: function(response) {
                    if (response.success) {
                        // Tampilkan konten di dalam wrapper dan munculkan wrapper
                        $('#agreements-wrapper').html(response.data).slideDown();
                    } else {
                        // Tampilkan pesan error jika konten gagal dimuat
                        $('#agreements-wrapper').html('<p>' + response.data + '</p>').slideDown();
                    }
                },
                error: function() {
                    // Tampilkan pesan jika terjadi error
                    $('#agreements-wrapper').html('<p>There was an error loading the content.</p>').slideDown();
                }
            });
        });
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'enqueue_custom_ajax_script' );

核心问题：Divi主题内容未正确渲染 #

代码放置位置（functions.php）是正确的，但代码逻辑存在问题：Divi主题用可视化Builder创建的页面，其post_content存储的是Divi专属的短代码（比如[et_pb_section]、[et_pb_text]等），仅调用do_shortcode()无法触发Divi的完整渲染逻辑，导致这些短代码直接输出而未转换成HTML。

修复方案 #

修改load_agreement_content函数，使用WordPress的the_content过滤器处理页面内容——这个过滤器会自动触发Divi的短代码渲染，同时处理其他内容格式化（比如段落转换、短代码解析）：

function load_agreement_content() {
    $agreements_page = get_page_by_path('agreements-policies');

    if ( $agreements_page ) {
        // 设置全局$post变量，确保Divi渲染逻辑正常工作
        global $post;
        $post = $agreements_page;
        setup_postdata( $post );

        // 使用the_content过滤器处理内容，自动解析Divi短代码
        $content = apply_filters( 'the_content', $post->post_content );
        
        wp_send_json_success( $content );
        
        // 重置全局post变量
        wp_reset_postdata();
    } else {
        wp_send_json_error( 'Sorry, the Agreements and Policies page content is not available.' );
    }

    wp_die();
}

额外优化建议 #

1. 使用子主题的functions.php：直接修改父主题的functions.php会在主题更新时丢失代码，建议将自定义代码移至Divi子主题的functions.php文件中。
2. 添加权限控制：在AJAX函数开头增加权限验证，确保只有合法用户能访问内容：

   if ( ! current_user_can( 'read' ) ) {
       wp_send_json_error( 'You do not have permission to access this content.' );
   }
   

3. 缓存渲染结果：协议内容一般不会频繁修改，可以用wp_cache_set缓存渲染后的HTML，减少数据库查询和渲染开销：

   $cache_key = 'agreements_policies_content';
   $content = wp_cache_get( $cache_key );
   if ( ! $content ) {
       // 上面的渲染逻辑
       wp_cache_set( $cache_key, $content, '', 86400 ); // 缓存1天
   }
   

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