【WordPress】検索フォームをカスタマイズする方法（searchform.php）

WordPressで検索フォームのデザインをカスタマイズする方法。テーマ内にsearchform.phpを作成して、自由なデザインの検索フォームを設置します。

手順

1. searchform.phpを作成する

使用中テーマのディレクトリにsearchform.phpを新規作成します。既にテーマ内にある場合はそれを編集。

<form method="get" class="searchform" action="<?php echo esc_url(home_url('/')); ?>">
    <input
        type="text"
        placeholder="記事を検索"
        name="s"
        class="searchfield"
        value="<?php echo esc_attr(get_search_query()); ?>"
    />
    <button type="submit" class="searchbtn" aria-label="検索">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
    </button>
</form>

検索アイコンはSVGを直接埋め込んでいます。Font Awesomeを使っている場合は<i class="fas fa-search"></i>でもOK。

2. CSSでスタイリング

.searchform {
    display: flex;
    align-items: center;
    gap: 8px;
}

.searchfield {
    width: 260px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    padding: 8px 16px;
    line-height: 1.4;
}

.searchfield:focus {
    outline: none;
    border-color: #666;
}

.searchbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #333;
    transition: color 0.3s;
}

.searchbtn:hover {
    color: #666;
}

3. テンプレートに設置

検索フォームを表示したい場所に以下を記述。

<?php get_search_form(); ?>

サイドバー、ヘッダー、フッターなど、どこにでも設置できます。

補足

• 検索結果ページはsearch.phpでカスタマイズ可能
• 検索対象を投稿記事のみに絞る方法は、検索結果に固定ページを表示しない方法を参照