WordPress検索処理の簡単カスタマイズ

2018/12/14 WordPress

WordPressはデフォルトでサイト検索フォームが組み込まれています。これを利用する最も簡単な方法は以下をfunction.phpに記述します。

add_theme_support( 'html5', array( 'search-form' ) );

この検索フォームを表示するには以下で呼び出します。

<?php get_search_form(); ?>

これで最もシンプルな検索フォームを追加することができます。

また、CSSでデザインするにはクラス名”search-field”でスタイルを定義します。
ウィジェットで検索部品を追加した時もこのフォームが表示されます。

この検索フォームでは物足りないので、簡単なカスタマイズをします。カスタマイズ内容は、検索フォームに複数カテゴリー選択とプルダウンのタグ選択を追加します。
検索フォームはget_search_form();で表示されますが、もしsearchform.phpがあればWordPressはそれを使います。つまりsearchform.phpにカスタマイズしたフォームを記述すればそれが表示されます。また、表示するのは１箇所だけなどのときは、searchform.phpを用意しなくともそこにカスタマイズしたフォームを記述すればいいかと思います。

検索フォームのベースは上記のfunction.phpに追加したデフォルトのHTML5フォームを使います。WordPressには以下のフォームが組み込まれているので、それをそのまま使います。

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

このフォームにカテゴリー選択用のチェックボックスとタグ選択用のプルダウンメニューを追加します。

カテゴリー選択用チェックボックス

<?php $cats = get_categories(); if ($cats) : ?>
    <?php foreach ( $cats as $cat ): ?>
        <div class="search-checkbox">
        <label><input type="checkbox" name="cat" value="<?php echo $cat->cat_ID; ?>"><?php echo esc_html( $cat->name ); ?></label>
        </div>
    <?php endforeach; ?>
<?php endif; ?>

カテゴリー選択はWordPressデフォルトでプルダウンメニューが用意されています。単一選択の場合はこちらを利用するととても簡単に実装できます。

<?php wp_dropdown_categories('orderby=name&show_option_none=All categories'); ?>

引数の詳細はCodexを参照ください。

タグ選択用のプルダウンメニュー

<?php $tags = get_tags(); if ( $tags ) : ?>
    <select class="search-pulldown" name='tag' id='tag'>
    <option value="" selected="selected"><?php echo esc_html__('All tags', 'SagasWhat'); ?></option>
    <?php foreach ( $tags as $tag ): ?>
        <option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option>
    <?php endforeach; ?>
    </select>
<?php endif; ?>

これらを上記の検索フォームに追加すると完成です。

全体のコード

<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' ) ?>" />
    <?php $cats = get_categories(); if ($cats) : ?>
    <?php foreach ( $cats as $cat ): ?>
        <div class="search-checkbox">
        <label><input type="checkbox" name="cat" value="<?php echo $cat->cat_ID; ?>"><?php echo esc_html( $cat->name ); ?></label>
        </div>
    <?php endforeach; ?>
    <?php endif; ?>
    <?php $tags = get_tags(); if ( $tags ) : ?>
        <select class="search-pulldown" name='tag' id='tag'>
        <option value="" selected="selected"><?php echo esc_html__('All tags', 'SagasWhat'); ?></option>
        <?php foreach ( $tags as $tag ): ?>
            <option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option>
        <?php endforeach; ?>
        </select>
    <?php endif; ?>
</form>

このコードをsearchform.phpに保存してget_search_form();で表示するか、フォームを表示したい箇所に記述します。

シェアする

, ,