Rumah >pembangunan bahagian belakang >tutorial php >Bagaimana untuk Memaparkan Petikan Rawak dengan AJAX dalam Kod Pendek WordPress?

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

Linda Hamilton
Linda Hamiltonasal
2024-12-08 21:35:20390semak imbas

How to Display Random Quotes with AJAX in a WordPress Shortcode?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn