AJAX を使用して WordPress コンテンツを非同期的に更新するにはどうすればよいですか?

WordPress で AJAX を使用してコンテンツを更新する方法?

WordPress には、ページ全体を再読み込みせずにページを操作するためのさまざまな方法が用意されています。その 1 つは、AJAX (非同期 JavaScript および XML) の使用です。これにより、Web ページとサーバー間の非同期データ交換が可能になります。これは、ページ全体を再読み込みせずにページ上のコンテンツを更新する場合に便利です。

このコンテキストでは、WordPress ショートコード内で AJAX を使用してコンテンツを更新する方法を示します。このアプローチには、ショートコード用の PHP 関数、JavaScript での AJAX リクエスト、およびサーバー側でリクエストを処理する関数の作成が含まれます。

手順:

1. ショートコード用の PHP 関数: ショートコード用の PHP 関数を作成し、必要なスクリプトとエンキューを行います。データをローカライズします。
2. JavaScript での AJAX リクエスト: jQuery を使用して AJAX リクエストを送信し、コンテンツを取得します。
3. サーバー側での AJAX リクエストの処理: リクエストを処理し、コンテンツを取得して、それを送信します。 frontend.

コード例:

ショートコード用の PHP 関数 (例: update_content)

function update_content( $atts ) {
  wp_enqueue_script( 'ajax-update-content', get_template_directory_uri() . '/js/ajax-update-content.js', array( 'jquery' ), '1.0.0', true );
  $content = get_transient( 'content' ); // Simulated content, normally retrieved via AJAX.
  return $content;
}
add_shortcode( 'update_content', 'update_content' );

JavaScript での AJAX リクエスト (例: ajax-update-content.js)

jQuery(document).ready(function($) {
  $('#update-content-button').click(function(e) {
    e.preventDefault();
    $.ajax({
      url: ajaxurl, // AJAX URL defined in WordPress
      type: 'POST',
      data: {
        action: 'update_content_action', // Defined in the server-side function.
        security: '<%= wpApiSettings.nonce %>' // This is provided by WordPress.
      },
      success: function(response) {
        $('#content-container').html(response); // Update the content.
      }
    });
  });
});

サーバー側での AJAX リクエストの処理 (例:functions.php)

add_action( 'wp_ajax_update_content_action', 'update_content_action' );
add_action( 'wp_ajax_nopriv_update_content_action', 'update_content_action' ); // Non-logged-in users.

function update_content_action() {
  check_ajax_referer( 'nonce-value', 'security' ); // Security check.
  $content = get_transient( 'content' ); // Simulated content.
  echo $content; // Send the content back to the frontend.
  wp_die();
}

これらのコンポーネントを統合することにより、AJAX を使用して WordPress ページ上のコンテンツを更新できるようになります。ショートコード。

以上がAJAX を使用して WordPress コンテンツを非同期的に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。