<
スポンサーリンク

検索フォームを簡単設置&デザイン

検索フォーム WordPress
検索フォーム
この記事は約6分で読めます。

検索フォームをメニューバーに設置

検索フォームをヘッダーに設置することは簡単です。

  • <?php get_search_form(); ?>

これを表示したいところに記載するのみです。

インクルードタグ「get_search_form」

インクルードタグは、テーマディレクトリからseach.phpを読み込むタグです。

seach.phpがない時には検索フォームが生成されます。

テンプレートインクルードタグは、あるテンプレートファイル(例えば index.php)の中で、他のテンプレートファイル(例えば header.php)の HTML や PHP を実行するために使います。

特定のファイルを読み込む関数として「include()」インクルードが利用されますが、もっと簡単にしたものがインクルードタグです。

検索フォームを設置したい場所に貼るだけ

表示したいところに記載します。

  • <?php get_search_form(); ?>

とても簡単です。

例 ヘッダーに設置

次の画像は、header.phpの一番下とメニューバーの下に表示させています。

検索フォーム
検索フォーム

手順

  1. 子テーマにheader.phpを作成(コピー)
  2. 表示させたい位置に記述
  3. スタイルシート(style.css)でサイズや余白の調整をする

スタイルシートで微調整

テーマや好みに合わせて調整して下さい。

  • 検索フォーム(id) #s
  • ボタン(id) #searchsubmit

#sと#searchsubmitを付けて、サイズなどを指定します。

例 検索フォームのサイズを200×20

サイズや余白を指定。(属性セレクタで指定する場合は最後に記載しています)

  •  #s {
  • width: 200px;
  • height: 20px;
  • margin-left: 20px;
  • } #searchsubmit {
  • line-height: 20px;
  • }

検索フォームのカスタム

検索フォームを機能させるためにはテキストフォームと検索ボタンをwebサイトに設置するinput要素が必要です。これをコントロール要素とも言います。

関数リファレンス/get search form – WordPress Codex 日本語版を参考にして下さい。

label要素

label要素とは、フォームの部品(コントロールする要素)とラベルを関連付ける要素で、ラベルを関連付けることによって、フォームの部品を選択し実行できるようになります。関連付ける方法は、以下の2つの方法があります。

  • フォームの部品(input要素など)にid属性を設定し、そのidをlabel要素のfor属性で指定する。
  • labelタグでフォームの部品を囲む。

フォームの部品

 部品ソース(type属性に何をするのかがわかる)
テキストフィールドtext<input type=”text” name=”s” value=” “>
実行ボタンsubmit<input type=”submit” name=”s” value=” “>
取り消しボタンreset<input type=”reset” name=” ” value=” “>
パスワードフィールドpassword<input type=”password” name=” “>

上記はフォームの部品の一部です。他チェックボックス、パスワード入力フォームなどもあります。

  • input要素(フォーム部品) id=”s”
  • label要素 for=”s”
  • テキストフィールド input type=’text’ name=’s’
  • 実行ボタン input type=’submit’
  • <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
  • <div>
  • <label class="screen-reader-text" for="s">Search for:</label>
  • <input type="text" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" id="s" placeholder="search …">
  • <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
  • </div>
  • </form>

HTML5フォーム

WordPress 3.6 以降、テーマは下記のコードを使って HTML5 マークアップのサポートを明確に選択できるようになりました。

add_theme_support( ‘html5’, array( ‘search-form’ ) );

デフォルトのHTML4フォームとHTML5フォームの違い

 HTML4フォームHTML5フォーム
input タグtype=”text”type=”search”
idid=”searchform” id=”searchsubmit”id を持つ要素がない
class class=”search-form”
placeholder placeholder 属性がある

idを持つ要素がないので、複数の検索フォームを配置できます。

placeholder 属性

テキストフィールドに初期値を指定します。「検索」や「Search」などを表示します。

  • 検索フォーム .search-field
  • ボタン .search-submit
  • <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  • <div>
  • <label class="screen-reader-text" for="s">Search for:</label>
  • <input type="search" class="search-field" value="<?php echo get_search_query() ?>" name="s" title="search" placeholder="search …">
  • <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
  • </div>
  • </form>

検索フォームのサイズの調整

サイトのデザインや好みに合うように、スタイルシート(style.css)で調整します。

属性セレクタで指定

要素名[属性名=”<値>”]で指定します。

idやclassで指定できない場合、input要素やtype属性で指定します。

例 検索フォームのサイズの調整 要素名[属性名=”<値>”]

  • input要素とclass
  • input要素とsubmit属性

例えば200×20にした場合(数字は適当に入れてますので、調整してください)

  •  input.search-field{
  • width: 200px;
  • height: 20px;
  • } input[type=submit]{
  • margin-bottom: 10px;
  • }

タイトルとURLをコピーしました