2026年10月17日

WordPressのカスタム404ページにサイト内検索を追加

テーマ・デザイン

はじめに

カスタム404エラーページは、訪問者が間違ってアクセスした場合でも、ユーザーがサイト内で目的の情報を容易に見つけることができる重要な要素です。特に、ウェブサイトのナビゲーションやリンク構造を改善するためには、失敗したアクセスから有益な情報を引き出すことが求められます。

症状・背景

ユーザーからのフィードバックで「特定ページが見つからない」という苦情が多い
サイト内検索の機能がユーザーにとって分かりにくい場合に有効
訪問者が誤ってアクセスしたURLに対して、サイト内の関連情報を提供するため

手順・設定方法

ステップ1: 404ページをカスタマイズする

# WordPressテーマのディレクトリにある404.phpファイルを開く
cd wp-content/themes/your-theme/
nano 404.php

# ファイル内にサイト内検索フォームを追加する
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" id="s" class="search-field" placeholder="サイト内検索..." value="" name="s">
    </label>
    <button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
</form>

ステップ2: サイト内検索を有効にする

# ブログの設定で「サイト内検索」機能をオンにします。
wp options update show_on_front 'page'
wp option update page_for_posts 4

# 検索結果ページを設定する必要がある場合、特定のページIDを指定します。

ステップ3: カスタムCSSとJavaScriptを使用して検索フォームをカスタマイズ

# WordPressテーマのstyle.cssにスタイルを追加
nano wp-content/themes/your-theme/style.css

# 検索フォームに関するCSSを追加
.search-form {
    display: flex;
    align-items: center;
}

.search-field {
    padding: 10px;
    width: 250px;
    border-radius: 3px;
    font-size: 16px;
}

.search-submit {
    background-color: #4CAF50;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

# ブラウザでJavaScriptを使用してフォームをカスタマイズ
nano wp-content/themes/your-theme/js/custom.js

// JavaScriptコードを追加
jQuery(document).ready(function($){
    $('.search-field').focus(function(){
        $(this).val('');
    });
});

ステップ4: 検索結果ページのカスタム設定とテスト

# テスト用に検索クエリを実行し、結果が意図通り表示されるか確認する。
http://localhost/your-site/?s=testquery

注意事項

カスタム404ページはHTMLやCSSの知識が必要であり、WordPressテーマの基本的な理解が必要です。
検索機能を完全にカスタマイズする場合は、プラグインを使用することも考慮してください。
ユーザビリティと視覚的効果を重視し、サイト全体のスタイルと統一感を持つようにデザインします。

まとめ

1. 404ページの設定: WordPressテーマに含まれる404.phpファイルを使用してカスタム404ページを作成します。

2. 検索フォームの追加: 必要なHTMLとCSSを追加することで、ユーザーがサイト内を効果的に探すための検索フォームを作ります。

3. カスタマイズ: カスタムCSSとJavaScriptを使用して、検索フォームの外観と動作を最適化します。

4. テスト: 検索結果ページが正しく表示され、ユーザーが意図した内容を見つけることができるか確認します。