【WordPress】404ページで検索キーワードを提案する機能を追加する方法

WordPressサイトにおいて、404ページ（ページが見つからないエラーページ）は訪問者が離脱しやすいポイントの一つです。しかし、404ページに検索フォームや関連キーワードを表示することで、ユーザーを他の有用なコンテンツに導くことができます。この記事では、404ページに検索キーワードの提案機能を追加する方法を解説します。

404テンプレートを編集する
検索フォームのスタイル調整
動的に人気キーワードを表示する方法（応用）
まとめ

404テンプレートを編集する

まず、テーマフォルダ内にある 404.php を編集または作成します。以下は基本構造の例です。


<?php get_header(); ?>

<main>
  <h2>お探しのページは見つかりませんでした</h2>
  <p>代わりに以下のキーワードで検索してみてください。</p>

  <?php get_search_form(); ?>

  <div class="suggested-keywords">
    <h3>おすすめキーワード</h3>
    <ul>
      <?php
        $keywords = array('最新記事', 'カテゴリ一覧', 'お問い合わせ', '人気記事', 'WordPressカスタマイズ');
        foreach ($keywords as $keyword) {
          echo '<li><a href="' . esc_url(home_url('/?s=' . urlencode($keyword))) . '">' . esc_html($keyword) . '</a></li>';
        }
      ?>
    </ul>
  </div>
</main>

<?php get_footer(); ?>

検索フォームのスタイル調整

テーマによっては検索フォームが縦長に表示されたりデザインが崩れたりすることがあります。CSSで404ページ専用のスタイルを当てることで、デザイン性を維持しながらユーザーの利便性を高められます。


.suggested-keywords ul {
  list-style: none;
  padding: 0;
}

.suggested-keywords li {
  display: inline-block;
  margin: 0 10px 10px 0;
}

.suggested-keywords a {
  background: #f0f0f0;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
}

動的に人気キーワードを表示する方法（応用）

より高度な実装としては、人気記事のタグや検索キーワードの履歴から提案ワードを動的に生成する方法もあります。たとえば、get_terms() 関数で人気タグを取得する方法があります。


$tags = get_terms(array(
  'taxonomy' => 'post_tag',
  'orderby' => 'count',
  'order'   => 'DESC',
  'number'  => 5,
));

foreach ($tags as $tag) {
  echo '<li><a href="' . esc_url(get_tag_link($tag)) . '">' . esc_html($tag->name) . '</a></li>';
}

これにより、アクセス数の多いタグを自動的に提案として表示できます。