MENU
CLOSE
SYSTEMWEB Edit : 2023.10.14 Update : 2023.10.26

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

Contents
  1. そもそも、ajaxとは？
  2. 検索ぺージでajax通信を用いるメリット
  3. 一方で、最初に考慮したほうが良い点も。
  4. すごく簡単にやり方を解説
弊社で制作担当させていただいた、ウイングアーク１ｓｔさんのサイト「TECH BLOG」では、記事の検索ページに、ajaxによる非同期通信での検索機能を採用しました。


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

そもそも、ajaxとは？

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

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

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

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

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

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

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

今回の実装の流れを簡単に説明しようと思いますが、どのようにajax化するか、php側、js側のファイルへの詳細の記載については、とても参考になる記事がありました。
Ajaxでページ遷移なしの絞り込み検索をつくる
弊社の今回の事例は、独自のカスタマイズが多かったこともあり、汎用できる箇所も限られるので、割愛しながら説明します。

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

今回は訳あって、phpファイルに下記を記述しています。
・絞り込みでチェックされた値を取得&格納
・ajaxでphp側に値を送る
・返ってきたテンプレートを貼りつける
▼footer.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!-- 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>

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

先ほどのjsから渡ってきたデータを受け取って、検索のクエリをなげて最終的に用意していた「parts/parts-card.php」のテンプレートに当てはめた状態で、データを戻します。 ▼functions.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// 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サイトについては、他にも評価ボタンを工夫するなど、細かい仕掛けを沢山しています。

また、その効果について触れているインタビュー記事もありますので、是非読んでみてください。

Miki Kohinata

就活時代、企業で働きたくないがゆえに将来独立することを決めエンジニアの道へ。IT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。

KOHIMOTOの特徴

  • 実用性と品質を兼ね備えたWebサイトを適正価格で
  • 企業向けWebプロジェクト実績200件以上
  • ウェブサイト制作にまつわる最新情報発信

実用性と品質を兼ね備えたWebサイトを適正価格でご案内します。保守運用も承っておりますのでコンタクトよりお気軽にご連絡ください。

まずはプランをみてみる

Related article

Webサイト制作に必要な、デザインのトンマナ設定の方法・メリットを詳しく解説

2022.11.10

WEB

企業のwebサイト・IRページで、信頼感をもたらすデザイン研究

2022.11.12

WEB

ホームページからの問い合わせを増やすために、すぐ実践できる小技と押さえるべき4つのポイント

2023.06.19

WEB

Pick Up

【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.

2023.07.19

WEB

月額1万円プランもご案内。ホームページ(Webサイト)は保守・運用を行ってどんどん改善していこう!

2023.05.15

WEB

当社デザインチームが最新のUI/UXトレンドを知るため参考にしている海外サイト

2023.03.07

WEB

INDEX

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

PICK UP

KOHIMOTO inc.

KOHIMOTOは実用的なWebサイトを追求するWeb制作会社です。
現場から最前線のWebトレンドやノウハウなどをお届けしていきます。

Url
kohimoto.com
Add.
4-22-16 Minamicyo Kichijoji
Musashinoshi Tokyo Japan
Est.
2018
Email
info@kohimoto.com