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

この記事を書いてる人

オジー

  • WordPress歴8年
  • 副業でデザイン/開発を受託→法人化
  • WordPressで会社HPをオリジナルテーマで作成
  • 主軸はデザイン、たまにフロントエンドのコードも書きます
  • 事業会社/受託会社 両方経験あり

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

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

目次

検索フォームの設置

<form method="get" id="testSearch" action="<?php echo home_url('/'); ?>">
  <input type="text" name="s" id="testSearchInput" value="<?php the_search_query(); ?>" placeholder="カスタム投稿タイプ別検索" />
  <input type="hidden" name="post_type" value="test">
  <input type="submit" value="search" accesskey="f" />
</form>

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

注意事項としては、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

add_filter('template_include','custom_search_template');
function custom_search_template($template){
  if ( is_search() ){
    $post_types = get_query_var('post_type');
    foreach ( (array) $post_types as $post_type )
      $templates[] = "search-{$post_type}.php";
    $templates[] = 'search.php';
    $template = get_query_template('search',$templates);
  }
  return $template;
}

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

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

では。

プログラミングのスキルを学ぶのにおすすめの方法

HTML/CSSの基本的な知識があるとWordPressやその他でも流用できておすすめです。今だと書籍で学んでも良いし、スクールに通っても良いし、オンライン講座で勉強しても身に着けることはできます。

料金としてはググる < 書籍 < オンライン講座 < スクールなので、まずは手出しの少ない書籍から始めてみて物足りないようだったら徐々に右に行くのが良いかと思います。いきなりスクールでも良いのですが、教えられること・時間に限りがあるのでどちらにせよ書籍は買って勉強すると思います。

ググっても知識自体は手に入るのですが、断片的に入手するのでどうしても体型的に学ぶことは難しいです。(記事を書いている自分が言うのもなんですが、、、)

オジー

エンジニアのスキルを学ぶ方法でおすすめの書籍やスクールなど紹介しますね!

おすすめ書籍

おすすめのスクール

就職、転職までサポートの「SAMURAI ENGINEER」

日本で初めてマンツーマンでのプログラミング指導を導入したプログラミング塾「SAMURAI ENGINEER」ですが、専属のインストラクターとのWeb面談のレッスンを通じてプログラミングやWebデザインのスキルを身につけてられ、就職や転職、案件の獲得の方法などをマンツーマンでサポートする体制も整っています。

  • 転職成功率98%
  • レッスン満足度No.1
  • 累計指導実績35,000名以上
  • 挫折率8%
侍エンジニア塾

現役エンジニアによるマンツーマンサポート「DMM WEBCAMP 学習コース」

DMMが運営している「DMM WEBCAMP 学習コース」ですがプログラミングの他に、Webデザインや動画編集、AI・データサイエンスに特化したコースも豊富にあり、学習中・就職のサポート体制も万全です。(さすが大手ですね)

  • 通過率わずか10%の選考を突破した現役エンジニアがサポート
  • チャットにていつでも質問可能
  • 週に2回のメンタリング
  • カナダで開発・実践されてきたICEモデルに基づきカリキュラムを独自開発
  • 希望に応じて転職や副業のサポートを無料で受けることができる
DMM WEBCAMP SKILLS

おすすめオンラインコース

Udemy

オンラインコースで有名どころののUdemyですが、プログラミング、マーケティング、データサイエンスなど、213,000以上のコースを5,700万人の受講生が学んでいます。

  • オンラインですべて完結
  • 豊富なジャンル
  • 一つを買い切り型(一気にお金を払う必要はない)
  • セールも頻繁に開催される
  • Q&A機能で講師に質問可能
  • 動画のお試し視聴

Amazon Kindleのように購入前に評価が見れたり、講座を購入する前に動画のお試し視聴が可能だったりと失敗しないようなサービス設計になっているのがポイント高めです。

Udemyを試してみる

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次