ひかげStyle ロゴ

ひかげStyle:ひかげすたいる

WordPress(ワードプレス)やMacやxreaの他に、プラスひかげ的Webスタイル。

2016.12/30 自作テーマへ変更。

WordPress searchform カスタマイズ

2018年2月26日 WordPress 0

WordPressの自作テーマでCSSフレームワークを利用した時にsearchform.phpのカスタマイズが必要になってしまった、@ひかげです。

WordPress 4.9.4 searchform.php カスタマイズの例になります。

「searchform.php」の無いテーマでは、WordPressの標準仕様による検索フォームが使われます。

基本的なsearchform.php HTML5 フォームの作り方

  • searchform.phpのファイル作成
  • 検索用フォームをテーマに設置(インクールドタグ、ウィジェット)

WordPress searchform.php デフォルトの HTML5 フォーム

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">

<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>

<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />

</form>

詳しくは、「関数リファレンス/get search form」をご覧ください。

テーマとインクールドタグ

WordPressのテーマにインクールドタグを使って「searchform.php」を読み込む場合

<?php get_search_form(); ?>

ウィジェットから検索フォームの設置

テーマのウィジェットからサイドバーなどへ「検索」をドラッグや追加をして利用する場合、インクールドタグは不要です。

WordPress searchform カスタマイズ1

WordPress searchform カスタマイズ2

シンプルにカスタマイズした searchform.php

<form role="search" method="get" id="search-form" class="search-form" action="<?php echo home_url( '/' ); ?>">

<div class="searchform_inner">

<input type="text" value="" name="s" id="s" class="searchform_input" placeholder="<?php echo __( 'Search' ) ?>">

<button id="searchsubmit" class="btn-searchsubmit" type="submit" tabindex="1" accesskey="q"><?php echo __( 'Search' ) ?></button>

</div><!-- /.searchform_inner -->

</form>

searchform.php カスタマイズ(Bootstrap v4.0.0)

Bootstrap v4.0.0を利用したWordPressでウィジェットを使ったsearchform.phpのカスタマイズ例

searchform.phpとstyle.cssの編集・カスタマイズが必須です。

<form role="search" method="get" id="search-form" class="form-inline search-form" action="<?php echo home_url( '/' ); ?>">

<div class="searchform_inner">

<input type="text" value="" name="s" id="s" class="form-control mr-0 searchform_input" placeholder="<?php echo __( 'Search' ) ?>">

<button id="searchsubmit" class="btn btn-primary my-2 btn-searchform" type="submit" tabindex="1" accesskey="q"><?php echo __( 'Search' ) ?></button>

</div><!-- /.searchform_inner -->

</form>

style.css カスタマイズ(Bootstrap v4.0.0)

.widget_search {
    margin-bottom:1em;
}

.widget_search label.screen-reader-text {
    display:none;
}

input#s {
    width:65%;
}

検索フォームカスタマイズの完成例(Bootstrap v4.0.0)

iPad Air2で見たときに、検索フォームのボタンを横並びにするため、入力欄(input#s)の横幅を調整(width:65%)しました。

WordPress searchform カスタマイズ3

おわりに

CSSフレームワークや自作テーマで「searchform.php」をオリジナルで作成するときに、カスタマイズの参考になれば幸いです。

検索結果を表示する「search.php」も作成しておくと便利かもしれませんね。

最新のコメント 7件

Welcome to WordPress
2016年12月30日 ひかげ
コメントテスト。 あああ...
親指タイプ トラックボール ロジクールM570
2012年11月6日 tt
再度、御返事有難うございました...
親指タイプ トラックボール ロジクールM570
2012年11月6日 ひかげ
ttさん、ふたたびのコメントあ...
親指タイプ トラックボール ロジクールM570
2012年11月5日 tt
ひかげさん 「ドラッグよりも...
親指タイプ トラックボール ロジクールM570
2012年9月4日 ひかげ
ttさん、コメントありがとうご...
親指タイプ トラックボール ロジクールM570
2012年9月4日 tt
私は今まで多くのトラックボール...
Apple Wireless Keyboard ケース 衝動買い
2012年8月31日 ひかげ
mimiさん、コメントありがと...

@ひかげ

WordPressカスタマイズ向け自作テーマ kunai

ひかげの自作テーマ1

ひかげStyle