短代码或构建器脚本无法在 WordPress 中正确呈现

Question

我尝试添加一个短代码来呈现复选框并在同一页面（即结账页面）上显示协议和政策页面。但是当我尝试查看结果时，协议和政策页面的内容显示了一些未像这样渲染的代码

我在 Divi 主题的主题生成器中的 function.php 文件中添加了复选框的短代码。这是代码

    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' );

我的代码有问题吗？或者我将自定义代码放在错误的位置？

Answer 1

您端未启用 Divi Builder。转至 Divi > 主题选项 > Builder，并确保启用在帖子类型上启用 Divi Builder 选项。启用它后，当您返回页面时，您将在标题周围看到“使用 Divi Builder”。按下它，您的短代码就会变成 Divi Builder Blocks。