検索窓をヘッダーに表示する方法
WordPress(ワードプレス)のテーマである「STINGER8」。
STINGER8で検索窓をサイトの先頭に表示したい場合、「header.php」に検索窓のコードを貼り付ける方法が一般的です。
しかし個人的には、メインコンテンツのパーツに位置する「itiran.php」を編集したほうが検索窓の表示はやりやすいのでおすすめです。
検索窓を先頭表示することの解説
読み手の使いやすさの観点から、サイト内検索の機能を設けることはサイト作りにおいて大切な点の１つです。
記事が膨大な数になったり、カテゴリー分類が曖昧なテーマの記事を書く場合はなおさらです。
こういったときにサイト内検索機能があれば、探している記事やその関連記事を見つけ出すことができます。
ワードプレスにおいってサイト内検索窓を機能を設ける場合、ウィジェットからサイドバーに検索窓を設置するのが一般的です。
ただしこの手法だと(STINGER8に限ったことではありませんが)スマホとパソコン表示で異なった状況になります。
パソコン表示だと文字通り画面の横にあり見やすいサイドバーですが、スマホ表示の場合サイドバーは記事の下に潜り込みます。
このためサイト内検索も下の方に位置することになります。
大して気にならない人もいるとは思いますが、サイト内検索を「しやすく」することを重視する人にとっては、サイドバーへの配置はベストとは言い難いレイアウトになってしまいます。
こういった経緯から、パソコン表示とスマホ表示のどちらでも検索窓を先頭に配置したいという考えが出てきます。
検索窓を先頭表示する方法
ヘッダーに配置する
検索窓を先頭に表示するもっともシンプルな発想と方法は、ヘッダーに検索窓のコードを貼り付ける方法です。
「header.php」に以下のコードを貼り付けます。
（ワードプレスのカスタマイズは子テーマでの編集をおすすめします）
<?php get_search_form();// 検索窓の表示 ?> これで検索窓を先頭に表示することができます。
しかしながらこれには微妙な点が１つあります。
ヘッダーに張り付けた検索窓は横幅いっぱいに広がり、パソコン表示場合は特に見た目が不格好です。
このため、新着記事と同じくらい、つまりメインコンテンツと同じくらいの横幅にならないものかという欲求に駆られることになります。
直接見た目を編集するものもちろんありですが、これはこれで面倒です。
そのため、検索窓を横幅をある程度サイト全体の雰囲気と合わせるため、「ヘッダー」ではなく「メインコンテンツの先頭」に検索窓を貼り付けるという方法を検討するに至ります。
メインコンテンツの先頭に配置する
STINGER8においてメインコンテンツエリアの先頭に検索窓を表示させたい場合、「itiran.php」に検索窓のコードを貼り付けます。
こちらも同様に子テーマで作業をします。
親テーマの「itiran.php」をコピーして、子テーマに組み込みます。
そして「itiran.php」にコードを貼り付けます。
(コードは先述と同じもので大丈夫です)
<?php get_search_form();// 検索窓の表示 ?>これにて横幅がある程度整った検索窓を配置できます。