オジー
- 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はあるかと思われますが、今回はカスタマイズのしやすさも含めてカスタム投稿タイプごとに検索結果のテンプレートを作成していきたいと思います。
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」ですが、専属のインストラクターとのWeb面談のレッスンを通じてプログラミングやWebデザインのスキルを身につけてられ、就職や転職、案件の獲得の方法などをマンツーマンでサポートする体制も整っています。
DMMが運営している「DMM WEBCAMP 学習コース」ですがプログラミングの他に、Webデザインや動画編集、AI・データサイエンスに特化したコースも豊富にあり、学習中・就職のサポート体制も万全です。(さすが大手ですね)
オンラインコースで有名どころののUdemyですが、プログラミング、マーケティング、データサイエンスなど、213,000以上のコースを5,700万人の受講生が学んでいます。
Amazon Kindleのように購入前に評価が見れたり、講座を購入する前に動画のお試し視聴が可能だったりと失敗しないようなサービス設計になっているのがポイント高めです。
Udemyを試してみる
この記事が気に入ったら
フォローしてね!