WordPressの検索ウィジェットのHTMLをカスタマイズする

20160321214338

WordPressのテーマをBootstrap3ベースで作り替えるにあたって、検索フォームウィジェットのHTMLコードを変更することにしました。

管理画面上では無理

プラグインだと可能なのかもしれませんが、個人的にプラグインにあまり頼りたくないのでウィジェット自体をいじりたかったんだけど、管理画面ではそういうところがない。

WordPressのテンプレートは「single.php」とか「archive.php」とかで作れるので、ウィジェットもそうなのかなとググってみたらそうでした

searchform.php を作って配置

調べてみたら簡単。

フォームのHTMLスニペットを作成して「searchform.php」というファイル名でテーマディレクトリ直下に配置すればOK。

元々の検索フォームウィジェットのソースはこんな感じですが、

<form role="search" method="get" id="searchform" class="searchform" action="https://colo-ri.jp/">
    <div>
        <label class="screen-reader-text" for="s">検索:</label>
        <input value="" name="s" id="s" type="text">
        <input id="searchsubmit" value="検索" type="submit">
    </div>
</form>

これをBootstrapベースのコードに変更。

<form role="search" method="get" id="searchform" class="form" action="">
    <div class="row">
        <div class="col-xs-12">
            <div class="input-group">
                <input type="text" id="s" class="form-control" name="s" value="" placeholder="キーワードを入力">
                <span class="input-group-btn">
                    <input id="searchsubmit" class="btn btn-default" value="検索" type="submit">
                </span>
            </div>
        </div>
    </div>
</form>

で、できたのがこれ。

20160321214338

いい感じにできました。

このページをシェアする

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

2016-03-21