ユーザーがWordPressで投稿やページをフィルタリングできるようにする方法（3つの方法）

コンテンツライブラリの増加は、健全なWordPressサイトの兆候であることがよくあります。しかし、コンテンツが多いほど、必ずしもより良い体験になるとは限りません。特に、訪問者が見たいものを見つけられない場合。

成長中の多くのブログでこの状況を見てきました。素晴らしい投稿がたくさんあっても、訪問者がフィルタリングする簡単な方法がないため、フラストレーションから離れてしまいます。

つまり、投稿やページにフィルタを追加することは、単なる追加機能ではありません。訪問者を惹きつけたいのであれば、必須です。

カテゴリ、タグ、日付、さらにはカスタムフィールドでコンテンツをすばやく並べ替えることができると、ユーザーはサイトに留まり、さらに探索する可能性がはるかに高くなります。

この問題に対処するため、さまざまなフィルタリングソリューションについて多くの時間をかけて調査およびテストを行いました。このガイドでは、SearchWP、WPCode、およびSearch & Filterプラグインを使用して、ユーザーがWordPressで投稿やページをフィルタリングするための最も簡単で効果的な3つの方法を説明します。

WordPressの投稿や固定ページにフィルタリング機能を追加する理由

コンテンツが満載のWordPressウェブサイトを訪れたことはありますか？しかし、必要なものを見つけるのに苦労した経験はありませんか？これはユーザーにとってフラストレーションの原因となり、サイトを完全に離れてしまう可能性があります。

最終的に、これはSEOに悪影響を与える可能性があります。なぜなら、検索エンジンはユーザーエクスペリエンスをランキング要因と見なすからです。高い直帰率と低いエンゲージメントのウェブサイトは、検索エンジンにとって価値が低いと見なされる可能性があります。

幸いなことに、簡単な解決策があります。それは、WordPressウェブサイトに検索およびフィルター機能（Search & Filter feature）を実装することです。この強力なツールにより、ユーザーは特定の条件に基づいてコンテンツを絞り込むことができ、探しているものを簡単に見つけることができます。

検索およびフィルター機能は、WordPressブログだけでなく、何千ものスレッドがあるフォーラムのようなサイトにも最適です。これにより、ユーザーはトピック、日付、または作成者で適切なディスカッションを検索できます。

または、ポッドキャストサイトをお持ちの場合、リスナーはこの機能を使用して好みのエピソードを探すことができます。

これを踏まえ、ユーザーが WordPress サイトで投稿やページをフィルタリングできるようにする 3 つの簡単な方法を紹介します。下のクイックリンクを使用して、希望する方法にスキップできます。

• 方法1：検索WPで投稿とページをフィルタリングする（推奨）
• 方法2：カスタムコード（上級者向け）で投稿とページをフィルターする
• 方法3：Search & Filterプラグイン（無料）で投稿とページをフィルターする
• ボーナスのヒント：WordPressサイトにライブAjax検索を追加する

準備はいいですか？早速始めましょう！

方法1：検索WPで投稿とページをフィルタリングする（推奨）

SearchWP は、強力なWordPress検索プラグインであり、ウェブサイトにフィルタリング機能を追加するための最良の推奨事項です。非常にユーザーフレンドリーで、初心者にも最適な選択肢です。

ここでは、SearchWP を使用してフィルタリングオプション付きのカスタム検索フォームを作成する方法をステップバイステップで説明します。

ステップ 1: SearchWP のインストールとセットアップ

まず、SearchWPプラグインをインストールして有効化する必要があります。これに慣れていない場合は、WordPressプラグインのインストール方法に関する役立つガイドがあります。

有効化したら、SearchWP » 設定 に移動できます。次に、「一般」タブでライセンスキーを入力して有効化してください。

さて、SearchWP » Algorithm に移動しましょう。ここで、デフォルトの検索エンジンを編集するか、追加の検索エンジンを作成できます。

デフォルトのエンジンは、ページ、投稿、メディアファイル、コメントを検索できるため、一般的なWordPressブログに適しています。

一方、追加の検索エンジンは、カテゴリ、タグ、カスタム投稿タイプ、カスタムタクソノミーなどの他のソースを使用できます。これは、WooCommerceサイトのeコマース製品フィルターのような、ブログ以外のコンテンツ検索およびフィルターフォームの作成に役立つ場合があります。

このチュートリアルでは、デフォルトのエンジンを使用し、その設定を調整するだけです。これを行うには、「ソースと設定」をクリックします。

投稿やページをフィルタリングするための検索およびフィルタリング機能を作成するため、WordPressの検索エンジンのソースとして、ページと投稿のみを含めます。

また、「キーワードの語幹」機能を有効にしました。これにより、キーワードが完全に一致しない場合でもSearchWPが結果を表示できるようになります。

設定に満足したら、「完了」をクリックするだけです。

ステップ2：検索エンジンを微調整する

これで、選択したすべてのソース（この場合は投稿とページのみ）のセクションが表示されます。

各ソースには、「適用可能な属性の関連性」のスライダーがあります。これらのスライダーは、SearchWPが検索結果のランキング時に各属性にどれだけの重みを与えるかを決定します。

より簡単な言葉で言うと、重み付けの高い属性に強く一致するコンテンツが検索結果の上位に表示されます。

たとえば、「投稿コンテンツ」属性に「投稿タイトル」属性よりも多くの重みを与えると、SearchWPは検索語がコンテンツ自体に出現する結果を優先します。

これらのスライダーは、お好みに合わせて調整できます。

「属性の追加/削除」をクリックすることもできます。

これにより、さらに多くの属性を含めたり削除したりするためのポップアップが表示されます。

例えば、カスタムタクソノミーやカスタムフィールドを検索可能にすることができます。

もう1つの強力な機能は、検索結果に含める、または特定のコンテンツを除外するルールを作成できることです。

これを行うには、「ルールの編集」ボタンをクリックするだけです。

この設定により、関連性の低いコンテンツを除外したり、特定のカテゴリを強調表示したりできます。

次のポップアップで「ルールを追加」をクリックできます。

次に、ドロップダウンメニューをクリックし、「エントリを表示する場合のみ」または「エントリを除外する場合のみ」を選択します。

次に、特定のタクソノミーの一部であるコンテンツ、特定の期間内に公開されたコンテンツ、または特定のIDを持つコンテンツを除外するか含めるかを選択できます。

ルールをさらに追加するには、「ルールの追加」ボタンをクリックし、上記と同じプロセスを繰り返します。ルールの設定が完了したら、「完了」をクリックします。

必要に応じて、他の検索エントリソースについても同様のプロセスを繰り返すことができます。

検索エンジンに満足したら、ページの上部に戻って「保存」をクリックできます。

SearchWPはインデックスを再構築します。これには数分かかる場合があります。

「Index Status 100%」が表示されたら、SearchWP が検索エンジンのすべてのコンテンツとルールをインデックス化したことを意味します。

ステップ3：カスタム検索フォームの構築

検索エンジンが設定されたので、フィルターオプション付きのユーザーフレンドリーな検索フォームを作成しましょう。

まず、**SearchWP »検索フォーム**に移動し、「新規追加」をクリックします。

次の画面で、まずフォームに分かりやすい名前を付けます。

これは内部参照用ですので、名前は覚えやすいものであれば何でも構いません。

次に、レイアウトを選択します。

このチュートリアルでは、最も多くのフィルタリングメニューを提供するため、「Combined」オプションを使用します。

次に、「カスタムスタイリング」セクションまでスクロールダウンし、「カテゴリ検索」と「高度な検索」の両方のオプションを選択します。これにより、フォームにすべてのフィルター機能が含まれるようになります。

必要に応じて「クイック検索」を選択すると、検索バーの下に提案される検索語を追加できます。

次に、「エンジン」メニューで、以前に作成した検索エンジンを選択します。

「結果」については、使用する検索結果ページを選択できます。デフォルトのWordPressの結果か、SearchWPのバージョンかを選択できます。

「検索の種類」では、「投稿」と「ページ」を選択しましょう。

その下に、フィルタメニューに含めたいカテゴリ名を追加できます。

「フィールドラベル」には、「何をお探しですか？」のような検索フィールドに表示されるプレースホルダーテキストを入力してください。

前に「クイック検索」を選択した場合は、「クイック検索項目」にユーザーが一般的に検索する可能性のある用語を含めることができます。

「高度な検索フィルター」で、ユーザーに提供したいフィルターオプション（「著者」、「投稿タイプ」、「タグ」など）を選択するだけです。

最後に、「フォームのスタイル」と「ボタンのスタイル」で、検索フォームの外観をウェブサイトのデザインに合わせてカスタマイズしてください。

検索フォームの色、フォント、形状を変更できます。

すべての設定が完了したら、上にスクロールバックできます。

次に、「保存」をクリックして検索フォームを作成します。

ステップ4：検索およびフィルターフォームの埋め込み

SearchWPプラグインを使用すると、ウェブサイトのフロントエンド、例えばホームページやウィジェット対応エリアに検索フォームを簡単に埋め込むことができます。ここでは、WordPressブロックエディターと検索フォームブロックを使用してページに追加する方法を説明します。

まず、フォームを追加したいページまたは投稿を開きます。次に、「+ブロックを追加」アイコンをクリックし、「検索フォーム」を検索します。

「ブロック設定」サイドバーで、ドロップダウンメニューから作成したフォームを選択します。

最後に、「公開」または「更新」をクリックするだけで、検索フォームがライブで表示されます。

詳細については、これらのステップバイステップガイドを確認してください。

• WordPressの投稿に検索フォームを追加する方法
• WordPressメニューに検索バーを追加する方法

または、ショートコードを使用してフォームを表示することもできます。

これを行うには、SearchWP » Search Formsに移動し、「ショートコード」列のコードをコピーして、特定のフォームのショートコードを見つける必要があります。

WordPressでショートコードを追加する方法（初心者ガイド）については、WordPressでショートコードを追加する方法のガイドがありますので、必要であれば参照してください。

検索フォームとフィルタリングオプションが配置されたので、訪問者はウェブサイトで探しているコンテンツを簡単に見つけることができます。

これはユーザーエクスペリエンスを向上させるだけでなく、さまざまなカテゴリを探索し、より多くの貴重なコンテンツを発見することを奨励することもできます。

方法2：カスタムコード（上級者向け）で投稿とページをフィルターする

次の方法ではカスタムコードを使用します。初心者の方にはこのプロセスが intimidating に見えるかもしれませんが、コードはスムーズに動作するようにテスト済みです。

さらに、市場で最高のコードスニペットプラグインである WPCode を使用します。このプラグインを使用すると、ウェブサイトファイルを直接操作することなく安全に カスタムコードを挿入できるため、サイトを壊す可能性が低くなります。

当社のパートナーブランドの中には、WPCodeを使用してカスタムコードスニペットを追加および管理しており、それを気に入っています。当社でもテストしたところ、非常にうまく機能することがわかりました。当社の経験については、WPCodeの完全なレビューで詳しく知ることができます。

最初のステップは、WPCodeをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

これが完了したら、WordPress管理エリアのCode Snippets » + Add Snippetに移動できます。

次に、「カスタムコードを追加（新規スニペット）」を選択し、「スニペットを使用」ボタンをクリックします。

さて、追加する必要があるコードスニペットは2種類あります。それぞれ見ていきましょう。

WordPressフィルタコードの追加

このコードは、ユーザーが検索フォームで選択したオプションに基づいて、WordPressにユーザーの検索結果をフィルタリングするように指示します。これは、後で説明する検索フォームを作成する別のコードスニペットと連携して機能します。

まず、新しいスニペットに名前を付ける必要があります。これは「WordPress検索フィルター」のような簡単なものでも構いません。

次に、「コードタイプ」を「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');

このコードスニペットは、ユーザーが検索フォームでフィルターを選択したかどうかを確認します。例えば、カテゴリーフィルターが選択されている場合、コードはそのカテゴリーを識別し、それに属する投稿のみを表示できます。

また、ユーザーが選択した特定の年、月、日を検索することで、日付による結果をフィルタリングすることもできます。

最後に、コードは、ユーザーが投稿のみ、ページのみ、またはすべての投稿タイプ（カスタム投稿タイプを含む）を表示したいかどうかに基づいて、結果をチェックしてフィルタリングします。

コードを貼り付けたら、「挿入場所」セクションまでスクロールしてください。「挿入方法」はデフォルトで「自動挿入」、「場所」は「すべてで実行」になります。

コードを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で新しいページを作成してください。

次に、必要なあらゆる種類のブロックを使用して検索ページをカスタマイズします。たとえば、検索バーの使用方法を読者に指示するために画像やテキストを追加できます。

その後、「+ブロックを追加」ボタンをクリックし、「ショートコード」ブロックを選択するだけです。

完了したら、適切なフィールドに[wpb_filter_posts_form]ショートコードを挿入するだけです。

次のステップは、「公開」、「更新」、または「保存」ボタンを押して、変更をライブにすることです。

新しいカスタム検索フォームが表示されるはずです。

デモウェブサイトでの表示は次のとおりです。

方法3：Search & Filterプラグイン（無料）で投稿とページをフィルターする

最後の方法は、無料で利用できるSearch & Filterプラグインを使用することです。WordPressのブログページで検索およびフィルター機能を有効にするための迅速かつ簡単な方法を探している場合に最適なオプションです。

やりたいことは、Search & Filter プラグインをインストールしてアクティブ化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化すると、プラグインはWordPress管理エリアに「Search & Filter」というラベルの新しいメニュー項目を追加します。それをクリックすると、プラグインの使用方法に関する詳細なドキュメントが表示されるプラグインの使用状況ページに移動します。

Search & Filterプラグインには、フィルタリングオプションを表示するためのさまざまなパラメータを受け入れるショートコードが付属しています。このショートコードは、投稿、ページ、またはテキストウィジェット内で使用できます。

[searchandfilter fields="search,category,post_tag"]

これにより、検索、カテゴリ、タグフィールドを含むフィルタリングオプションが表示されます。

このプラグインの素晴らしい点は、ショートコードタグを編集することで、利用可能なフィルタリングオプションをカスタマイズできることです。

例えば、検索バーにカテゴリー、タグ、投稿タイプ、日付フィールドを含めたい場合は、このショートコードを使用する必要があります。

[searchandfilter fields="search,category,post_tag,post_types,post_date"]

このようになります。

ドロップダウンメニューを使用しない場合は、チェックボックスを使用して各フィールドにラベルを追加することもできます。

以下のショートコードでは、カテゴリオプションのチェックボックス付き検索バーを表示するようにプラグインに指示しています。

[searchandfilter headings="カテゴリを選択してください:" types="checkbox" fields="category"]

以下に例を示します。

さらに、1つのショートコードで、一部のフィルタオプションにチェックボックスを、他のオプションにドロップダウンメニューを使用するようにプラグインに指示することもできます。

これは、投稿タイプ、カテゴリ、タグを検索バーに含めるために使用したショートコードです。投稿タイプオプションにチェックボックスを使用するようにプラグインに依頼しました。

[searchandfilter headings="投稿タイプ, カテゴリ, タグ" types="checkbox, select, select" fields="post_types,category,post_tag"]

ショートコードの使用方法については、プラグインのドキュメントを参照してください。

ボーナスのヒント：WordPressサイトにライブAjax検索を追加する

ユーザーが投稿やページをフィルタリングする方法がわかったので、さらに進んで、ライブAjax検索で 検索エクスペリエンスを改善できます。

ライブ Ajax 検索は、ユーザーがクエリを入力するとリアルタイムで検索結果を表示するテクノロジーを使用します。これにより、ページが更新されるのを待つ必要がなくなります。結果は即座に表示されるため、訪問者にとって検索プロセスがはるかに高速で便利になります。

より高速な検索エクスペリエンスは、ユーザーをサイトに長く滞在させ、ページビューを増やし、直帰率を減らすことができます。

朗報ですが、無料プラグインであるSearchWP Live Ajax Searchを使えば、この機能を簡単にあなたのサイトに追加できます。詳細については、WordPressチュートリアル「WordPressサイトにライブAjax検索を追加する方法（簡単な方法）」をご覧ください。

この記事が、WordPressでユーザーが投稿やページをフィルタリングする方法を学ぶのに役立ったことを願っています。また、ウェブディレクトリの作成方法に関するガイドや、サイト検索を改善するWordPress検索プラグインの専門家による選び方もご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。