WordPressサイトの投稿やページをユーザーにフィルターさせたいですか?
ユーザーはしばしば、特定のタイプのコンテンツを求めてサイトを訪れます。最新のチュートリアルや製品レビューに興味があるのかもしれません。コンテンツを簡単にフィルターして、探しているものを見つけることができたら便利だと思いませんか?
この投稿では、WordPressの便利な検索・フィルター機能を使って、ユーザーに投稿やページをフィルターしてもらう方法を紹介する。
なぜWordPressの投稿やページにフィルター機能を追加するのか?
コンテンツで溢れかえっているサイトを訪問して、必要なものを探すのに苦労したことはありませんか?これはユーザーにとってフラストレーションのたまる体験であり、サイトを完全に放棄してしまう原因になります。
検索エンジンはユーザーエクスペリエンスをランキング要因のひとつと考えているため、最終的にはSEOに悪影響を及ぼしかねません。直帰率が高く、エンゲージメントが低いサイトは、検索エンジンから価値が低いとみなされる可能性があります。
幸いなことに、WordPressサイトに検索とフィルター機能を実装するという簡単な解決策があります。この強力なツールを使えば、ユーザーは特定の条件に基づいてコンテンツを絞り込むことができ、探しているものを簡単に見つけることができます。
検索とフィルター機能はWordPressブログだけに適しているわけではない。何千ものスレッドがあるフォーラムのようなサイトにも最適です。そうすれば、ユーザーはトピック、日付、投稿者などで適切なディスカッションを検索できる。
また、ポッドキャスト・サイトがあれば、リスナーはその機能を使って好みのエピソードを探すことができる。
それを念頭に置いて、WordPressサイトの投稿やページをユーザーにフィルターさせる3つの簡単な方法を見てみましょう。以下のクイックリンクから、お好きな方法に飛べます:
方法1:SearchWPで投稿とページをフィルターする(推奨)
SearchWPは強力なWordPress検索プラグインで、あなたのサイトにフィルター機能を追加するのに一番おすすめです。とてもユーザーフレンドリーなので、初心者の方にもおすすめです。
注:SearchWPは無料版を提供していませんので、プレミアムプランを購入する必要があります。あなたは私たちの包括的なSearchWPレビューでプラグインについてさらに詳しく学ぶことができます。
SearchWPを使ってフィルター設定付きのカスタム検索フォームを作成する方法をステップバイステップでご紹介します。
ステップ1:SearchWPのインストールとセットアップ
まず、SearchWPプラグインをインストールして有効化する必要があります。初めての方は、WordPressプラグインのインストール方法が参考になります。
有効化したら、SearchWP ” Settingsにアクセスしてください。一般’タブで、有効化したライセンスキーを入力します。
次に、SearchWP ” Algorithmに向かう。ここでは、初期設定の検索エンジンを編集するか、追加の検索エンジンを作成することができます。
初期設定のエンジンでは、ユーザーはページ、投稿、メディア、コメントから検索することができ、一般的なWordPressブログには適している。
一方、追加検索エンジンは、カテゴリー、タグ、カスタム投稿タイプ、カスタムタクソノミーのような他のソースを使用することができます。これは、WooCommerceサイトのeコマース商品フィルターのように、ブログ以外のコンテンツ検索とフィルターフォームを作成するのに便利かもしれません。
このチュートリアルでは、初期設定のエンジンを先頭に固定表示し、その設定を調整するだけにします。そのためには、’Sources & Settings’をクリックします。
投稿とページをフィルターする検索とフィルター機能を作るので、WordPressの検索エンジンのソースとしてページと投稿を含めるだけだ。
また、キーワードが完全に一致しない場合でもSearchWPが結果を表示できる「キーワードステム」機能も有効化しました。
設定に満足したら、『完了』をクリックする。
ステップ2:検索エンジンの微調整
選択したすべてのソース(カテゴリー:ページと投稿)のセクションが表示されます。
各ソースには「適用属性の関連性」のスライダーがあります。これらのスライダーは、検索結果をランキングする際にSearchWPが各属性に与える重み付けを決定する。
もっと簡単に言えば、重み付けの高い属性と一致するコンテンツは、検索結果の上位に表示されるということだ。
例えば、’投稿コンテンツ’属性を’投稿タイトル’属性よりも重視すると、SearchWPは検索キーワードがコンテンツ内に表示される結果を優先する。
これらのスライダーはお好みに応じて調整できます。
また、「属性の追加/削除」をクリックすることもできる。
ポップアップが表示され、属性を追加または削除することができます。
例えば、カスタム・タクソノミーやカスタム・フィールドを入れて検索可能にすることもできる。
もう一つの強力な機能は、検索結果から特定のコンテンツを含めたり除外したりするルールを作成できることである。
これを行うには、「ルールの編集」ボタンをクリックするだけです。
この設定により、無関係なコンテンツをフィルターにかけたり、特定のカテゴリーを強調表示したりすることができます。
次のポップアップで「Add Rule」をクリックする。
ドロップダウンメニューから、’Only show entries if’または’Exclude entries if’を選択する。
次に、コンテンツが特定のタクソノミーの一部である場合、特定の日付範囲内に公開された場合、または特定のIDを持つ場合に、そのコンテンツを除外するか含めるかを選択できます。
別のルールを追加するには、「ルールの追加」ボタンをクリックし、上記と同じプロセスを繰り返します。ルールの設定に満足したら、「完了」をクリックする。
他の検索エントリー・ソースについても同じプロセスを繰り返すことができる。
検索エンジンに満足したら、ページのトップに戻って『保存』をクリックする。
SearchWPはインデックスを再構築しますが、これには数分かかる場合があります。
Index Status 100%’ と表示されたら、SearchWPがすべてのコンテンツと検索エンジンのルールをインデックスしたことを意味します。
ステップ3: カスタム検索フォームの作成
検索エンジンが設定されたので、フィルターオプションを備えたユーザーフレンドリーな検索フォームを作ってみよう。
SearchWP ” Search Formsに移動し、’新規追加’をクリックします。
まず、フォームにわかりやすい名前をつけましょう。
これは内部で参照するためのものなので、名前は覚えやすいものであれば何でも構いません。
次にレイアウトを選ぶ。
このチュートリアルでは、最もフィルターメニューが多い「Combined」オプションを使用します。
次に、「カスタマイザー」セクションまでスクロールダウンし、「カテゴリー検索」と「詳細検索」の両方のオプションを選択します。これで、フォームにフィルター機能がすべて含まれるようになります。
検索バーの下に検索キーワードを追加したい場合は、オプションで「クイック検索」を設定できます。
次に、「Engine」メニューで、先ほど作成した検索エンジンを選択する。
結果」に関しては、どの検索結果ページを使用するかを選択することができます:初期設定のWordPressの結果またはSearchWPのバージョン。
検索のタイプ」で「投稿とページ」を選択する。
その下に、フィルターメニューに含めたいカテゴリー名を追加することができる。
フィールドラベルには、検索フィールドに表示されるプレースホルダーテキストを入力してください。
先に「クイック検索」を選択した場合は、ユーザーがよく検索するキーワードをクイック検索項目に含めることができます。
高度な検索フィルター」では、投稿者、投稿タイプ、タグなど、ユーザーに提供したいフィルター設定を選択するだけです。
最後に、’Form Style’ と ‘Button Style’ で、あなたのサイトのデザインに合わせて検索フォームの外観をカスタマイズしてください。
検索フォームの色、フォント、形状を変更することができます。
すべての設定が終わったら、上にスクロールして戻る。
その後、「保存」をクリックして検索フォームを作成します。
ステップ 4: 検索・フィルターフォームの埋め込み
SearchWP プラグインを使えば、ホームページや ウィジェット対応エリアのようなフロントエンドに検索フォームを簡単に埋め込むことができます。ここでは WordPress ブロックエディターと Search Form ブロックを使ってページに追加するデモを行います。
まず、フォームを追加したいページまたは投稿を開きます。次に、「+ブロックを追加」アイコンをクリックし、「検索フォーム」を検索します。
ブロック設定サイドバーで、ドロップダウンメニューから作成したフォームを選択します。
最後に、ページを公開するか更新すると、検索フォームが表示されます。
詳しくは、ステップ・バイ・ステップのガイドをご覧ください:
あるいは、ショートコードを使ってフォームを表示することもできます。
これを行うには、SearchWP ” Search Formsで特定のフォームのショートコードを見つけ、’Shortcode’ カラムにあるコードをコピーします。
WordPressでショートコードを追加する方法については、こちらをご覧ください。
検索フォームとフィルターオプションの設定により、サイト訪問者は探しているコンテンツを簡単に見つけることができます。
これはユーザーエクスペリエンスを向上させるだけでなく、ユーザーにさまざまなカテゴリーを探検してもらい、より多くの価値あるコンテンツを発見してもらうことにもつながる。
方法2:カスタムコードで投稿とページをフィルターする(上級者向け)
次の方法は、カスタムコードを使用します。初心者の方にとって、このプロセスは敷居が高く感じるかもしれませんが、私たちはあなたのサイトでスムーズに動作するようにコードを試行錯誤しています。
さらに、市場で最高のコード・スニペット・プラグインであるWPCodeを使用します。このプラグインを使えば、サイトのファイルを直接扱うことなくカスタマイザーのコードを安全に挿入できるので、サイトを壊してしまう可能性が低くなります。
最初のステップは、WPCodeをインストールすることです。詳しくは、WordPressプラグインのインストール方法をご覧ください。
注: このチュートリアルには無料のWPCodeプラグインを使用することもできますが、プレミアムプラグインにアップグレードすることで、クラウドベースのコードスニペットライブラリ、WooCommerceインテグレーションなどを利用できるようになります。
それが完了したら、WordPress管理エリアの「Code Snippets ” + Add Snippet 」にアクセスします。そして、「カスタムコードを追加(新規スニペット)」を選択し、「スニペットを使用」ボタンをクリックします。
さて、追加しなければならないコード・スニペットには2つのタイプがある。ひとつずつ見ていこう:
WordPressフィルターコードの追加
このコードは、ユーザーが検索フォームで選択したオプションに基づいて検索結果をフィルターするようWordPressに指示します。このコードは、後で説明する検索フォームの作成を担当する別のコードスニペットと連動します。
まず、新しいスニペットに名前をつける必要があります。WordPress Search Filter」のようなシンプルなものでも構いません。
次に、コードタイプを「PHPスニペット」に変更する。
次に、以下のコードをコピー&ペーストして、コード・プレビュー・ボックスに貼り付けます:
function wpb_filter_posts($query) {
if ($query->is_main_query() && $query->is_search) {
// Category filter
if (isset($_GET['category'])) {
$category = get_category_by_slug($_GET['category']);
if ($category) {
$query->set('cat', $category->term_id);
}
}
// Published date filter based on URL structure
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$url_parts = explode('/', trim($url_path, '/'));
if (count($url_parts) >= 4 && is_numeric($url_parts[0]) && is_numeric($url_parts[1]) && is_numeric($url_parts[2])) {
$year = $url_parts[0];
$month = $url_parts[1];
$day = $url_parts[2];
$query->set('date_query', array(
array(
'year' => $year,
'month' => $month,
'day' => $day,
),
));
}
// Include posts without categories or tags
$query->set('post_status', 'publish');
$query->set('post_type', 'post');
$query->set('posts_per_page', -1);
// Include post types
if (isset($_GET['post_type']) && $_GET['post_type'] == 'page') {
$query->set('post_type', array('page'));
} else {
$query->set('post_type', array('post', 'page', 'custom_post_type'));
}
}
}
add_action('pre_get_posts', 'wpb_filter_posts');
このコード・スニペットは、ユーザーが検索フォームでフィルターを選択したかどうかをチェックします。例えば、カテゴリーフィルターが選択された場合、このコードはそのカテゴリーを識別し、そのカテゴリーに属する投稿のみを表示します。
また、ユーザーが選択した特定の年、月、日を探すことで、結果を日付でフィルターすることもできる。
最後に、コードはユーザーが投稿だけを見たいのか、ページを見たいのか、すべての投稿タイプ(カスタム投稿タイプを含む)を見たいのかに基づいて結果をチェックし、フィルターをかけます。
コードを貼り付けたら、「挿入場所」セクションまでスクロールダウンしてください。初期設定では、挿入方法は「Auto Insert」、場所は「Run Everywhere」となっています。
WordPressテーマのfunctions.phpファイルにコードを追加して正しく動作するように、これらの設定はそのままにしておくことができます。
そして、コード・スニペットを有効化して「スニペットを保存」をクリックするだけだ。
WordPressの検索フォームコードを追加する
この次のコードはカスタム検索フォームを作成するもので、後でショートコードを使って埋め込むことができる。
必要なことはすべて、前と同じようにWPCodeを使ってカスタムコードを追加する手順を繰り返すだけです。それから、このコードに ‘WordPress Search Form’ という名前をつけ、コードタイプを ‘PHP Snippet’ に変更します。
次に、以下のコード・スニペットをコード・プレビュー・ボックスに貼り付けます:
function wpb_filter_posts_form() {
$categories = get_categories();
$tags = get_tags();
$post_types = get_post_types(array('public' => true));
$output = '<form action="' . home_url('/') . '" method="get">';
$output .= '<input type="search" name="s" placeholder="Search...">';
// Category dropdown
$output .= '<select name="category">';
$output .= '<option value="" selected>All Categories</option>';
foreach ($categories as $category) {
$output .= '<option value="' . $category->slug . '">' . $category->name . '</option>';
}
$output .= '</select>';
// Tag dropdown
$output .= '<select name="tag">';
$output .= '<option value="" selected>All Tags</option>';
foreach ($tags as $tag) {
$output .= '<option value="' . $tag->slug . '">' . $tag->name . '</option>';
}
$output .= '</select>';
// Post type dropdown
$output .= '<select name="post_type">';
$output .= '<option value="all" selected>All Post Types</option>';
foreach ($post_types as $post_type) {
$post_type_object = get_post_type_object($post_type);
$output .= '<option value="' . $post_type . '">' . $post_type_object->label . '</option>';
}
$output .= '</select>';
// Year dropdown
$output .= '<select name="year">';
$output .= '<option value="">Select Year</option>';
for ($year = date('Y'); $year >= 2000; $year--) {
$output .= '<option value="' . $year . '">' . $year . '</option>';
}
$output .= '</select>';
// Month dropdown
$output .= '<select name="month">';
$output .= '<option value="">Select Month</option>';
for ($month = 1; $month <= 12; $month++) {
$output .= '<option value="' . sprintf('%02d', $month) . '">' . date('F', mktime(0, 0, 0, $month, 1)) . '</option>';
}
$output .= '</select>';
// Day dropdown
$output .= '<select name="day">';
$output .= '<option value="">Select Day</option>';
for ($day = 1; $day <= 31; $day++) {
$output .= '<option value="' . sprintf('%02d', $day) . '">' . $day . '</option>';
}
$output .= '</select>';
$output .= '<input type="submit" value="Search">';
$output .= '</form>';
return $output;
}
add_shortcode('wpb_filter_posts_form', 'wpb_filter_posts_form');
このコードは[wpb_filter_posts_form]
というショートコードを作成し、ユーザーがサイトを検索できるフォームを追加します。このフォームにはキーワード検索バーとフィルター用のドロップダウンメニューがあります。
コードタイプは、検索バーのドロップダウンメニューのために、あなたのサイトからカテゴリー、タグ、利用可能な投稿タイプを取得します。ユーザーは検索結果を絞り込むために特定のカテゴリー、タグ、投稿タイプを選択することができます。
さらに、このコードには年、月、日のドロップダウンが含まれており、日付によるフィルタをさらに正確に設定することができます。最後に、選択したフィルターで検索を開始する送信ボタンを追加します。
先ほどのコードと同様、インサーターメソッドの設定はそのままで大丈夫です。そして、コードを有効化して保存します。
検索フォームのショートコードを埋め込む
この段階で、[wpb_filter_posts_form]
ショートコードを投稿、ページ、テーマテンプレート、またはウィジェット対応エリアに追加できます。詳しくは、WordPressでショートコードを追加する方法のガイドをご覧ください。
今回は、カスタム検索ページにショートコードを追加する。同じことをしたい場合は、WordPressで新規ページを作成してください。
次に、必要なブロックタイプを使って検索ページをカスタマイズします。例えば、画像やテキストを追加して、読者に検索バーの使い方を教えることができます。
その後、「+ Add Block」ボタンをクリックし、「Shortcode」ブロックを選択する。
完了したら、適切なフィールドに[wpb_filter_posts_form]
ショートコードをインサートするだけです。
公開する、更新する、または保存するボタンを押して、変更を有効にします。
新しいカスタム検索フォームが表示されるはずです。
デモサイトではこんな感じです:
方法3:Search & Filterプラグイン(無料)で投稿とページをフィルターする。
最後の方法は、無料で利用できるSearch & Filterプラグインを使う方法です。WordPressのブログページで検索とフィルター機能を有効化する手軽で簡単な方法をお探しの方には最適な設定です。
インストーラをインストールし、有効化する。 サーチ&フィルタープラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化すると、WordPressの管理エリアに「検索とフィルター」という新しいメニュー項目が追加されます。それをクリックすると、プラグインの使用方法に関する詳細なドキュメンテーションが記載された使用方法のページに移動します。
Search & Filterプラグインには、フィルターオプションを表示するための異なるパラメータを受け付けるショートコードが付属しています。このショートコードは投稿、ページ、またはテキストウィジェット内で使用できます:
[searchandfilter fields="search,category,post_tag"]]。
これにより、検索、カテゴリー、タグフィールドによるフィルターオプションが表示されます:
このプラグインのクールなところは、ショートコードタグを編集することで、フィルターオプションをカスタマイズできることだ。
例えば、カテゴリー、タグ、投稿タイプ、日付フィールドを検索バーに含めたい場合は、このショートコードを使う必要がある:
[searchandfilter fields="search,category,post_tag,post_types,post_date"]]。
こんな感じだ:
ドロップダウンメニューを使いたくない場合は、チェックボックスを使い、各フィールドにラベルを追加することもできます。
以下のショートコードでは、カテゴリーオプションのチェックボックスとともに検索バーを表示するようプラグインに指示しています:
[searchandfilter headings="カテゴリーを選択:" types="checkbox" fields="カテゴリー"].
以下の例をご覧いただきたい:
さらに、1つのショートコードで、いくつかのフィルターオプションにチェックボックスを使い、他のオプションにドロップダウンメニューを使うようにプラグインに指示することもできます。
これは、投稿タイプ、カテゴリー、タグを検索バーに含めるために使用したショートコードです。投稿タイプのオプションにチェックボックスを使うようにプラグインに依頼しました:
[searchandfilter headings="投稿タイプ、カテゴリー、タグ" types="checkbox, select, select" fields="post_types,category,post_tag"].
ショートコードの使用方法については、プラグインのドキュメンテーションを参照してください。
ボーナスのヒントWordPressサイトにライブAjax検索を追加する
ユーザーに投稿やページをフィルターさせる方法がわかったところで、さらに一歩進んでライブAjax検索で検索体験を向上させることができる。
ライブAjax検索は、ユーザーがクエリーを入力している最中に検索結果を表示するリアルタイム技術を使用しています。つまり、ページの更新を待つ必要がありません。検索結果は即座に表示され、訪問者にとって検索プロセスがより速く便利になります。
より高速な検索エクスペリエンスは、ユーザーをサイトに長く留まらせ、ページビューを増やし、直帰率を下げることを意味します。
SearchWP Live Ajax Searchと呼ばれる無料のプラグインを使えば、簡単にこの機能をサイトに追加することができます。詳しくは、サイトにライブAjax検索を追加する方法についてのWordPressチュートリアルをお読みください。
この投稿が、WordPressで投稿やページをユーザーにフィルターさせる方法を学ぶのにお役に立てば幸いです。また、WordPressでウェブディレクトリを作成する方法や、WordPressのエキスパートが選んだサイトを成長させるための必須プラグインもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Himanshu Gautam says
hi
I am using this plugin
is there any option to select a category without hitting the submit button?
Marwan Nour says
Hello there,
I am trying to implement Search & Filter in a website that’s both in Arabic and in English. The English version of the Search & Filter is working well however in the Arabic Version, after hitting search, I am redirected to the English Version of the search page with the results in English. Can anyone help me with that issue please? Thank you
WPBeginner Support says
You would want to reach out to the plugin’s support to see if this could be a conflict with the plugin and the translation plugin you’re using.
管理者
Tom Ale says
Hi, I am using WordPress with Gantry.
I installed this plugin and used a shortcode. It appears where it suppose to be. When clicking the button to filter content, nothing happens. Did anyone face this problem? Help, please.
Sébastien Albert says
Hi,
Search & Filter looks great. But could you tell me if it can do that :
I would have a filter on tags but only on one category which I could define…
Thanks a lot
Sebastien
Soumik Sadman Anwar says
How can I create filter options in a single post?
For example, If I am interested in writing a post “Necessary Tools to Build A Website” and want to include filter options like Purpose Based Tools (like SEO, Design etc.) and the Price option (Free or Paid), how do I do it?
Pavel says
Great plugin, but have some limitations and bugs.
1. No Reset button.
2. When I uncheck all checkboxes and press Submit, it transfers to the front page.
Maybe there’s an option Show all?
Wolney Mamede says
First of all, thanks for the post.
I would like to know if it is possible to filter the search from the group of fields, created from the “Advanced Custom Fields – v. 4.4.12” plugin.
Also by default, the search would be restricted to a custom post type from the “Custom Post Type UI – v. 1.5.8” plugin.
Sultan Haider says
Hi, I had created employ database on tablepress and i want to filter in front end employ according to year wise for example if i select 2013 this shows only those employ which join in 2013.
i have perform lot of research but i cant find free pluggin according to my need.
please help me for suggestion.
thanks
Christine says
Thanks a lot for the comprehensive article. Do you know if it is also possible to have only certain tags in the dropdowns?
Pawan says
Great Job. just one last question. Instead of searching the post, is it possible to search category using the search string? I would like to show all the possible post in search page and then the category if it matches the search string (partially or fully).
Maz says
Hi,
Great as always.
I just wonder would the use of this plugin be recommended on a site with many posts? Will it not lead to slower load time?
Thanks
Matus says
Could you please give us a little bit deeper look to your behind the scenes? (in Blueprint post you write only what you’re using – you can also write if you want, how to properly set up plugins, themes…)
For example tutorial on 10 tips and trick to masterize or customize Genesis Framework would be really really helpful.
Patxi says
Hi WPBeginner!
In relation to the filters of new taxonomies, a question of initiation, how I can visualize in the post a new taxonomy for a second type of labels that later I can filter with this plugin?
It would be an interesting topic.
Thanks for you post!
Omer Causey says
Your suggestions for allowing users to filter posts are welcome, but the explanation of how and where to insert the required shortcode is beyond this beginner’s understanding.
WPBeginner Support says
Hi Omer,
You can add the shortcode in a post or page. If you want to display the filter site-wide then you will need to edit your WordPress theme files and use the template tag instead.
管理者