WordPressでAjaxを使う方法

WordPressではAjaxを使うためのPHPがすでに備わっているので、AjaxのためのPHPファイルを新たに作成する必要はありません。

Ajaxとは

かんたんに説明をすると、Ajaxとはページ遷移させずに通信を行える「非同期通信」と呼ばれるものです。
ブラウザで見ているページの裏側でデータの受け渡しが行われるため、ページ内をさくさく変更することができます。GoogleMapで拡大縮小、移動がスムーズにできるのはAjaxを使っているためです。
実装の仕方によっては一枚一枚のページではなくページ内で完結した一つのアプリのような印象を与えることができます。

Ajaxは特別なプラグインやライブラリは必要なく、javascriptとデータを返す機能さえ整っていれば実装ができます。

WordPressでAjaxを使う方法

WordPressでAjaxを使う際のURLは admin_url('admin-ajax.php') を使います。
複数Ajaxを用意しても全て同じURLを指定します。
data の中の action がありますが、この action に渡した文字列（下の例ではget_post）が
アクションフックに渡す関数名です。

下の例では、記事を読むリンクを押したら記事が表示されます。

HTML

<a href="#" class="more" data-id="4">記事を読む</a>
<div id="post-4"></div>

JS

jQuery(function($){
    $('.more').click(function(){
         var id = $(this).attr('data-id');

		$.ajax({
            type : "post",
            data : {
                action: 'get_post_content',
                post_id: id,
            },
            url : "<?php echo admin_url('admin-ajax.php'); ?>",
            success: function(res) {
               // ここに受け取ったデータの処理を書く
			   $('#post-' + id).html(res);
            }
        });
    });
});

テーマのfunctions.php

<?php
function get_post_content()
{
	$post_id = $_POST['post_id'];

    $args = [
		'p' => $post_id,
        'post_type' => 'post',
		'posts_per_page' => 1
    ];
	$post_data = new WP_Query($args);

	$html = '';
	if ( $post_data->have_posts() ):
		while ( $post_data->have_posts() ): $post_data->the_post();
			$html .= '<div class="post">';
			$html .= '<div class="title">'. get_the_title(). '</div>';
			$html .= '<div class="content">'. get_the_content(). '</div>';
			$html .= '</div>';
		endwhile;
		wp_reset_postdata();
	endif;

	echo $html;
	exit();
}
add_action('wp_ajax_get_post_content', 'get_post_content');
add_action('wp_ajax_nopriv_get_post_content', 'get_post_content');
?>

アクションフックが二つありますが、ログイン中、未ログインで分けられているためです。
wp_ajax_xxxx がログイン中、wp_ajax_nopriv_ が未ログインで呼び出される関数です。