WordPressプラグイン「WP Number of Results 」操作説明
WP Number of Results プラグイン操作説明
2022/07/07 更新, Version:1.1.1
WP Number of Resultsとは、検索条件の選択中にヒット件数を表示するWordPressプラグインになります。
このWP Number of Resultsプラグイン操作説明ページでは、
- プラグインを用いた検索数の表示について
- プラグインの利用方法
プラグインを用いた検索数の表示について
それでは、初めに検索カウンターデモを参考にWP Number of Resultsプラグイン(以下、同プラグイン)を用いた検索数の表示について説明していきます。検索カウンターデモ
同プラグインを有効化すると、検索カウンターウィジェットを追加し、検索数を表示することができます。
検索カウンターデモでは、 Search & Filterプラグインを使用した検索に、 条件を入力した時点で検索数を表示する例を示しています。
事前にインストールするプラグイン
作業の前にあらかじめ、下記プラグインをインストール&有効化してください。・Search & Filterプラグイン
・Widget Shortcodeプラグイン
設置方法
同プラグインでは、「ウィジェット」「ショートコード」の2通りの設置方法があります。表示と操作方法
検索カウンターウィジェットでは、検索ボックスへの入力テキストや、プルダウンメニューの選択項目を変更すると、その条件での検索結果件数を求め、 検索結果の件数を表示します。プラグインの利用方法
同プラグインのご利用に当たり、初めに同プラグインの構成と動作環境について説明を行います。プラグインの構成と動作環境
同プラグインをご購入いただくとzipファイルにてダウンロード頂けます。ダウンロードしたzipファイルは以下の構成となっております(バージョンにより多少違いがございます)。
————-
wp-hellowork-importer
|-classes
|-js
|-wnr-functions.php
|-wp-number-of-results.php
————-
同プラグインはWordPressのプラグインであり、下記の動作環境にてご利用いただけます。
サーバー関連
PHP バージョン7.3以上MySQL バージョン5.6または MariaDB バージョン10.1以上
WordPress バージョン 5.4~(推奨)
ブラウザ
Google ChromeSafari
Microsoft Edge
※モダンブラウザ以外のブラウザ、AndroidのBrowserの古い機種では対応しておりませんのでご注意ください
導入手順
ここからは、実際にプラグインを有効化して検索カウンターを表示する手順について説明していきます。簡単に流れを説明すると次のようになります。
(1) WP Number of Resultsプラグインのアップロード
(2) WP Number of Resultsプラグインの有効化
(3-1) WordPress管理画面>外観>ウィジェットにて検索カウンターの設置
(3-2)ショートコードにて検索カウンターの設置
(4)) 表示確認
それでは(1) WP Number of Resultsプラグインのアップロードから順に見ていきましょう。
(1) WP Number of Resultsプラグインのアップロード
同プラグインをご購入いただくとzipファイルでダウンロードが行えますので、zipファイルのままプラグインのアップロードを行います。WordPress管理画面のプラグイン>新規追加>プラグインアップロードよりダウンロードしましたzipファイルのアップロードを行ってください。
尚、ダウンロードしたzipファイルを解凍して、FTPクライアントソフト等でアップロードを行った場合、不具合が生じる可能性がございます。ファイルのパーミッションを、管理画面よりインストールした時と同様に設定を行ってください。
(2) WP Number of Resultsプラグインの有効化
ファイルをアップロード後、「今すぐインストール」ボタンを押下し、インストールに成功するとプラグインを有効化することが出来ます。図3の画面が表示されましたらそのまま「プラグインを有効化」を行ってください。
有効化に成功すると、WordPress管理画面の投稿の編集画面にて事業所番号のカスタムフィールドが表示されるようになります。
また、WordPress管理画面のメニューに「WP Number of Results設定」の項目が追加されますのでご確認ください。
(3-1) WordPress管理画面>外観>ウィジェットにて検索カウンターウィジェットを設置
同プラグインを利用することで検索カウンターを設置することが出来ます。Search & Flterの設置
Search & Flterを使って、投稿、または固定ページにテキスト入力、カテゴリー選択を条件に検索するショートコードを設置します クラス名は任意で設定可能ですが、ここでは wnrdemo として設置しています。
1 |
[searchandfilter class="wnrdemo" fields="search,category" submit_label="検索"] |
入力パラメータ
Search & Flterの入力条件に対して、検索数を求めるには、入力パラメータにJson形式で 紐づけを行います 書式は、 “変数名”:”DOM ノードオブジェクト名” となっています。
1 2 3 4 |
{ "ofsearch": "form.wnrdemo input[name='ofsearch']", "ofcategory": "form.wnrdemo select[name='ofcategory']" } |
WP_Queryパラメータ
書式は、 “WordPress WP_Query変数”:”入力パラメータの変数名” となっています。
1 2 3 4 |
{ "s": "{ofsearch}", "cat": "{ofcategory}" } |
検索カウンターのカスタマイズ
検索カウンターのデザインは、テーマ側でカスタマイズが可能です。プラグインの classes/view/NumberOfResultsView.php をテーマフォルダ直下にコピーし、変更を行ってください。
テーマフォルダに NumberOfResultsView.php が無い場合は、プラグイン側のデフォルトの classes/view/NumberOfResultsView.php が使用されます。
1 2 3 |
<div style="height:27px; padding: 0; font-weight: bold; color:#2266aa; margin-bottom:10px;"> 検索結果数: <span class="wnr_counter" style="font-size:24px;"></span> 件 </div> |
(3-2)ショートコードにて検索カウンターの設置
Widget Shortcodeプラグインを使うと、検索カウンターウィジェットをショートコードにして投稿、固定ページ、またはテンプレートに設置することが出来ます。投稿、固定ページへの記述例
1 2 3 4 |
<div class="sample-wrap text-center"> [widget id="number_of_results_widget-3"] [searchandfilter class="wnrdemo" fields="search,category" submit_label="検索"] </div> |
WordPressテーマのテンプレートへの記述例
1 2 3 4 |
<div class="sample-wrap text-center"> <?php echo do_shortcode('[widget id="number_of_results_widget-3"]'); ?> <?php echo do_shortcode('[searchandfilter class="wnrdemo" fields="search,category" submit_label="検索"]'); ?> </div> |
(4)表示確認
検索カウンターを設置したページの表示を確認してください。 ウィジェットを設置した箇所の検索ボックスに、値を入れると検索結果数が表示されます。以上でWP Number of Results プラグイン操作説明を終わりにします。
是非、WordPressプラグイン「WP Number of Results」を利用して、よりリッチで便利なWebサイト作成にお役立て下さい。
また、ご意見・ご要望、ご感想等もお気軽にお知らせください。