1年に一度の超セール!Amazonブラックフライデー! ※11/26(金)~12/2日(木)まで!セール品を見る

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

記事が多くなってしまった時に、用途に合わせて記事を探すことができたら便利ですよね?

そこでソート(絞り込み)検索ができないかカスタマイズにチャレンジしてみました。

その備忘録です。

すいみん

難しそうだと思ってましたが結構、簡単にできます!

目次

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

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

カテゴリーとタグで記事をソートすることができます。

すいみん

試しにいくつかボタンを押してみて下さい。
絞り込み検索されて適切な記事が表示されます

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

テンプレート(custom-search.php)をテーマフォルダの直下に格納。

あとはfunctions.phpとCSSのコードを貼るだけです。

最後にショートコード[search]を記事の中に貼りましょう。

すいみん

下記の記事を引用しています。
詳しい解説は下記の記事を見てみることをおすすめします。

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

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

まずCustom Post Type UIというプラグインを作成します。

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

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

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

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

投稿から職業別のタグを作成します。(例デザイナー、ブロガー)

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

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

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

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

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

Custom Taxonomy Orderというプラグインで増やしてあげましょう。

このプラグインで直感的にタクソノミーの順番の並び替えができます。

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

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

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

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

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

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

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

カスタムタクソミーの参照。

<?php $term1 = get_the_terms($post->ID,'area'); echo $term1[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>", $term->name ,"</span>";?>
<?php endforeach; ?>
<?php endif; ?>

抜粋は下記。

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

サンプルコード。

          <a href="<?php the_permalink(); ?>">
            <div class="article">              
                <div class="label_area"><?php $term1 = get_the_terms($post->ID,'area'); echo $term1[0]->name;?></div>                 
                <?php the_post_thumbnail('medium'); ?>
                <div class="label_name"><?php the_title(); ?></div>
                <div class="label_course">
                  <?php
                  $terms = get_the_terms( $post->ID, 'course' );
                  if ($terms && ! is_wp_error($terms)): ?>
                  <?php foreach($terms as $term): ?>
                  <?php echo "<span>", $term->name ,"</span>";?>
                  <?php endforeach; ?>
                  <div class="label_text"><?php the_excerpt(); ?></div>
                  <?php endif; ?>
          </a>

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

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

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

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

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

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

まだ実験段階なので、いろいろ調整して見るつもりです。

一旦備忘録として残しておきます。

サムネイル付きスライダー

すいみん

マイベストっぽいサムネ付きスライダーが作成できます。

【Swiper.js】サムネイル付きスライダーを作成する方法

目次
閉じる