プラグインいらず!カスタム投稿タイプごとの絞り込み検索機能実装

どうも@De_webdesignです。

題名の通りカスタム投稿タイプを絞って検索したりしたいなーってときのための方法を今回はご紹介します。作業量的にはそんなに多くないですし、コードの内容も複雑ではないのである程度コードをかじったことがる初心者の方なら普通に実装できると思います。

カスタム投稿タイプ「test」というものだけを検索したい設定で説明していきます。

検索フォームの設置

いたって普通のフォームになります。このコードを検索フォームを入れたい箇所に記入してください。

注意事項としては、2行目のnameの値は「s」でないと検索フォームが動きません。
カスタム投稿タイプの絞り込みは3行目のinputタグの「name」と「value」で行っています。type=”hidden”により隠しデータを送るのですが、「name」でpost_typeを「value」で「test」を指定することにより、testというカスタム投稿タイプに絞り込んだ検索をかけることができます。

ですので、ご自分の絞り込みたいカスタム投稿タイプに合わせて「test」の箇所を書き換えてくれれば大丈夫です。

検索フォームは以上で終わりになります。次に検索結果の表示をさせます。

検索結果の表示

WordPressは検索された際、search.phpがあればそれを参照、なければindex.phpを参照という構造になっています。おそらくすでにsearch.phpはあるかと思われますが、今回はカスタマイズのしやすさも含めてカスタム投稿タイプごとに検索結果のテンプレートを作成していきたいと思います。

function.php

このコードをfunctions.phpにコピペして追加することでsearch-〇〇.php(〇〇にはカスタム投稿タイプが入ります。今回の例ではsearch-test.phpになります。)のようなテンプレートを使用することができます。
これによりカスタム投稿タイプ「test」に絞り込んだ検索結果をsearch-test.phpで表示させることができるようになり、全体検索とは別で検索をさせてあげるための機能が追加されました。

以上で検索フォームの設置と検索結果の表示ができるようになりますので、あとは自分の好きなようにsearch-〇〇.phpをカスタマイズしていけばカスタム投稿タイプごとの検索結果のデザインをいじることができます。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。