WordPress│自作の絞り込み検索の作成方法

カテゴリー・タグ・独自分類で記事を絞り込むときは、必要な条件と結果の表示場所を先に決めます。このページでは検索方式の選び方と、結果カードへ分類名や抜粋を表示する方法を説明します。検索フォームを設置する手順は、次の表から条件に合う記事を参照してください。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

目的に合う絞り込み検索を選ぶ

「絞り込み」は条件に合う記事を選ぶ処理、「並べ替え（ソート）」は表示順を変える処理です。このページで扱うのはカテゴリーやタグによる絞り込みです。検証用サイトでバックアップを取り、必要な条件とページ送りを確認してから設置します。

検索に使う分類と表示を整理する

切り替え前に、現在の入力名、選べる分類、同時選択したときの期待結果を控えます。同じ分類を2つ選ぶケースと、異なる分類を組み合わせるケースで期待する記事IDを決め、新しい検索でも一致することを確認してください。

検索を表示するページとPHPを登録する場所を控えます。検証用サイトで表示とページ送りを確認し、戻す場合は保存しておいた本文とPHPを一組として復元します。分類や投稿を削除する必要はありません。

WordPressの絞り込み検索のサンプル

実際のサンプルデータです｡

カテゴリーとタグを使ったテンプレート例です。検索フォームを新たに設置する場合は、冒頭の表から必要な条件に合う手順へ進んでください。

WordPressの絞り込み検索の作り方

custom-search.phpを使う場合は、原本を保存し、子テーマ側の配置とテンプレートの呼び出し先を確認してください。リンク先のテンプレートはposts_per_page=-1で全件を取得し、追加読み込みJSから渡すoffsetと件数をクエリへ反映しません。

隔離したWordPressで5件の検証投稿を使うと、開始位置0と4の要求が同じ5件を返しました。

ページ送りが必要な場合は、冒頭の「複数条件の絞り込み検索」の設置手順を参照してください。

親テーマのファイルを直接上書きすると、テーマ更新で変更が失われることがあります。

テンプレート方式では、PHP・CSS・JSを一組として保存し、実際に使う分類名と検索条件を一致させます。

[[search]]はリンク先のテンプレートを呼び出すPHPで登録するショートコード名です。検索フォームの設置記事とは登録名が異なるため、使うPHPとページ側の記述を対応させてください。

参考

うぇぶファン

【徹底解説】WordPressで絞り込み検索を作る方法 | うぇぶファン ページ数の多いサイトでは、絞り込み検索を設置することで使い勝手が向上する可能性があります。この記事では、カスタム投稿タイプやAjaxを使い、WordPressで本格的な絞り…

絞り込みの項目を増やしたい場合

新しい項目を一つ追加してみます｡そのやり方の紹介です｡

既存サイトでタクソノミーを追加する例では、Custom Post Type UIなどの登録機能を使います。すでに同じタクソノミーが登録されていれば、重複して登録しないでください。

次に編集画面からタクソノミーの追加と編集を選択して､タクソノミーを追加します｡

新しいタクソノミーはcraftとします｡ラベル名は職業別としています｡

投稿タイプは投稿にして普通の記事に新しいタクソノミーを追加することにします｡

オプションはクイック編集をONにしておくと､タグ付けが便利になるのでつけておきます｡

投稿から職業別のタグを作成します｡（例デザイナー､ブロガー）

投稿一覧からクイック編集でタグ付けします｡

最後にコードを追記していきます｡（CSSはさきほどの状態から変化がないので流用します｡）

以上で職業別の項目が追加されました｡

最初に紹介したサンプルでも確認できます｡

ボタンの並び順を変更したい場合

Custom Taxonomy Orderというプラグインで、タグやカテゴリー、カスタムタクソノミーを並び替えてあげましょう。

まずはCustom Order as defined adobe（手動で並び替える）にチェックを付けて、Save Setting（保存）してから、並び替えましょう！

直感的にタクソノミーの順番の並び替えができます｡

動的に絞り込み検索を生成したくない場合

ボタンにそれぞれ違う画像を入れたかったので、個別にばらしました。

下記のようなコードで、チェックボックスには個別のIDを振ってあげましょう。

複数のカスタムタクソノミーがある場合の絞り込み方法

Custom Post Type UIで複数のカスタムタクソノミーがある場合の、同タクソミーの複数選択による絞り込みの挙動がおかしかったので、下記の様に記述を修正しました。

複数分類のクエリ資料

結果の表示にタグや抜粋、カスタムタクソノミーを入れる

結果のカードに情報を参照すると独自のカードが作成できます。

<?php
$areas = get_the_terms(get_the_ID(), "area");
if (!is_wp_error($areas) && !empty($areas)) {
    echo esc_html($areas[0]->name);
}

複数ある場合はforerachを使う。

<?php
  $terms = get_the_terms( $post->ID, 'course' );
  if ($terms && ! is_wp_error($terms)): ?>
<?php foreach($terms as $term): ?>
<?php echo "<span>", esc_html($term->name) ,"</span>";?>
<?php endforeach; ?>
<?php endif; ?>

抜粋は下記。

<div class="label_text"><?php the_excerpt(); ?></div>

<a href="<?php echo esc_url(get_permalink()); ?>">
  <div class="article">
    <div class="label_area">
      <?php
      $areas = get_the_terms(get_the_ID(), 'area');
      if (!is_wp_error($areas) && !empty($areas)) {
          echo esc_html($areas[0]->name);
      }
      ?>
    </div>
    <?php the_post_thumbnail('medium'); ?>
    <div class="label_name"><?php echo esc_html(get_the_title()); ?></div>
    <div class="label_course">
      <?php
      $courses = get_the_terms(get_the_ID(), 'course');
      if (!is_wp_error($courses) && !empty($courses)) {
          foreach ($courses as $course) {
              echo '<span>' . esc_html($course->name) . '</span>';
          }
      }
      ?>
    </div>
    <div class="label_text"><?php echo esc_html(wp_strip_all_tags(get_the_excerpt())); ?></div>
  </div>
</a>

最初からチェックを付けたい場合

下記のような感じでJavascriptで特定のIDのチェックボックスにチェックをいれる。

先のコードのなかに入れて再検索をいれること。

jQuery(function(){
	jQuery('#check_6').prop("checked", true);
});

結果カードの分類と初期チェックを別々に確認する

結果カードのPHPは、検索結果を一件ずつ表示するループ内に配置します。

get_the_ID()が現在表示中のカードの投稿IDを参照する状態で、areaとcourseをその投稿から取得する構成です。

地域は取得した最初の一つ、講座は取得した各項目をspanで表示します。

地域を複数登録しても全地域を並べるコードではないため、複数の地域を表示したい場合は表示方法の設計が必要です。

隔離環境では、通常投稿に「地域 & 案内」と二つの講座「基礎」「応用 & 案内」が表示され、分類なしの投稿では分類ラベルだけが空になりました。

どちらのカードにも記事のタイトルとリンクが残り、通常投稿のカードにはEnterで移動できました。

初期チェックのjQueryは、対象の入力要素が実際にid=check_6を持ち、jQueryとそのコードが読み込まれる画面で使用します。

実画面ではcheck_6だけが初期選択され、Spaceで解除し、別の項目もSpaceで選択できました。

このコードはチェック状態を設定するだけで、検索の自動送信や他の条件との組み合わせを実装するものではありません。

今回確認したのは結果カードの部分出力とチェック状態です。

リンク先の独自分類クエリを使った部分検証では、同じ分類の複数選択はOR、異なる分類の組み合わせはANDになりました。子テーマに配置したカテゴリー・タグ用テンプレートでも両条件に一致する投稿を取得できました。すべての分類条件、AJAX操作、設置先テーマの統合表示は別に検証が必要です。

現行SWELLの絞り込み検索を設定したい場合は、冒頭の切り替え表から対応する設定記事へ進んでください。

初期選択が不要なら追加したjQueryを外し、カード表示を戻す場合は保存したテンプレートの原本へ戻します。

WordPressの絞り込み検索の作成方法

本記事では｢【WordPress】絞り込み検索の作成方法｣について書きました｡

さらに色々カスタマイズを足したものが下記のデモになります。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。