[WordPress]プラグインを使わずに、カスタム投稿タイプごとに検索をする方法(wp_query)
2019.01.10
明けましておめでとうございます、六崎です。
今年もフロントエンド周りのお話から、オタクなお話までずずーぃっと書いていこうと思うので、
よろしくお願いします(´人・ω・`)
では、早速オタクなお話(笑)
去年末のお話になるのですが…
よ、横浜に…パシフィコ横浜にリアルヒノエがいたよぉぉぉぉ☆:*:・。゚(゚ノД`゚)゚。・:*゜☆
行ってきました…「遙かキャラソン祭」へ!
ロビーは出演キャラクターのお出迎え
夜の部のみ参加したのですが、もうホントに参戦してよかった!
初っ端から井上和彦さんの月下美人(橘友雅)、水蜜桃の雫絵(翡翠)という大人な構成。
一緒に参戦した大学時代の先輩は「ヤバい、ヤバいから…」って呟いてました(笑)
私の本命はというと…
「あれ、このイントロ…もし…かして…..太陽の背中ぁぁあああああ!!!」
イノリの初期曲が来ると大抵大興奮して、ペンライト振って踊りすぎて翌日右腕が動かなくなりますw
そして最後に立待月(ヒノエ)。
もう舞台に、目の前にヒノエがいたの。
スクリーンに映し出されるヒノエとポージングがリンクしていた高橋直純さん…あかん、
ヒノエおる…と震えが止まらなかった。
黄色い悲鳴出して感動してたら、後ろの席から「直純さんヤベェ」って聞こえました。
ヤベェーベ(笑)←突如出る茨城弁
では、本題に行きましょうか(スイッチ切り替え
wordpressで検索をする方法として、プラグインを使ったり、ウィジェットを使用したり…
と方法は様々あります。
今回はプラグインを使わずに、カスタム投稿タイプごとに検索をする方法をご紹介します。
普通に検索ボックスを表示させて、検索させるとコンテンツ全体の検索になっちゃうと思います。
(投稿、カスタム投稿、固定ページ…etc)。
でも今回は、カスタム投稿タイプで作った1つのポストタイプに限定して検索できるようにしたいと思います!
ちなみにやり方を調べたところループに「query_posts」を使用した方法を紹介している所が
結構目につきました。
なぜ、query_postsがダメかは以下の記事をご覧いただければと思います。
[参考]Samurai | WordPressのquery_postsは非推奨!理由と他の実装方法を紹介
では、今回カスタマイズするテンプレートです。
・functions.php
・sidebar.php(検索フォームを表示したい所)
・search-[ポストタイプ名].php
まず、検索フォームの設置から行います。
sidebar.php
1 2 3 4 5 6 7 | <div class="search-box"> <form method="get" id="search" action="<?php echo home_url('/'); ?>"> <input type="text" name="s" id="search-input" value="<?php the_search_query(); ?>" placeholder="○○内を検索" /> <input type="hidden" name="post_type" value="[ポストタイプ名]"> <button type="submit" accesskey="f" class="search-btn">検索</button> </form> </div> |
以下の条件がないとwordpressでサイト内検索ができません。
・formのURLはホームURL、methodはget
・テキストボックスのnameはs
また、カスタム投稿タイプの絞り込みを4行目の「value」で行なっています。
valueの[ポストタイプ名]を対象のカスタム投稿タイプに変更してください。
次にfunctions.phpです。
functions.php
1 2 3 4 5 6 7 8 9 10 11 12 | //カスタム投稿タイプの検索 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; } |
wordpressは検索された際、search.php > index.phpで参照していく構造になっています。
[参照]WordPress Codex | テンプレート階層 検索結果表示
search.phpはデフォで作成していると思うので、
カスタマイズのしさすさを考慮して別に作成しようと思います。
このコードをfunctions.phpにコピペしてあげて、先ほどsidebar.phpで指定したカスタム投稿タイプ用に「search-[ポストタイプ名].php」を作成してあげれば、全体検索とは別で検索をすることができます。
では、最後にsearch-[ポストタイプ名].phpを作成していきましょう。
search-[ポストタイプ名].php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <p>検索結果:<?php the_search_query(); ?></p> <?php $args = array( 'post_type' => get_query_var( 'post_type', '[ポストタイプ名]' ), 'posts_per_page' => 5, //表示数 'paged' => get_query_var( 'paged', 1 ), //ページングする場合には記載 'order' => 'DESC', //降順 'orderby' => 'date', //日付でソート 's' => get_search_query() //name=”s”のです ); $wp_query = new WP_Query($args); if ( $wp_query->have_posts()): while ( $wp_query->have_posts()): $wp_query->the_post(); ?> //検索結果に引っかかった内容を表示する <?php endwhile; ?> <?php else: ?> //検索結果に引っかからなかった場合の内容を表示する <p>キーワードはみつかりません。</p> <?php endif; ?> <?php wp_reset_postdata(); ?> |
基本これをコピペで、条件分岐によっての表示内容だけ付け加えれば動かせると思います!
そして、これのミソは「wp_query」です。
ここをquery_postsにして紹介している記事が結構あったんですよ…
上で紹介した参考記事を読んでいただければわかると思いますが、メインクエリ書き換えちゃって
他のページにも支障が出るかもしれないって怖くないですか!?
私は怖いです←
…ということで、wp_queryを使ったやり方でのご紹介でした。
これでカスタム投稿タイプごとの検索フォームの設置も検索結果も表示できるようになったので、
お好みでカスタマイズもしていただければと思います!
ではっ!
↓↓↓ぜひチェックしてください
~提供中のヒューマンセンシング技術~
◆人物検出技術
歩行者・来店者数計測やロボット搭載も
https://humandetect.pas-ta.io
◆視線検出技術
アイトラッキングや次世代UIに
https://eyetrack.pas-ta.io
◆生体判定技術
eKYC・顔認証のなりすまし対策を!
https://bio-check.pas-ta.io
◆目検出技術
あらゆる目周りデータを高精度に取得
https://pupil.pas-ta.io
◆音声感情認識技術
会話から怒りや喜びの感情を判定
https://feeling.pas-ta.io
◆虹彩認証技術
目の虹彩を利用した生体認証技術
https://iris.pas-ta.io