「サイト内検索を設置したいけど、プラグインを入れるほどでもない」「検索ボックスのプレースホルダーを自分のサイトに合わせて変えたい」——Apuraには、こうしたニーズにコードなしで応えられる検索機能が最初から組み込まれています。
さらに一歩進んで文言や結果ページを細かく調整したい場合も、テーマが用意したフィルターを使えば、テンプレートを直接編集せずにカスタマイズできます。
この記事では、まずカスタマイザーだけでできる「検索アイコンの表示」から解説し、続いてfunctions.phpに数行書くだけでできる文言のカスタマイズ、そして検索結果ページの調整までを順番に紹介します。
WordPress初心者の方はカスタマイザー編だけでも十分役に立ちますし、開発者の方はフィルター編で自由度の高いカスタマイズが可能です。
Apuraの検索機能でできること
Apuraの検索機能は、大きく分けて次の3つの要素で構成されています。それぞれ設定場所とカスタマイズ方法が異なるので、まず全体像を押さえておきましょう。
| 要素 | 内容 | カスタマイズ方法 |
|---|---|---|
| ヘッダーの検索アイコン | クリックで検索ボックスを開くアイコン | カスタマイザー |
| 検索フォーム | 入力欄・プレースホルダー・ボタン | フィルター |
| 検索結果ページ | タイトルや「見つからない」時のメッセージ | フィルター |
ヘッダーに検索アイコンを表示する（カスタマイザー編）
Apuraでは、ヘッダーの右側にある「ヘッダーツール」エリアに検索アイコンを追加できます。設定はすべてカスタマイザーから行うため、コードは不要です。
設定の手順
- WordPressの管理画面から 外観 → カスタマイズ を開きます。
- Header（ヘッダー） パネルを開き、Header Tools（ヘッダーツール） の設定に進みます。
- 表示要素のリストで Search（検索） を有効にします。ドラッグで並び順を変えれば、ほかのツールとの表示位置も調整できます。
- 公開 ボタンを押して保存します。
設定を有効にすると、ヘッダーに虫めがねの検索アイコンが表示され、クリックすると検索フォームが開くようになります。
検索フォームの表示タイプ（モーダル／ドロップダウン）
検索アイコンをクリックしたときの表示方法は、2種類から選べます。Search（検索） の項目内にある Search Type（検索タイプ） で切り替えます。
| タイプ | 動作 | 向いている用途 |
|---|---|---|
| Modal（モーダル） | 画面全体に重なる形で検索窓が開く | 検索に集中させたいサイト（初期値） |
| Dropdown （ドロップダウン） | アイコンの下に小さく検索窓が開く | ページを見たまま素早く検索させたいサイト |
ヘッダーに置かず、ウィジェットや記事本文の中に検索フォームを置きたい場合は、ブロックエディターの 検索 ブロック（core/search）を使えば、好きな場所に検索窓を配置できます。Apuraのデザインにもなじむよう調整されています。
検索フォームの文言を変える（フィルター編）
ここからは、検索フォームの中身をカスタマイズする方法です。
Apuraは検索フォームの各パーツにフィルターフックを用意しているので、テンプレートファイル（searchform.php）を編集しなくても、functions.phpに数行書くだけで文言を変更できます。
用意されている主なフィルターは次のとおりです。
| フィルター名 | 変更できる内容 |
|---|---|
| apura_search_placeholder | 入力欄のプレースホルダー（初期は空） |
| apura_search_form_label | スクリーンリーダー用のラベル文言 |
| apura_search_button_text | 検索ボタンの中身（アイコン／テキスト） |
プレースホルダーを設定する
入力欄に「キーワードを入力」のような案内文（プレースホルダー）を表示すると、訪問者が検索窓だと認識しやすくなります。子テーマのfunctions.phpに次のコードを追加します。
/**
* 検索フォームのプレースホルダーを設定する。
*
* @return string プレースホルダーのテキスト。
*/
function my_apura_search_placeholder() {
return esc_attr__( 'キーワードを入力', 'my-child-theme' );
}
add_filter( 'apura_search_placeholder', 'my_apura_search_placeholder' );テンプレート側でもesc_attr()でエスケープされていますが、翻訳対応と可読性のため、返す文字列にはesc_attr__()を使っておくと安心です。
検索ボタンをアイコンからテキストに変える
初期状態では検索ボタンは虫めがねアイコンですが、「検索」という文字ボタンに変えたい場合もあります。apura_search_button_textフィルターでボタンの中身を差し替えられます。HTMLを返すため、出力前に必ずエスケープしましょう。
/**
* 検索ボタンをテキスト表記に変更する。
*
* @param string $button_html 既定のボタンHTML（アイコン）。
* @return string 変更後のボタンHTML。
*/
function my_apura_search_button_text( $button_html ) {
return esc_html__( '検索', 'my-child-theme' );
}
add_filter( 'apura_search_button_text', 'my_apura_search_button_text' );検索結果ページをカスタマイズする
検索を実行すると、Apuraは専用の検索結果ページ（search.php）を表示します。このページのタイトルや、結果が0件だったときのメッセージも調整できます。
検索結果のタイトルを変更する
初期状態では「Search Results for: 検索語」のようなタイトルが表示されます。apura_search_title_textフィルターで、この文言を日本語に整えたりデザインを変えたりできます。
/**
* 検索結果ページのタイトルを日本語に変更する。
*
* @param string $title 既定のタイトル文言。
* @return string 変更後のタイトル文言。
*/
function my_apura_search_title( $title ) {
return sprintf(
/* translators: %s: 検索キーワード。 */
esc_html__( '「%s」の検索結果', 'my-child-theme' ),
esc_html( get_search_query() )
);
}
add_filter( 'apura_search_title_text', 'my_apura_search_title' );また、タイトルの下に補足テキスト（サブタイトル）を追加したい場合はapura_search_title_subtitle_textフィルターを使います。「該当する記事を表示しています」のような一文を添えると、検索結果ページがより親切になります。
/**
* 検索結果タイトルにサブタイトルを追加する。
*
* @param string $subtitle 既定のサブタイトル（空文字）。
* @return string サブタイトルのテキスト。
*/
function my_apura_search_subtitle( $subtitle ) {
return esc_html__( '該当する記事を表示しています', 'my-child-theme' );
}
add_filter( 'apura_search_title_subtitle_text', 'my_apura_search_subtitle' );結果が0件だったときの表示
検索結果が見つからなかった場合、Apuraは自動で「検索条件に一致するものが見つかりませんでした。別のキーワードでお試しください。」という案内と、再検索用のフォームを表示します。
訪問者が離脱せずに再検索できるよう配慮された設計になっているため、多くの場合はそのままで問題ありません。
もし文面を大きく変えたい、関連記事へのリンクを追加したい、といった場合は、searchform.phpやループ部分を子テーマで上書きする方法があります。子テーマのフォルダにsearchform.phpを置くと、検索フォームのHTML全体を自分好みに差し替えられます。
まとめ
Apuraの検索機能は、カスタマイザーで検索アイコンを表示するだけでもすぐに使えますし、フィルターを使えばプレースホルダー・ボタン・結果ページの文言まで、テンプレートを触らずに整えられます。
まずはカスタマイザーで Header Tools → Search を有効にして表示を確認し、必要に応じて子テーマのfunctions.phpで文言を調整してみてください。
検索プラグインを追加しなくても、Apura標準の機能だけで訪問者に使いやすいサイト内検索を提供できます。