• かちびと.net

    WordPressのカスタム投稿タイプを使用したサイトのサイト内検索をチェックボックスで絞り込み検索できるようにする方法をご紹介。かなり使いそうです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

WordPressのカスタム投稿タイプを使用したサイトのサイト内検索をチェックボックスで絞り込み検索できるようにする

スポンサーリンク

購読してるブログの記事が気になった
のでメモ。カスタム投稿タイプを使った
サイトのサイト内検索をもうちょい使い
やすくする的な方法です。良く見かける
検索方法なので覚えたいですね。

今日は僕得な記事です。複数のカスタム投稿タイプを使ったサイトで、カスタム投稿別で絞り込み検索を、ユーザーがチェックボックスを使って出来るようにする方法です。


↑こういうやつね。

コード

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" name="s" id="s" <?php if(is_search()) { ?>value="<?php the_search_query(); ?>" <?php } else { ?>value="キーワード &hellip;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"<?php } ?> /><br />

<?php $query_types = get_query_var('post_type'); ?>

<input type="checkbox" name="post_type[]" value="foo" <?php if (in_array('foo', $query_types)) { echo 'checked="checked"'; } ?> /><label>foo記事</label>
<input type="checkbox" name="post_type[]" value="bar" <?php if (in_array('bar', $query_types)) { echo 'checked="checked"'; } ?> /><label>bar記事</label>
<input type="checkbox" name="post_type[]" value="hoge" <?php if (in_array('hoge', $query_types)) { echo 'checked="checked"'; } ?> /><label>hoge記事</label>
<input type="checkbox" name="post_type[]" value="fuga" <?php if (in_array('fuga', $query_types)) { echo 'checked="checked"'; } ?> /><label>fuga記事</label>

<input type="submit" id="searchsubmit" value="検索する!" />
</form>

普段使用している検索ボックスのコードを上記のように変更するだけです。いつものfunctions.phpへの追記は特に必要ありません。上記コードは

foo、bar、hoge、fugaという、4つのカスタム投稿タイプがあって、それぞれのチェックボックスにチェックを入れて検索すると、他の投稿タイプの投稿は弾いてくれる

というコードになります。

<input type="checkbox" name="post_type[]" value="投稿タイプ名" <?php if (in_array('投稿タイプ名', $query_types)) { echo 'checked="checked"'; } ?> /><label>表示テキスト</label>

↑こんな感じ。

というわけで実際にテストしました。

施工例

さて、実際に絞り込み出来るかテストです。
テスト用に、「ワンコ記事」、「ネコ記事」、「鳥記事」、「釣りキチ」の4つの投稿タイプを作成しました。更に、検索フォームを先ほどのコードに変更してあります。

それぞれの投稿タイプには以下の記事を1つずつ書きました。

  • 【投稿タイプ:ワンコ記事】 ワンコ記事です。ネコ記事でも鳥記事でも釣りキチでもありません。
  • 【投稿タイプ:ネコ記事】 ネコ記事です。ワンコ記事でも鳥記事でも釣りキチでもありません。
  • 【投稿タイプ:鳥記事】 鳥記事です。ワンコ記事でもネコ記事でも釣りキチでもありません。
  • 【投稿タイプ:釣りキチ】 釣りキチです。ワンコ記事でもネコ記事でも鳥記事でもありません。

これなら、「ワンコ」や「ネコ」で検索をかければ、どの投稿タイプの記事でも、必ずキーワードにかかりますので、チェックボックスによる検索フィルタリングが出来ているか検証できます。

実装


で、実際に検索したのが上記の画像です。右上にフォームがありますが、「ネコ記事」と「ワンコ記事」にチェックが入っているので、他の投稿タイプの記事ははじかれています。

詳しい方には今更って感じでしょうけどwこれはデフォルトで使いたいレベルかも。おなじみのwpbeginnerさんより教わりました。

How to Create Advanced Search Form in WordPress for Custom Post Types

URL :
TRB :

Comments & Trackbacks (4)

  1. isam

    初めまして。
    いつも、こちらのサイトを参考にさせていただいています。

    こちらで紹介されていましたコードを貼りつけることで、
    カスタム投稿タイプごとにチェックボックスで絞り込みが出来ました。
    ありがとうございます。

    気になることがありましたが、お問い合わせだと意図が違う可能性を感じたため、
    コメントフォームでご質問させていただきたいです。
    今回のコードの場合、カスタム投稿タイプごと、ということだったのですが、
    これを、「タグ」「投稿内容」「投稿タイトル」「投稿者」というように、
    検索対象をチェックボックスで選択できる、ということは可能でしょうか。
    (チェックされたもの全てが検索の対象になるようにする、という
     ことを実現したいと考えております。)

    こちらのコードをどのように変更するのがよいのか分かりませんでしたので、
    このような形でご質問させていただきました。

    お忙しいところ申し訳ありませんが、
    お時間があるようでしたら、コードなど教えていただけますと
    嬉しく思います。
    よろしくお願い致します。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services