如何在 WordPress 短代碼中使用 AJAX 顯示隨機引號？

如何在WordPress 短代碼中使用AJAX 產生隨機引號

問題：

我們如何使用頁面內容阿賈克斯在WordPress？

答案：

這是問題中提供的程式碼的增強版本，它在 WordPress 短程式碼中實現 AJAX 功能以顯示隨機引號：

短程式碼(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 處理程序(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();
}

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

jQuery腳本(ajax-script.js)

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

將腳本入隊並局部化資料(functions.php)

1. 說明:
3. 簡碼random_quote 產生一個初始隨機報價和一個標記為「New Quote」的按鈕。
4. 當點選「New Quote」按鈕時，jQuery 會處理 AJAX 請求。

處理函數 load_random_quote 傳回一個新的隨機報價，然後由 jQuery 顯示以取代前一個報價。

為了防止安全問題，AJAX 隨機數已實施。

附加說明：如果您使用自訂主題，請將 get_template_directory_uri() 替換為適合您主題的函數。

以上是如何在 WordPress 短代碼中使用 AJAX 顯示隨機引號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！