WordPress ショートコード内に AJAX 機能を統合するにはどうすればよいですか?

WordPress ショートコードで AJAX を使用する方法

ショートコードを使用した AJAX の実装

PHP:

ショートコードの PHP コードには、以下:

function random_quote( $atts ) {
    // Extract shortcode attributes
    extract( shortcode_atts( array(
        'path' => get_template_directory_uri() . '/quotes.txt' // Default path
    ), $atts ) );

    // Retrieve quotes from file
    $array = file( $path );
    $r = rand( 0, count($array) - 1 );

    // Render shortcode output
    $output = '<div>

jQuery:

ボタンのクリックを処理し、AJAX リクエストを実行します:

jQuery('#newquote').click( function() {
    // Send AJAX request to retrieve a new quote
    $.ajax({
        type: 'POST',
        url: ajaxParams.themeURI+'js/ajax-load-quote.php',
        data: { file_path: ajaxParams.filePath },
        beforeSend: function() {
            ajaxLoadingScreen(true,'#randomquotes');
        },
        success: function(data) {
            // Replace old quote with new one
            jQuery('#randomquotes').find('p').remove();
            jQuery('#randomquotes').prepend(data);
        },
        complete: function() {
            ajaxLoadingScreen(false,'#randomquotes');
        }
    });
    return false;
});

WordPress で AJAX を使用する方法ショートコード

1. 作成PHP ファイル: JS と PHP 間の通信ポイントを確立します (例: ajax-load-quote.php)。
2. ショートコードの設定: 必要な HTML を生成するショートコードを記述し、 JS/AJAX 統合。
3. ロードが必要ですスクリプト: 必要な JS ファイルを function.php にエンキューします (例: wp_enqueue_script)。
4. JavaScript での AJAX 呼び出し: jQuery、XHR などを使用して、JS から AJAX リクエストを送信します。 .
5. AJAX リクエストを処理しますPHP: データを処理し、必要な操作を実行し、変更されたコンテンツを返します。
6. JS でのビューの更新: サーバー側の AJAX リクエストからの応答に基づいて HTML を更新します。 .

以上がWordPress ショートコード内に AJAX 機能を統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。