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

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>

で、できたのがこれ。

いい感じにできました。