WordPress ショートコードで AJAX を使用してランダムな引用符を表示する方法?

WordPress ショートコードで AJAX を使用してランダムな引用符を生成する方法

質問:

を使用してページのコンテンツを更新するにはどうすればよいですか? 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 スクリプト(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);
            }
        });
    });
});

スクリプトをキューに入れてデータをローカライズする (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' );

説明:

1. ショートコードrandom_quote最初のランダムな引用符と「新しい引用符」というラベルのボタンが生成されます。
2. 「新しい引用符」ボタンをクリックすると、jQuery が AJAX リクエストを処理します。
3. ハンドラー関数load_random_quote は新しい引用符を返します。ランダムな引用符は、前の引用符の代わりに jQuery によって表示されます。
4. セキュリティの問題を防ぐために、AJAX の nonce は

追加の注意:

カスタム テーマを使用している場合は、get_template_directory_uri() をテーマに適した関数に置き換えてください。

以上がWordPress ショートコードで AJAX を使用してランダムな引用符を表示する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。