この記事は公開から8年、最終更新日からも8年経過しています。内容が古くなっている可能性があります。

当サイトはAmazonアソシエイトとして、適格販売により収入を得ています。

概要

(1)WordPressにおいてAjaxを使って、動的にコンテンツ取得・表示します。
(2)表示するコンテンツの数は指定可能としました。
(3)表示するコンテンツは、本ブログ内で公開されている記事を新しいものから指定個数分としました。

デモ

本サイト内の最新記事から指定個数分タイトルがリンク付きで表示されます。
なにはともあれ、下記「最新記事取得」ボタンを押してみてください。
その上の数値入力を変更すると表示する記事数が変わります。

最新記事取得

実装コード

Ajaxを利用するためリクエスト送信先URLをグローバル変数として定義

テーマのfunctions.php内に記述します。

//Ajaxを利用するためリクエスト送信先URLをグローバル変数として定義
add_action( 'wp_head', 'add_demo_ajaxurl', 1 );
function add_demo_ajaxurl() {
?>
	<script>
		var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
	</script>
<?php
}

Ajaxの実装部分(HTML/JavaScript部分)

・ボタンを押すと、数値入力ボックスから値を取得、その値をPHP側に渡します。
・PHP側の処理が成功すると、JSON形式のデータが戻ってくるのでそれを元にHTMLをダイレクトに書き換えます。
・HTMLファイルに実装します。

$(function(){
	$( '#ajax_demo_submit' ).on( 'click', function(){
		var number = document.getElementById('ajax_demo_number').value;	//表示個数を取得する
		//整数化する(ここはもう少しきちんと入力制限が必要です)
		number=parseInt(number);

		$.ajax({
			type: 'POST',
			url: ajaxurl,	//Ajaxを利用するためリクエスト送信先URL(グローバル変数で定義されている)
			data: {
				'action' : 'ajax_get_new_posts',	//呼び出す関数名
				'mes' : number,	//表示する個数(上部で取得している)
			},
			success: function( response ){
				var jsonData = JSON.parse( response );	//JSON形式を配列に変換
				var result_html = "<ul>";	//表示用HTML
				$.each( jsonData, function( i, val ){	//配列ループ
					result_html = result_html + "<li><a href=" + val['permalink'] +">" + val['post_title'] + "</a></li>";
                });
				result_html = result_html + "</ul>";
				
				var element = document.getElementById('ajax_demo_result');	//結果を表示する場所
				element.innerHTML = result_html;	//結果表示
			}
		});
		return false;
	}); 
});

PHP側の処理関数

デモ用として、最新記事から指定個数分、タイトルとパーマリンクを配列として取得後json形式に変換して戻す関数を実装しました。
・jQuery側の’action’で指定され呼び出される関数となります。
・「wp_ajax_」がログインユーザに対してのアクションフック、「wp_ajax_nopriv_」非ログインユーザに対してのアクションフックとなっています。
　→フックの名称は関数名「ajax_get_new_posts」に合わせて変更が必要です。「wp_ajax_ajax_get_new_posts」、「wp_ajax_nopriv_ajax_get_new_posts」
・テーマのfunctions.php内に記述します。

function ajax_get_new_posts() {
	$mes = $_POST['mes'];	//表示個数
	$returnObj = array();	//結果格納用配列
     
	//記事取得条件
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $mes,
		'orderby' => 'date',
		'order' => 'DESC',
		'post_status' => 'publish',
    );
     
    $posts  = new WP_Query( $args );
	if ($posts->have_posts()) {
		while($posts->have_posts()) {
			$posts->the_post();
			$returnObj[] = array(
				'post_title' => get_the_title(),
				'permalink' => get_permalink(),
			);
		}
	}
	wp_reset_postdata();
     
	echo json_encode( $returnObj );
	die();
}
add_action( 'wp_ajax_ajax_get_new_posts', 'ajax_get_new_posts' );
add_action( 'wp_ajax_nopriv_ajax_get_new_posts', 'ajax_get_new_posts' );

参考

ありがとうございます！
こちらが公式マニュアルです。プラグインとして実装しなくても基本的な内容は同じです→プラグインで AJAX を使う – WordPress Codex 日本語版
一番参考にした記事です(get_postsは使用しないほうが良いとは思いますがAjaxの実装としてはわかりやすいですね)→WordPressでAjaxを使う方法の解説 | hijiriworld Web