【WordPress】サイト内検索フォームをカスタマイズする

2015年05月31日

サイト内検索フォームのカスタマイズ

今回はサイト内検索フォームをカスタマイズしたいと思います。

wp-includes/general-template.phpを直接書き換えると、新バージョンへの更新で上書きされる恐れがあるので、テーマフォルダにsearchform.phpを作成します。

関数「get search form」はテーマに「searchform.php」ファイルがあれば、それを使用して検索フォームを表示します。

searchform.php の作成

作成時に注意することは、フォームの送信先をホームURLにしてメソッドの指定はGETです。また、入力テキストフィールドの名前は s にして、label を必ず含める必要があります。

作成例にはplaceholderを設定しています。

作成例

<form role="search" method="get" id="searchform" class="searchform"  action="<?php echo esc_url( home_url( '/' ) ); ?>" >
    <div>
      <label class="screen-reader-text" for="s"><?php _ex( 'Search for:', 'label' ); ?></label>
      <input type="text" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" id="s" placeholder="サイト内検索"/>
      <input type="submit" id="searchsubmit"  value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
    </div>
</form>

cssでスタイリングします。

下記の作成例はSassで書いています。

作成例

#search {
  width: auto;
  padding: 0;
  margin-left: 10px;
    input {
      vertical-align: middle;
      float: left;
      height: 26px;
      padding: 0;
    }
    input#s {
      @include font-size(11);
      width: 180px;
      border: 1px solid #d4d4d4;
      padding: 0 5px;
      border-radius: 5px 0 0 5px;
      box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
    }
    #searchsubmit {
      background: url("images/base/search_btn.png") no-repeat center center transparent;
      border: medium none;
      cursor: pointer;
      text-indent: -9999px;
      width: 40px;
      height: 26px;
      display: block;
    }
    label {
      display: none;
  }
}