システム Edit : 2023.10.14 Update : 2024.12.16

WordPressサイトの検索ページをajaxによる非同期通信で対応した事例とそのやり方について

弊社で制作担当させていただいた、ウイングアーク１ｓｔさんのサイト「TECH BLOG」では、記事の検索ページに、ajaxによる非同期通信での検索機能を採用しました。

Contents

そもそも、ajaxとは？
検索ぺージでajax通信を用いるメリット
一方で、最初に考慮したほうが良い点も。
すごく簡単にやり方を解説

そもそも、ajaxとは？

通常ページを取得するときは、Webページをリロードして読み込みますが、リロードせずに何度もHTTP通信を行えるようになる通信を指します。
そのため、同じページ(URL)を表示したまま、ページの再読み込みや別ページへの遷移を伴わずに、サーバからデータを取得し、一部の表示のみを更新できます。
これにより、Webページがまるで一つのアプリケーションかのように、シームレスな表示や素早い応答ができるようになります。

Ajaxとは？【入門】基礎知識から活用例まで徹底解説

検索ぺージでajax通信を用いるメリット

今回、検索ページでは「製品のタイプ」>「製品の種類」> 「製品のタグ」での絞り込みがご要望にありました。

さらに、上記で絞り込んだのちに、「ワード」での検索も要望としてありました。
それぞれの項目をユーザーが直感的に絞り込みできるようにするというのは、最初の課題として挙がっていたために、ajaxによるアプリケーションのような仕様で、直感的な操作を可能にしました。
このように直感的に操作が可能になることは、ユーザーの検索意欲を高めて必要な情報に辿り着きやすくすることや、離脱率の低下にもつながります。

一方で、最初に考慮したほうが良い点も。

とはいえ、最初のサイトの仕様設計の際に考慮し、クライアントと相談しておいた方がいい点もあります。

①Wordpressの基本的な仕様はページ遷移での検索なので、カスタマイズする必要がある。（工数がかかる）
②「検索ワードを管理画面や裏側のデータで取得したい」等の要望がある場合、データ取得のプラグインはデフォルトのページ遷移の仕様に基づくことが多いので、プラグイン側もカスタマイズしたり、スクラッチでの制作が必要になる可能性がある。

利点と考慮した方がいい点を比較し優先順位をつけた上で、検索ページをajaxによる非同期通信での検索機能にしてみるのもオススメです。

すごく簡単にやり方を解説

今回の実装の流れを簡単に説明しようと思いますが、どのようにajax化するか、php側、js側のファイルへの詳細の記載については、とても参考になる記事がありました。

Ajaxでページ遷移なしの絞り込み検索をつくる

弊社の今回の事例は、独自のカスタマイズが多かったこともあり、汎用できる箇所も限られるので、割愛しながら説明します。

１．JSで値を取得したり、送ったり。

今回は訳あって、phpファイルに下記を記述しています。

・絞り込みでチェックされた値を取得&格納
・ajaxでphp側に値を送る
・返ってきたテンプレートを貼りつける

▼footer.php

<!-- ajax関連=================== -->
<script>
let ajaxUrl = '<?php echo esc_url( admin_url( 'admin-ajax.php', __FILE__ ) ); ?>';
// カテゴリの絞り込み
$('.checkbox-input').on('change',function(){
  var search_word = $('.sidebar input[name="s"]').val();
	var product_items=[];
	var product_types=[];
	var product_tags=[];
	$("[name='product_item']:checked").each(function(){
		var product_item=$(this).val();
		product_items.push(product_item);
	});
	$("[name='product_type']:checked").each(function(){
		var product_type=$(this).val();
		product_types.push(product_type);
	});
	$("[name='product_tag']:checked").each(function(){
		var product_tag=$(this).val();
		product_tags.push(product_tag);
	});
	$('.js-articles').empty();
　　　　$('.loading').fadeIn();
	$.ajax({
		type: 'POST',
		url: ajaxUrl,
		data: {
			'action': 'my_ajax_filter',
			'nonce': '<?php echo wp_create_nonce( 'my-ajax-nonce_filter' ); ?>',
			'items':product_items,
			'types':product_types,
			'tags':product_tags,
　　　　　　　　　      'search_word':search_word,
		},
		success: function(response) {
　　　　　　　  $('.loading').fadeOut();
　　　　　　　  $('.js-articles').append(response)

		}
	});
});
</script>

let ajaxUrl = '<?php echo esc_url( admin_url( 'admin-ajax.php', __FILE__ ) ); ?>';

// カテゴリの絞り込み

$('.checkbox-input').on('change',function(){

var search_word = $('.sidebar input[name="s"]').val();

var product_items=[];

var product_types=[];

var product_tags=[];

$("[name='product_item']:checked").each(function(){

var product_item=$(this).val();

product_items.push(product_item);

});

$("[name='product_type']:checked").each(function(){

var product_type=$(this).val();

product_types.push(product_type);

});

$("[name='product_tag']:checked").each(function(){

var product_tag=$(this).val();

product_tags.push(product_tag);

});

$('.js-articles').empty();

　　　　$('.loading').fadeIn();

$.ajax({

type: 'POST',

url: ajaxUrl,

data: {

'action': 'my_ajax_filter',

'nonce': '<?php echo wp_create_nonce( 'my-ajax-nonce_filter' ); ?>',

'items':product_items,

'types':product_types,

'tags':product_tags,

　　　　　　　　　 'search_word':search_word,

success: function(response) {

　　　　　　　 $('.loading').fadeOut();

　　　　　　　 $('.js-articles').append(response)

}

});

</script>

２．渡ってきたデータを基に絞り込まれた記事を取得してテンプレートを出力する。

先ほどのjsから渡ってきたデータを受け取って、検索のクエリをなげて最終的に用意していた「parts/parts-card.php」のテンプレートに当てはめた状態で、データを戻します。 ▼functions.php

// ajax関連==========================
function my_wp_ajax_filter() {
	$nonce = $_REQUEST['nonce'];
  $keyword = $_POST['search_word'];
  $types = $_POST['types'];

  $selected_items=$_POST['items'];
	if(empty($selected_items)){
		$items=get_terms('product_item');
		foreach($items as $item){
			$selected_items[]=$item->term_id;
		}
	}
	$selected_types=$_POST['types'];
	if(empty($selected_types)){
		$types=get_terms('product_type');
		foreach($types as $type){
			$selected_types[]=$type->term_id;
		}
	}
	$selected_tags=$_POST['tags'];

	if ( wp_verify_nonce( $nonce, 'my-ajax-nonce_filter' ) ) {

    if(empty($selected_tags)){
      $args=array(
        'post_type'=>'product',
        'post_status'=>'publish',
        'order'=>'DESC',
        's' => $keyword, // 検索からクエリーストリング値を渡します。
        'exact' => false, //タイトル／投稿の全体から正確なキーワードで検索するか デフォルト値はfalse
        'sentence' => false, //語句(フレーズ検索)で検索するか デフォルト値はfalse
        'posts_per_page' => -1,
        'tax_query'=>array(
        'relation'=>'AND',
          array(
            'taxonomy'=>'product_item',
            'field'=>'id',
            'terms'=>$selected_items,

          ),
          array(
            'taxonomy'=>'product_type',
            'field'=>'id',
            'terms'=>$selected_types,

          )
        )
      );
    } else {
      $args=array(
        'post_type'=>'product',
        'post_status'=>'publish',
        'order'=>'DESC',
        's' => $keyword, // 検索からクエリーストリング値を渡します。
        'exact' => false, //タイトル／投稿の全体から正確なキーワードで検索するか デフォルト値はfalse
        'sentence' => false, //語句(フレーズ検索)で検索するか デフォルト値はfalse
        'posts_per_page' => -1,
        'tax_query'=>array(
        'relation'=>'AND',
          array(
            'taxonomy'=>'product_item',
            'field'=>'id',
            'terms'=>$selected_items,

          ),
          array(
            'taxonomy'=>'product_type',
            'field'=>'id',
            'terms'=>$selected_types,

          ),
          array(
            'taxonomy'=>'product_tag',
            'field'=>'id',
            'terms'=>$selected_tags,
          )
        )
      );
    }

		$the_query = new WP_Query($args);
		if ($the_query->have_posts()){
            while ($the_query->have_posts()){
				$the_query->the_post();
				require('parts/parts-card.php'); //用意していたテンプレートに反映する。
			}
		}

	}
	die();
}
add_action( 'wp_ajax_my_ajax_filter', 'my_wp_ajax_filter' );
add_action( 'wp_ajax_nopriv_my_ajax_filter', 'my_wp_ajax_filter' );

// ajax関連==========================

function my_wp_ajax_filter() {

$nonce = $_REQUEST['nonce'];

$keyword = $_POST['search_word'];

$types = $_POST['types'];

$selected_items=$_POST['items'];

if(empty($selected_items)){

$items=get_terms('product_item');

foreach($items as $item){

$selected_items[]=$item->term_id;

}

$selected_types=$_POST['types'];

if(empty($selected_types)){

$types=get_terms('product_type');

foreach($types as $type){

$selected_types[]=$type->term_id;

}

$selected_tags=$_POST['tags'];

if ( wp_verify_nonce( $nonce, 'my-ajax-nonce_filter' ) ) {

if(empty($selected_tags)){

$args=array(

'post_type'=>'product',

'post_status'=>'publish',

'order'=>'DESC',

's' => $keyword, // 検索からクエリーストリング値を渡します。

'exact' => false, //タイトル／投稿の全体から正確なキーワードで検索するかデフォルト値はfalse

'sentence' => false, //語句(フレーズ検索)で検索するかデフォルト値はfalse

'posts_per_page' => -1,

'tax_query'=>array(

'relation'=>'AND',

array(

'taxonomy'=>'product_item',

'field'=>'id',

'terms'=>$selected_items,

array(

'taxonomy'=>'product_type',

'field'=>'id',

'terms'=>$selected_types,

)

);

} else {

$args=array(

'post_type'=>'product',

'post_status'=>'publish',

'order'=>'DESC',

's' => $keyword, // 検索からクエリーストリング値を渡します。

'exact' => false, //タイトル／投稿の全体から正確なキーワードで検索するかデフォルト値はfalse

'sentence' => false, //語句(フレーズ検索)で検索するかデフォルト値はfalse

'posts_per_page' => -1,

'tax_query'=>array(

'relation'=>'AND',

array(

'taxonomy'=>'product_item',

'field'=>'id',

'terms'=>$selected_items,

array(

'taxonomy'=>'product_type',

'field'=>'id',

'terms'=>$selected_types,

array(

'taxonomy'=>'product_tag',

'field'=>'id',

'terms'=>$selected_tags,

)

);

}

$the_query = new WP_Query($args);

if ($the_query->have_posts()){

while ($the_query->have_posts()){

$the_query->the_post();

require('parts/parts-card.php'); //用意していたテンプレートに反映する。

}

die();

}

add_action( 'wp_ajax_my_ajax_filter', 'my_wp_ajax_filter' );

add_action( 'wp_ajax_nopriv_my_ajax_filter', 'my_wp_ajax_filter' );

こんな感じでデータを受け取ったり、それを返したりしてajaxでの表示が可能になります。
参考サイトに記載があるように、WordPressはデフォルトでAjax処理をするファイル「/wp-admin/admin-ajax.php」をもっているので、それを使うというのは最初のポイントです。

その他、絞り込みの挙動だったり、ローディングのデザインは色々と調整する必要はありますが、wordpressでもajaxでの検索が可能となりました。
TECH BLOGサイトについては、他にも評価ボタンを工夫するなど、細かい仕掛けを沢山しています。