WordPressは強力なコンテンツ管理システム（CMS）であり、サイト訪問者が求める情報を迅速に見つけられるよう、効果的な検索機能を提供することが重要です。本記事では、WordPressでカスタム検索フォームを作成し、検索結果を投稿タイプ別にヘッダーやフッターを変更する方法を具体的なコード例とともに詳しく解説します。初心者から上級者まで、ウェブサイトの検索機能を高度にカスタマイズしたい方に最適なガイドです。

カスタム検索フォームの作成

WordPressのデフォルトの検索フォームも十分に機能しますが、サイトのデザインや特定の機能に合わせてカスタマイズすることで、より使いやすく魅力的な検索機能を提供できます。以下に、カスタム検索フォームの作成手順を示します。

検索フォームのHTML構造

以下のコードを使用して、カスタム検索フォームを作成します。このフォームは、特定の投稿タイプを検索対象に含めるための隠しフィールドも含んでいます。

<form method="get" id="searchform" action="<?php echo home_url('/'); ?>">
  <input type="text" name="s" id="s" class="searchbox" placeholder="投稿をさがす" />
  <input type="hidden" name="post_type" value="投稿タイプ">
  <button type="submit" aria-label="検索"><i class="far fa-search"></i></button>
</form>

コード解説:

• <form>タグ: method="get"を使用して検索クエリをURLパラメータとして送信します。action="<?php echo home_url('/'); ?>"は、検索クエリをホームURLに送信することを意味します。
• <input type="text">: ユーザーが検索キーワードを入力するテキストボックスです。name="s"はWordPressがデフォルトで認識する検索クエリパラメータです。
• <input type="hidden">: name="post_type"は検索対象の投稿タイプを指定します。value="投稿タイプ"には、検索対象とするカスタム投稿タイプ名を設定します（例: blog, magazineなど）。
• <button>: 検索を実行するためのボタンです。ここではFont Awesomeの検索アイコンを使用しています。また、フォームやボタンに適切なARIA属性を追加し、スクリーンリーダー利用者にも使いやすい検索フォームを提供し、アクセシビリティの確保ができます。

フォームの配置

この検索フォームをテーマの適切な場所に配置します。一般的には、header.phpやsidebar.phpに追加されます。

例: sidebar.phpに追加する場合

<?php get_search_form(); ?>

ただし、カスタム検索フォームを直接テンプレートに埋め込む場合はそのまま記述してください

検索結果ページのカスタマイズ

検索フォームから送信されたクエリに基づいて、検索結果ページ（search.php）をカスタマイズします。特に、投稿タイプに応じて異なるヘッダーやフッターを表示することで、ユーザーにとってわかりやすく、整理された結果を提供できます。

検索結果テンプレートの作成

search.phpファイルをテーマフォルダに作成または編集します。このテンプレートファイルは、検索結果を表示する際に使用されます。

投稿タイプによるヘッダー・フッターの変更

以下のコードをsearch.phpに追加して、検索結果を表示する際に投稿タイプに応じて異なるヘッダーやフッターを呼び出します。

<?php if ($post_type == 'magazine'): ?>
  <?php get_header('magazine'); ?>
  <!-- ここに記事のループ -->
  <?php get_footer('magazine'); ?>
<?php elseif ($post_type == 'blog'): ?>
  <?php get_header('blog'); ?>
  <!-- ここに記事のループ -->
  <?php get_footer('blog'); ?>
<?php else: ?>
  <?php get_header(); ?>
  <!-- ここに記事のループ -->
  <?php get_footer(); ?>
<?php endif; ?>

コード解説:

• get_header('magazine')やget_header('blog'): 指定した投稿タイプに対応するヘッダーファイル（例: header-magazine.php）を呼び出します。これにより、投稿タイプごとに異なるデザインや機能を実装できます。
• get_footer('magazine')やget_footer('blog'): 指定した投稿タイプに対応するフッターファイル（例: footer-magazine.php）を呼び出します。

ループの出力は以下の記事を参考にしてください

【WordPress】よく使うテンプレートタグ一覧と使い方ガイド

WordPressでサイトをカスタマイズする際、テンプレートタグは非常に重要な役割を果たします。この記事では、PHPを用いたWordPress開発で頻繁に使用されるテンプレートタグ…

【WordPress】ループでの記事表示方法完全ガイド｜基本から高度なクエリ設定まで

WordPressでサイトをカスタマイズする際、テンプレートページでのループ（投稿の表示）は非常に重要な要素です。基本的なループの書き方から、カスタムクエリの設定、ページネーション…

適切なh1タイトルの設定

検索結果ページのh1タイトルを動的に変更し、検索キーワードを含めることでSEOを向上させます。

<h1><?php the_search_query(); ?>の検索結果 : <?php echo $wp_query->found_posts; ?>件</h1>