WordPress

特定カテゴリー内で絞り込み検索機能を追加する方法【JIN】

記事内に商品プロモーションを含む場合があります。
フォ吉
フォ吉
現在制作中のサイトにキャラクターカテゴリーを作って、そこに仲間たちのプロフィール記事一覧を載せるつもりである。

種別などに応じて絞り込み検索できる機能が欲しいのだが、ここでタグを使ってしまうと、キャラクターカテゴリー以外で使いたいタグも出てきてしまいそうだな…

はしこ
はしこ
そういうときは、「カスタムタクソノミー」を作ってやれば、キャラクターカテゴリー専用のタグが作れるよ。それを使って検索機能を実装してみよう

こんにちは、梯はしこです。

現在 絶賛HP制作中。私は趣味でアクリルフェルト人形(フォ吉など)を作っており、HPには彼らのプロフィール一覧を作りたいと考えています。今後も(おそらく)人形たちは増えていくだろうということで、キャラクターカテゴリーページに絞り込み検索機能を付けてみました。

はしこ
はしこ
今回の検索機能はプラグインを2つ入れて機能追加しています

今回追加したプラグイン

  1. Custom Post Type UI
  2. Search & Filter
フォ吉
フォ吉
今回はPHPを直接修正することはないのか?
はしこ
はしこ
残念ながらカテゴリーページに検索機能を表示するためにCategory.phpを修正する必要がある。あらかじめ子テーマにCategory.phpを入れておいてね
フォ吉
フォ吉
なるほど。ちなみにCategorhy.phpを子テーマに作成する手順は、この記事が参考になるかもしれないな
カテゴリーページのタイトルを画像にする方法【JIN】 こんにちは、梯はしこです。 JINのデフォルトでは、カテゴリータイトルがこちらの画像のように表示されます。 ...
はしこ
はしこ
今回も作業前にバックアップを取っておいてね~!
梯はしこのプロフィール

カスタムタクソノミー検索で実現したかったこと

現在制作中のHPは、下記のような構造を予定しています。

キャラクターページは今まで作ってきた人形たちの紹介記事を一覧で表示できるようにします。ギャラリーページも同じ要領で、今まで作ってきたGIFやミニ動画などを一覧表示予定。

ブログには日々のちょっとした日記などを書いていきたいと考えていますが、詳細等は何も決まっていません。

今回はこのキャラクターページ(カテゴリーページ)に絞り込み検索機能を追加して該当する人形だけを表示できる機能を追加します。

たとえば、種族が「きつね」であれば、そこに所属する「狐小路フォ吉」「ピンク先生」を表示する、といったものを想定しています。

タグを使って検索機能を追加する際の問題点

フォ吉
フォ吉
それなら僕らのプロフィールページ(投稿ページ)を作成するときに、「きつね」タグや「たぬき」タグを追加しておいて、そこから絞り込めるようにすればよかろう

最初はフォ吉の言う通り、タグを使って検索機能を追加する方針でした。ところが、ここでいくつか問題が。

  1. キャラクターカテゴリー以外の記事にタグが使えなくなる
  2. 検索できる条件が1つしか絞ることができない

たとえば、ブログに「今日のラーメンおいしかった」という日記記事を書いたとして。「ラーメン」とか「おいしい食べ物」などといったタグをつけたくなるかもしれません。

単純にタグ一覧から該当するタグを選択して検索する場合、検索一覧に「ラーメン」やら「おいしい食べ物」といった人形とは関係ないタグが出てしまいます。

また、「種族」できつねを選択、「色」でピンクを選択することで「狐小路フォ吉」を除外して「ピンク先生」だけを表示するといった高度な絞り込みについても、タグでは実装できません。

はしこ
はしこ
そこでカスタムタクソノミーを作って検索機能を追加することにしたよ

カスタムタクソノミーってなに?

フォ吉
フォ吉
カスタムタクソノミーというのがそもそもわからんのだが

WordPressには、固定ページや投稿ページを分類する方法として「カテゴリー」や「タグ」が用意されています。そうした標準の分類方法とは別に、オリジナルで作成した分類のことを総称してカスタムタクソノミーと呼びます。

これから用意するキャラクターカテゴリー内検索用の分類である「種族」や「色」などもカスタムタクソノミーです。

フォ吉
フォ吉
カスタムタクソノミーを用意することで、「ギャラリー」や「ブログ」カテゴリーに影響しない「キャラクター」用の分類にできるな

カスタムタクソノミー検索機能を追加する手順

はしこ
はしこ
それではさっそく検索機能を追加していきましょう

Custom Post Type UIでカスタムタクソノミーを作成

カスタムタクソノミーは、「Custom Post Type UI」というプラグインを使うことで簡単に作成することができます。

Custom Post Type UIをインストールして有効化すると、「CPT UI」というメニューが追加されました。

「CPT UI」の「タクソノミーの追加と編集」から、今回追加したいカスタムタクソノミーを追加していきます。

キャラクターのプロフィールページは投稿ページなので、「利用する投稿タイプ」は「投稿(WPコア)」を選択しました。

はしこ
はしこ
ほかはひとまずデフォルトのままでタクソノミーを追加ボタンを押してみた
フォ吉
フォ吉
今回は「種族」と「色」を作ってみたぞ

その状態で投稿メニューを見てみると…

「タグ」の下に「種族」と「色」が追加されています。

今度は投稿ページも見てみましょう。

投稿ページを「種族」と「色」で分類できるようになっていますね。

「種族」に「きつね」と「たぬき」を追加してみました。「色」にも「オレンジ」と「茶色」を追加して、「狐小路フォ吉のプロフィール」記事が「種族きつね」「色オレンジ」となるように設定してみましょう。

Search & Filterで検索用ショートコードを作成

カスタムタクソノミーができました。次は「種族」「色」でキャラクターを検索できる機能を作るためのプラグイン「Search & Filter」をインストールして設定していきましょう。

インストールして有効化すると、Search & Filterのメニューが選択できるようになります。

フォ吉
フォ吉
あいどんとあんだーすたんどいんぐりっしゅ
はしこ
はしこ
みーとぅー。翻訳してみましょ

翻訳して使い方を読んでみましょう。

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

 

このショートコードを貼り付けると、検索ボックスとカテゴリードロップダウン、タグドロップダウンが表示されるようです。テーマファイル内で使用する場合も、PHPでこのショートコードを呼ぶだけでOK。

フォ吉
フォ吉
fieldsで指定している値を「種別」と「色」にしたショートコードを貼り付ければ作れそうだな

下のほうにスクロールすると、「Your Public Taxonomies」という項目があり、そこに今回追加したタクソノミーのスラッグ名が表示されていました。(ここは翻訳だとわかりにくいので英語表示に戻しています)

さっそくショートコードに設定してみましょう。

<?php echo do_shortcode( '[searchandfilter fields="kind,color"]' ); ?>

 

検索用ショートコードをCategory.phpに張り付ける

JIN子テーマのCategorhy.phpにショートコードを貼り付けてみます。

フォ吉
フォ吉
<h1>タグのすぐ下に配置してみたぞ
フォ吉
フォ吉
おお、検索ドロップダウンとボタンが表示されているな!

狐小路フォ吉のプロフィールと狸田タヌオのプロフィールそれぞれの投稿ページを用意しました。狐小路フォ吉は種族がきつねでオレンジ色、狸田タヌオは種族がたぬきで茶色に属しています。

種族をきつねにしてSubmitしてみます。

画面遷移して狐小路フォ吉のプロフィール記事だけが表示されるようになりました。

次はきつねと茶色を選んでSubmitしてみます。

今のところ、「きつね かつ 茶色」のキャラクターはいないので、何も表示されません。

デザインと設定を変更する

フォ吉
フォ吉
ひとまず絞り込み機能はできたが、まだ課題は残っているな

カテゴリーページでキャラクターの絞り込み検索ができるようになりました。しかしデザインや設定など、まだ改善の余地がありますね。改めてSearch & Filterのオプションを確認してみましょう。

はしこ
はしこ
改善したい箇所としては、こんな感じかな
  1. 全件検索の挙動を修正
  2. Submitボタンの表記を「検索」に変更したい
  3. 「種族一覧」「色一覧」を「種族」「色」に変更したい
  4. 全体的にデザインを修正したい

全件検索の挙動を修正

フォ吉
フォ吉
このままだと何も選択せずにSubmitボタンを押下すると、カスタムタクソノミーを付けていない記事が全部表示されてしまうぞ!

種族一覧と色一覧を選択しないままSubmitボタンを押すと…

このように、謎の検索結果が表示されました。これらの記事はカスタムタクソノミーを設定していない投稿ページと固定ページ。本来であればキャラクターカテゴリーに所属しているすべての記事が表示されるようにしたいところです。

<?php echo do_shortcode( '[searchandfilter fields="kind,color" empty_search_url="表示したいページのURL"]' ); ?>

 

タグにempty_search_urlオプションを追加しました。

empty_search_urlオプション

ユーザーが何も選択せずにSubmitボタンを押したときに遷移したいページのURLを指定することができるオプション。

私の場合はempty_search_urlオプションにキャラクターカテゴリーのURLを指定することで、「種族一覧」「色一覧」のままSubmitボタンを押したときにキャラクターカテゴリーページの1ページ目に遷移できるようになりました。

Submitボタンの表記を「検索」に変更したい

フォ吉
フォ吉
ボタンの表記が「Submit」だとわかりにくいので「検索」とかにしたいな
はしこ
はしこ
そんなときはsubmit_labelオプション!

submit_labelオプション

Submitボタンの表記を任意の文字に変更できるオプション。

<?php echo do_shortcode( '[searchandfilter fields="kind,color" empty_search_url="表示したいページのURL" submit_label="検索"]' ); ?>

 

「種族一覧」「色一覧」を「種族」「色」に変更したい

はしこ
はしこ
all_items_labelsオプションで指定しよう

all_items_labelsオプション

ドロップダウンの最初に出てくるテキスト(今回で言うところの「種族一覧」「色一覧」)を任意の文字に変更できるオプション。

<?php echo do_shortcode( '[searchandfilter fields="kind,color" empty_search_url="表示したいページのURL" submit_label="検索" all_items_labels="種族,色"]' ); ?>

 

全体的にデザインを修正したい

フォ吉
フォ吉
CSSでデザインを整えたいな
はしこ
はしこ
classオプションを追加することで検索フォームに任意のclassを追加できるよ。このclassに対してCSSでデザインを追加してあげればよさげ

classオプション

検索フォームに任意のclassを追加できるオプション。

<?php echo do_shortcode( '[searchandfilter fields="kind,color" empty_search_url="表示したいページのURL" submit_label="検索" all_items_labels="種族,色" class="chara-search"]' ); ?>

開発者ツールで確認したところ、chara-searchクラスがフォームに追加されていましたので、CSSでデザインを変更してみました。

/* キャラクター検索 */
.chara-search select{
    min-width: 230px;
    height: 2.8em;
    padding: .4em 3.6em .4em .8em;
    border: none;
    border-radius: 3px;
    background-color: #e6edf3;
    color: #333;
    font-size: 1em;
    cursor: pointer;
}

.chara-search select:focus {
    outline: 2px solid #00a2e9;
}

.chara-search input[type="submit"]  {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 230px;
    margin:0 auto;
    padding: .6em 2em;
    border: none;
    border-radius: 5px;
    background-color: #00a2e9;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.chara-search input[type="submit"]:hover {
    background-color: #008FCC;
}

@media (max-width: 767px) {
	.chara-search ul li {
		display: block;
		margin-bottom: 20px;
	}
}

 

はしこ
はしこ
CSSはこちらのサイト様を参考にさせていただきました!
フォ吉
フォ吉
おお、見違えたな!

任意のカテゴリーページにのみ表示する

絞り込み検索機能自体は完成しました。

しかし今の状態ではキャラクターカテゴリーだけではなく、ほかのカテゴリーページを表示したときにも絞り込み検索が表示されてしまいます。

はしこ
はしこ
キャラクターカテゴリーページが表示されているときだけ検索機能を表示するようにしてみよう
<?php if(get_query_var('category_name') === "カテゴリースラッグ名") :?>
   <?php echo do_shortcode( '[searchandfilter fields="kind" empty_search_url="https://hashigo-home.com/category/chara/" submit_label="検索" all_items_labels="種族" class="chara-search"]' ); ?>
<?php endif; ?>

 

get_query_var()関数を使えば、現在表示しているカテゴリーページの情報を取得することができます。

はしこ
はしこ
引数で’category_name’を渡すとスラッグ名を返してくれるよ
フォ吉
フォ吉
スラッグ名はWordPressの「投稿→カテゴリー」から確認できるぞ

まとめ

今回はカテゴリーページ内で絞り込み検索機能を追加する方法についてご紹介しました。

Custom Post Type UI、Search & Filterという2つのプラグインを用いることで、ほとんどプログラムを書くことなく検索機能を追加することができます。

フォ吉
フォ吉
簡単3ステップで実現できたぞ
  1. Custom Post Type UIプラグインを利用してカスタムタクソノミーを作成
  2. Search & Filterプラグインで検索用ショートコードを作成
  3. 検索用ショートコードを絞り込み検索機能を表示したいページに貼り付ける
はしこ
はしこ
Search & Filterプラグインは有料版もあるから、そっちのほうができることは多いけど、無料でも問題なく使えるね
フォ吉
フォ吉
今回はこちらの記事を参考にさせていただきました!
はしこ
はしこ
終わります!ありがとうございました!
狐小路フォ吉LINEスタンプ発売中
フォ吉
フォ吉
狐小路フォ吉である

突然だが 僕のLINEスタンプが好評(?)発売中である。

万が一にもこの僕に愛着らしき感情を抱いてくれている方がいらしたら、ぜひ下の画像をクリックしてスタンプをチェックしてみていただきたい。

そして願わくば、あなたのLINEを彩ることができたならば…これほど幸いなことはない。

 

フォ吉
フォ吉
よろしくお願い申し上げる