【WordPress】カテゴリーページ（category.php）に検索窓を追加する方法

WordPressのカテゴリー（category）ページに検索窓を設置することで、ユーザーが特定のカテゴリ内の記事を探しやすくなります。この記事では、カテゴリー専用の検索フォームを追加する方法と、ウィジェットを category.php に表示する方法を解説します。

1. カテゴリーページに検索フォームを追加する方法

方法1: get_search_form() を利用する

WordPressには標準の検索フォーム get_search_form() が用意されており、以下のコードを category.php 内の適切な場所に記述することで簡単に検索フォームを設置できます。

<?php get_search_form(); ?>

このコードを追加すると、テーマ内の searchform.php （存在しない場合はWordPressのデフォルトのフォーム）が読み込まれます。

もし searchform.php をカスタマイズしたい場合は、テーマフォルダ内に searchform.php を作成し、以下のコードを記述するとデザインや機能を変更できます。

<form role="search" method="get" class="search-form" action="<?php echo home_url('/'); ?>">
    <input type="search" class="search-field" placeholder="検索..." value="<?php echo get_search_query(); ?>" name="s" />
    <button type="submit" class="search-submit">検索</button>
</form>

方法2: カテゴリー専用の検索フォームを設置

カテゴリー内のみ検索できるフォームを作成する場合、 category.php の適切な場所に以下のコードを追加します。

<form role="search" method="get" action="<?php echo home_url('/'); ?>">
    <input type="hidden" name="cat" value="<?php echo get_query_var('cat'); ?>">
    <input type="search" name="s" placeholder="このカテゴリー内を検索">
    <button type="submit">検索</button>
</form>

このフォームでは cat パラメータに現在のカテゴリーIDを埋め込み、そのカテゴリー内でのみ検索を行います。

2. ウィジェットを category.php に表示する方法

WordPressには「検索」ウィジェットを利用する方法もあります。通常は「外観」→「ウィジェット」から追加できますが、category.php にウィジェットエリアを直接追加することも可能です。

方法1: functions.php にウィジェットエリアを登録

functions.php に以下のコードを追加し、新しいウィジェットエリアを作成します。

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => 'カテゴリー専用ウィジェット',
        'id'            => 'category_sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

方法2: category.php にウィジェットエリアを追加

次に、 category.php の適切な場所（例えばサイドバー）に以下のコードを記述し、ウィジェットエリアを表示します。

<?php if (is_active_sidebar('category_sidebar')) : ?>
    <aside class="category-sidebar">
        <?php dynamic_sidebar('category_sidebar'); ?>
    </aside>
<?php endif; ?>

これで、「外観」→「ウィジェット」から「カテゴリー専用ウィジェット」に検索フォームを追加できるようになります。

3. 検索フォームのデザインを整える

検索フォームを見やすくするために、以下のCSSを style.css に追加しましょう。

.search-form {
    display: flex;
    align-items: center;
    max-width: 300px;
}

.search-field {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search-submit {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    margin-left: 5px;
    border-radius: 5px;
}

.category-sidebar {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
}

まとめ

• get_search_form() を使うと簡単に検索フォームを追加可能
• 特定のカテゴリー内のみ検索できるフォームを作成する場合は cat パラメータを使用
• functions.php でウィジェットエリアを作成し、category.php に表示すると、ウィジェットから検索窓を管理できる
• CSSでデザインを調整すると、見た目を統一しやすい

この方法を活用して、ユーザーが使いやすいカテゴリー検索を実装しましょう！