Bagaimana untuk Memaparkan Petikan Rawak dengan AJAX dalam Kod Pendek WordPress?

Cara Menjana Petikan Rawak Menggunakan AJAX dalam Kod Pendek WordPress

Soalan:

Bagaimana kita boleh mengemas kini kandungan halaman menggunakan AJAX masuk WordPress?

Jawapan:

Berikut ialah versi dipertingkatkan bagi kod yang disediakan dalam soalan, yang melaksanakan fungsi AJAX dalam kod pendek WordPress untuk memaparkan petikan rawak:

Kod ringkas (shortcode.php)

function random_quote_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'path' => get_template_directory_uri() . '/quotes.txt'
    ), $atts );

    $quotes = file( $atts['path'] );
    $random_quote = $quotes[array_rand($quotes)];

    $output = sprintf(
        '<div>

AJAX Handler (ajax-handler.php)

add_action( 'wp_ajax_load_random_quote', 'load_random_quote' );
add_action( 'wp_ajax_nopriv_load_random_quote', 'load_random_quote' );

function load_random_quote() {
    $quotes = file( $_POST['file_path'] );
    $random_quote = $quotes[array_rand($quotes)];

    echo $random_quote;
    wp_die();
}

Skrip jQuery (ajax-script.js)

jQuery(document).ready(function($) {
    $('#newquote').click(function(e) {
        e.preventDefault();

        $.ajax({
            url: ajaxurl,
            data: {
                action: 'load_random_quote',
                file_path: '<?php echo get_template_directory_uri() . '/quotes.txt'; ?>'
            },
            success: function(data) {
                $('#randomquote').html(data);
            }
        });
    });
});

Skrip Enqueue dan Localize Data (functions.php)

function enqueue_ajax_scripts() {
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/ajax-script.js', array('jquery'), '1.0.0', true );
    wp_localize_script( 'ajax-script', 'ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ) );
}

add_action( 'wp_enqueue_scripts', 'enqueue_ajax_scripts' );

Penjelasan:

1. Kod pendek random_quote menjana rawak awal petikan dan butang berlabel "Petikan Baharu."
2. Apabila butang "Petikan Baharu" diklik, jQuery mengendalikan permintaan AJAX.
3. Fungsi pengendali load_random_quote mengembalikan petikan rawak baharu, yang kemudiannya dipaparkan oleh jQuery menggantikan yang sebelumnya.
4. Untuk mengelakkan isu keselamatan, AJAX nonces telah dilaksanakan.

Nota Tambahan:

Jika anda menggunakan tema tersuai, gantikan get_template_directory_uri() dengan fungsi yang sesuai untuk tema anda.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Petikan Rawak dengan AJAX dalam Kod Pendek WordPress?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!