Quantcast
Channel: 西沢直木のIT講座
Viewing all articles
Browse latest Browse all 415

複数のカスタムタクソノミーで絞り込み検索する方法

$
0
0

WordPressでカスタムタクソノミー(カスタム分類)を使って投稿やカスタム投稿を分類する場合、どうせなら絞り込み検索できれば便利ですよね。「ジャンルが中華、価格帯が格安、対象がファミリー向け」のように。

カスタムタクソノミーで絞り込み検索したい

カスタムタクソノミーで絞り込み検索したい

WordPressで絞り込み検索というと難しく感じるかもしれませんが、この記事で想定しているサイトは一般的な構成で、編集画面では次のようにいくつかの分類を選択できるだけです。

複数のカスタムタクソノミーで分類

複数のカスタムタクソノミーを持つだけの一般的なサイト構成で絞り込み検索できる

もちろん、絞り込み検索の作成方法はさまざまなので、この記事の説明に固執する必要もありません。カスタムタクソノミーではなくカスタムフィールドを使った絞り込み検索もできるでしょうから、何が正解ということでもありません。

ここでは1つの方法論としてプラグインを使わずに複数のカスタムタクソノミーで絞り込み検索する方法を紹介します。

とはいえ、実践にはPHPを使ったフォームのコード記述が必要です。また、紹介しているのはサンプルなので自分のサイトに合わせた修正も必要になります。「誰でも簡単!」というわけにいかないので、よくわからなければ記事から雰囲気をつかんでいただき、作業はWordPress個別サポートWordPressメールサポートにご相談ください。

カスタムタクソノミーによる絞り込み検索

カスタムタクソノミーで絞り込み検索する仕組みを見てみましょう。ここでは、おすすめの店を3つのカスタムタクソノミーで分類しています。

おすすめの店の分類
  • ジャンル:中華・和食・洋食
  • 価格帯:普通・格安・高級
  • 対象:お一人様向け・カップル向け・ファミリー向け

単独のカスタムタクソノミーで検索するのは難しくありません。VK All in One Expansion Unitプラグインなどを使えば、それぞれのカスタムタクソノミーのリンクを表示できます。

カスタムタクソノミー(ターム)のリンクをサイドバーに表示

カスタムタクソノミー(ターム)のリンクをサイドバーに表示

リンクをクリックしてタームのアーカイブ(例:ジャンルが中華の店一覧)を開いたときのURLは次のようになります。

タームのアーカイブのURL(ジャンルが中華)
  • https://wp7.biz/search/genre/chinese

「ジャンル/ターム」の部分を「?ジャンル=ターム」に書き換えてみましょう。

タームのアーカイブのURL(「?項目=値」スタイルに書き換えた例)
  • https://wp7.biz/search?genre=chinese

これでも同じページが開くはずです。この「?」以降の部分は「URLパラメータ」とよばれ、WordPressに限らずWebアプリケーションでサイトに対して指示を出すときに使われます。

この例では、「ジャンルが中華」という条件で投稿を絞り込む指示になります。

このURLパラメータは「&」でつなぐことで複数の指示を出すことができます。

たとえば、

  • ジャンル=中華
  • 価格帯=格安

という条件で検索したければ

  • genre=chinese
  • price_range=reasonable

という2つの条件を「&」でつないで「?」以降に指定します。

つまり、全体のURLは

  • https://wp7.biz/search?genre=chinese&price_range=reasonable

になり、このURLにアクセスすると、

  • ジャンル=中華
  • 価格帯=格安

で絞り込まれた投稿が表示されます。

カスタムタクソノミーで絞り込まれる

カスタムタクソノミーで絞り込まれる

ここでは「おすすめの店」の例で説明しましたが、複数のカスタムタクソノミーを設置している場合は、上記のようなURLで投稿(またはカスタム投稿)を絞り込めるか試してみてください。

URLの構造は次のようになります。「分類」や「ターム」は各自の設定に置き換えてください。

カスタムタクソノミーによる絞り込み検索のURL
  • http://example.com/?分類1=ターム1&分類2=ターム2&分類3=ターム3

絞り込み検索フォームの作成

あとは、上記のようなURLになるフォームを作成すれば絞り込み検索できます。

原始的には次のようなHTMLでフォームを手作りする方法もあります。

<form method="get" action="サイトのURL">
<h3>ジャンル</h3>
<ul class="terms">
<li><input type="radio" name="genre" value="chinese">中華</li>
<li><input type="radio" name="genre" value="japanese">和食</li>
<li><input type="radio" name="genre" value="western">洋食</li>
</ul>

<h3>価格帯</h3>
<ul class="terms">
<li><input type="radio" name="price_range" value="normal">普通</li>
<li><input type="radio" name="price_range" value="reasonable">格安</li>
<li><input type="radio" name="price_range" value="high-grade">高級</li>
</ul>

<h3>対象ユーザー</h3>
<ul class="terms">
<li><input type="radio" name="target" value="single">お一人様向け</li>
<li><input type="radio" name="target" value="couple">カップル向け</li>
<li><input type="radio" name="target" value="family">ファミリー向け</li>
</ul>

<input type="submit" value="検索">
</form>

このようなHTMLを任意の固定ページにペーストすれば、カスタムタクソノミーで絞り込むフォームが完成します。

カスタムタクソノミーで絞り込み検索するフォーム

カスタムタクソノミーで絞り込み検索するフォーム

上記のHTMLは筆者のサイト向けに作成したフォームのため、そのままでは動作しません。HTML内の分類名(例:genre)やターム(例:chinese)、「サイトのURL」を修正する必要があります。

言うまでもありませんが上記のように検索フォームを手作りするのは非効率なので、カスタムタクソノミーに属するタームを自動的にフォーム要素に加工するプログラムを作成した方が便利です。

以下、検索フォームを作成するプログラムの例です。コードにある「genre」「price_range」「target」は筆者のサンプルサイトのカスタムタクソノミーなので、修正する必要があります。

<form method="get" action="<?php echo home_url(); ?>">
<h3>ジャンル</h3>
<?php $terms = get_terms( 'genre' ); ?>
<?php if( $terms ): ?>
    <ul class="terms">
        <?php foreach( $terms as $term ): ?>
        <li>
            <input type="radio" name="genre" value="<?php echo esc_attr( $term->slug ); ?>">
            <?php echo esc_html( $term->name ); ?>
        </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

<h3>価格帯</h3>
<?php $terms = get_terms( 'price_range' ); ?>
<?php if( $terms ): ?>
    <ul class="terms">
        <?php foreach( $terms as $term ): ?>
        <li>
            <input type="radio" name="price_range" value="<?php echo esc_attr( $term->slug ); ?>">
            <?php echo esc_html( $term->name ); ?>
        </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

<h3>対象ユーザー</h3>
<?php $terms = get_terms( 'target' ); ?>
<?php if( $terms ): ?>
    <ul class="terms">
        <?php foreach( $terms as $term ): ?>
        <li>
            <input type="radio" name="target" value="<?php echo esc_attr( $term->slug ); ?>">
            <?php echo esc_html( $term->name ); ?>
        </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

<input type="submit" value="検索">
</form>

このコードは以下のサイトを参考にさせていただきました。ありがとうございます。

【参考】WordPressで複数のカテゴリを使って検索する | cly7796.net

次のようなフォームが作成されます。

絞り込み検索フォーム

絞り込み検索フォーム

これにより、複数のカスタムタクソノミーで絞り込みできるようになります。

検索フォームのコードの入力場所

上記のプログラムコードを入力する方法はいくつかあります。たとえば、検索フォームを設置するページのURLが「http://example.com/search」(スラッグがsearch)だとすれば、page-search.phpが専用のテンプレートになります。

手順として、

  1. スラッグが「search」のページを作成する
  2. 親テーマのpage.phpを子テーマにコピーして名前をpage-search.phpに変更する
  3. page-search.phpの「the_content();」の下あたりに上記のコードを入力する

となります。

Lightningでは21行目あたりが「the_content」なので、それ以降にフォームを作成するとよいでしょう。

フォームの作成場所

フォームの作成場所

これにより、スラッグが「search」のページに検索フォームが表示されるようになります。

以上、複数のカスタムタクソノミーで投稿を絞り込む方法を説明しました。参考にしてください。

デモサイトはこちらです。

絞り込み検索サンプル


Viewing all articles
Browse latest Browse all 415

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>