検索機能を追加する[search.php][get_search_form][the_search_query]

2016年6月26日

テーマを一から作成する 第14回目

 

検索機能を追加します。検索フォームを作成し、検索結果を表示させます。

 

第13回目

404エラーページを作成する[404.php][is_404()]

 

 

スポンサーリンク

 

 

検索フォームを作成する


 

まず検索フォーム作成します。

 

検索フォームを作成する方法は、ウィジェットを利用するか、get_search_form関数を記述する方法の二つあります。

 

まずは下記のページで作成したウィジェットを利用してみます。

ウィジェットを作成する[register_sidebar][dynamic_sidebar]

 

 

ウィジェットに「検索」を登録しました。

ウィジェットに検索

 

サイドバーに検索フォームが表示されました。

検索フォーム

 

 

次にget_search_form関数を利用して検索フォームを表示させてみます。下記のコードをサイドバー(sidebar.php)などの適当な場所に記述してみて下さい。

 

 

上がget_search_form関数、下がウィジェットで出力された検索フォーム。機能はもちろん同じです。

検索フォーム二つ

 

 

 

検索結果を表示させる


 

検索結果を表示させるテンプレートはsearch.phpテンプレートを利用します。もしこのファイルが存在しない場合はindex.phpが利用されます。

 

search.phpを作成しテーマディレクトリ(/wp-content/themes/sample/以下)にアップロードしたら、以下のコードを記述して下さい。

 

 

テーマ編集画面においても「検索結果」と表示されます

検索結果

 

 

search.php

 

5行目

the_search_queryタグで検索したキーワードを表示させることができます。

 

31〜35行目

検索したキーワードで記事が見つからない場合の処理です。

 

 

適当な記事を作成し「wordpress入門」というキーワードで検索した画面です。

キーワードで検索した結果

 

 

ちなみに検索対象は「個別記事」「固定」「カスタム投稿タイプ」ページそれぞれのタイトル及び本文です。カスタムフィールドは含まれません。下記画像は検索キーワードがヒットしない場合の表示画面です。

 

 

存在しないキーワードで検索した結果です(<mai>〜</main>部分)。

存在しないキーワード

 

 

 

これまで(第1〜14回目)の解説を、まとめて整理したテーマファイルは以下のリンクからダウンロードできます。

 

ダウンロード

 

 

次回はタグページを作成します。

第15回目

タグページを作成する[tag.php][single_tag_title][the_tags]

 

 

参照ページ


 

WordPress
Codex日本語版

関数リファレンス/get search form

テンプレートタグ/the search query

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー