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

2015年05月31日
Sponsored Link

img_wordpress

WordPressでサイト内検索フォームを導入する場合は、関数 get search form を使います。

使い方はテンプレート内に次のように記述するだけです。

<?php get_search_form(); ?>

この記述により、WordPressに組み込みの検索フォームが表示されます。

組み込みの内容は wp-includes/general-template.php の174行目あたりからです。

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

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

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;
}
}

■検索フォームのカスタマイズ完成

検索フォームがこんな感じのデザインになりました。

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

follow us in feedly

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ