WordPressでAjax検索を実装する

2016.09.01

カテゴリー：functions.php, タグ

Facebook

Twitter

WordPressでカテゴリーやタクソノミー、カスタムフィールドの値でAjax検索を実装する方法をご紹介します。

おおまかな方法としては、
1.HTML/CSSの作成
2.functions.php に jsonデータを格納するための記述の追加
3.JS側で jsonデータを取得し、一覧表示
という形になります。

サンプルページを作りましたので、
こちらに記述したソースをベースに説明していきます。
http://www.wp-tech.net/search_sample/

今回は、本ブログの記事のタクソノミー「wordpress_tips-cat」のターム（今回は3つのみ）を選択して検索できるようにしました。

1.HTML/CSSの作成

<select class="select_01">
	<option value="plugin">プラグイン</option>
	<option value="functions">functions.php</option>
	<option value="post">記事出力</option>
</select>
<input id="search_sample_button" type="submit" value="検索"></p>

<ul class="result">
</ul>

選択項目、検索ボタン、一覧表示のためのリストを作成します。
選択項目は一覧を動的に出力させる場合は記述方法が異なります。

2.functions.php に jsonデータを格納するための記述の追加

<?php
// ajax url
function add_my_ajaxurl() { ?>
    <script>
        var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
    </script>
<?php }
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

// get_postsでデータをjsonへ
function ajax_get_posts(){
    // jsから受け渡しするデータ
    $select_01 = $_POST['select_01'];

    $returnObj = array();

    // get_posts オプション
    $args = array(
        'post_type' => 'wordpress_tips',
        'numberposts' => -1,
        'tax_query' => array(
          array(
            'taxonomy' => 'wordpress_tips-cat',
            'field' => 'slug',
            'terms' => $select_01
          )
        )
    );
    $posts = get_posts( $args );
    foreach( $posts as $key => $post ) {
        $returnObj[$key] = array(
            // 出力するデータを格納
            'post_title' => $post->post_title,
            'permalink' => get_permalink( $post->ID ),
        );
    }

    // json形式に出力
    echo json_encode( $returnObj );
    die();
}
add_action( 'wp_ajax_ajax_get_posts', 'ajax_get_posts' );
add_action( 'wp_ajax_nopriv_ajax_get_posts', 'ajax_get_posts' );
?>

基本的にはコメントで記述している通りですが、get_posts のパラメータの部分はカスタマイズする必要があります。

3.JS側で jsonデータを取得し、一覧表示

$(function(){
	// 2重クリック防止フラグ
	var click_flag = true;

	// ボタンクリックイベント
	$('#search_sample_button').click(function(e){
		if ( click_flag ) {
			click_flag = false;
			$('.result li').remove();
			$('.result').append('<li class="loading">読み込み中</li>');

			// セレクトボックスで選択されているvalueを取得
			var select_01 = $('.select_01').val();
			//alert(select_01);
			$.ajax({
				type: "POST",
				url: ajaxurl,
				data: {
					// データ受け渡し
					'select_01' : select_01,
					'action' : 'ajax_get_posts',
				},
				success: function( response ) {
					$('.result .loading').remove();
					jsonData = JSON.parse( response );
					var count = jsonData.length;
					if ( count == '0' ) {
						// 検索結果がない場合
						$('.result').append('<li>検索結果がありません。</li>');
					} else {
						// リストに出力
						$.each( jsonData, function( i, val ) {
						$('.result').append('<li><a href="' + val['permalink'] + '">' + val['post_title'] + '</a></li>');
						});
					}
					click_flag = true;
				},
				error: function( response ) {
					// ajaxエラーの場合
					$('.result .loading').remove();
					$('.result').append('<li>エラーが起こりました。お手数ですがページの再読み込みを行ってください。</li>');
					click_flag = true;
				}
			});
		}
	});
});

こちらもコメント通りですが、今回はヒットした記事のパーマリンクとタイトルをリスト形式で出力しているのみになります。

以上の方法でサンプルページのようなAjax検索の実装ができます。
今回ご紹介したものはシンプルにタクソノミーをひとつ検索する形式ですが、
functions.php の get_posts のパラメータの箇所を変更すれば複数のタクソノミーの掛け合わせ検索や、
カスタムフィールドの値の絞り込み検索などを実装することができるかと思います。

Facebook

Twitter

Wordpress Tips