WordPressの検索フォームをカスタマイズしてみる

2017年2月5日カテゴリー : WordPress コメント : 0

　WordPress には記事の中身をキーワードで検索し、該当する記事を一覧表示してくれる機能があります。一番簡単な設置方法はサイドバーに表示させることです。テーマをカスタマイズすることができるなら、ページトップのヘッダーに表示させることもできます。

　カテゴリーやタグクラウドを使えば、ある程度の絞込みをすることは可能ですが、ユーザーの利便性の向上ためにぜひ挑戦してみてください。デザインのカスタマイズと併せて解説したいと思います。

検索フォームの表示

サイドバーに検索フォームを表示するだけなら簡単なのです。管理画面の「外観」→「ウィジェット」に移動、利用できるウィジェットのなかに「検索」とあるので、それを追加するだけです。

なにもカスタマイズしていなければ、シンプルな検索フォームが表示されるはずです。余計なラベルなどが表示されていますが。

でも、どうせならボタンのデザインなどをカスタマイズしたいですよね？

テーマフォルダにsearchform.phpを作成する

お使いのテーマのフォルダのなかに新しく searchform.php を作成します。ソースコードは次のように記述します。

<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
    <input type="search" placeholder="検索 …" name="s" class="searchfield" value="" />
    <input type="submit" value="&#xf002;" alt="検索" title="検索" class="searchsubmit">
</form>

</form>

ひとつ注意するのは、検索キーワードを入力するテキストボックスの name 属性は、必ず「s」にするようにしてください。あとは CSS でカスタマイズをしやすいように、わかりやすいクラスなどを指定するとよいでしょう。

スタイルシートのカスタマイズサンプルです。

.searchform {
    margin: 34px 0 40px 0;
}

.searchfield {
    font-size: 14px;
    width: 190px;
    padding: 10px;
}

.searchsubmit {
    font-family: FontAwesome;
    font-size: 20px;
    width: 35px;
    height: 30px;
    background: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}

.searchform {

margin: 34px 0 40px 0;

}

.searchfield {

font-size: 14px;

width: 190px;

padding: 10px;

}

.searchsubmit {

font-family: FontAwesome;

font-size: 20px;

width: 35px;

height: 30px;

background: transparent;

padding: 0;

border: none;

cursor: pointer;

}

先ほどサイドバーに表示されていた検索フォームがカスタマイズされます。

サイドバー以外の表示方法

サイドバー以外に表示したい場合にはどうしたらよいのでしょうか。例えば、このようにしたいとします。

WordPress にはサイドバー以外に検索フォームを表示するためのテンプレートタグが用意されています。表示したい場所に次の一行を追加するだけです。これにより、searchform.php で指定された HTML を出力してくれるようになります。

<?php get_search_form(); ?>

1	<?php get_search_form(); ?>

今回のようにページトップのヘッダー部分に表示するなら、header.php は次のようになるかと思います。

<div class="header">
    <div class="header_inner">
        <div class="header_inner_left">
            <div class="site_title">
                <a href='<?php echo esc_url(home_url( '/' )); ?>' title='<?php echo esc_attr(get_bloginfo('name', 'display')); ?>' rel='home'><?php bloginfo('name'); ?></a>
            </div>
            <div class="site_description">
                <?php bloginfo('description'); ?>
            </div>
        </div>
        <div class="header_inner_right">
            <?php get_search_form(); //検索フォームを表示します  ?>
        </div>
    </div><!-- .header-inner -->
    
    <div class="navigation">
        <?php wp_nav_menu(array('menu', 'menu1')); ?>
    </div><!-- .navigation -->
</div><!-- .header -->

<a href='<?php echo esc_url(home_url( '/' )); ?>' title='<?php echo esc_attr(get_bloginfo('name', 'display')); ?>' rel='home'><?php bloginfo('name'); ?></a>

</div>

<?php bloginfo('description'); ?>

</div>

<?php get_search_form(); //検索フォームを表示します ?>

</div>

</div>

<?php wp_nav_menu(array('menu', 'menu1')); ?>

</div>

</div>

デザインのカスタマイズ方法はおおまかにふたつあるかと思います。

.header_inner {
    overflow: hidden;
}

.header_inner_left {
    float: left;
}

.header_inner_right {
    float: right;
}

.header_inner {

overflow: hidden;

}

.header_inner_left {

float: left;

}

.header_inner_right {

float: right;

}

header_inner クラスに overflow:hidden; を指定していますが、これは header_inner_left・header_inner_right の両クラスを float を使って左右に配置しているためです。クリアフィックスですね。これがないと表示が崩れます。最後にマージンやパッディングで微調整してください。

もうひとつの方法がこちら。

.header_inner {
    position: relative;
}

.header_inner_right {
    position: absolute;
    top: 0;
    right: 0;
}

.header_inner {

position: relative;

}

.header_inner_right {

position: absolute;

top: 0;

right: 0;

}

header_inner_right クラスに position:absolute; を指定して座標により位置を決定します。親要素が header_inner クラスになっているので、position:relative; を指定し忘れないようにしてください。微調整にはマージンやパッディングを使わず、直接座標を指定すればよいでしょう。