WordPressのオリジナルテーマ　404ページと検索結果ページの作成

目的

• 存在しないURLにアクセスされたときの「404ページ」を表示
• サイト内検索時の「検索結果ページ」を整える
• ユーザーが迷わないよう、ナビゲーションや案内を適切にする

404ページとは？

404ページとは、「存在しないURL（ページ）」にアクセスされたときに表示されるエラーページです。

例えば、ユーザーが以下のような状況になった場合に表示されます：

• ページのURLが間違っている
• サイト内のリンク切れ（削除された記事など）
• 外部からの古いリンクにアクセスされた

404ページの作成：404.php

テーマフォルダ unnhanbur 内に 404.php を新規作成します。

<?php get_header(); ?>
<!-- ヘッダーを読み込み -->

<main class="error-page"> <!-- エラーページ専用のスタイル用クラス -->

  <!-- タイトルとメッセージ -->
  <div class="sub-title">
    <h1>404 Not Found</h1> <!-- エラータイトル -->
    <p>お探しのページが見つかりませんでした。</p>
  </div>

  <!-- エラーの詳細とリンク -->
  <div class="container center"> <!-- コンテンツを中央寄せ -->
    <p>ページが削除されたか、URLが間違っている可能性があります。</p>
    <p>
      <a href="<?php echo home_url(); ?>" class="btn">
        トップページに戻る
      </a>
    </p>
  </div>

</main>

<?php get_footer(); ?>
<!-- フッターを読み込み -->

検索結果ページの作成：search.php

テーマフォルダ unnhanbur 内に search.php を新規作成します。

<?php get_header(); ?>
<!-- 共通のヘッダーを読み込み -->

<main class="search-page has-sidebar"> <!-- 検索結果ページ用 + サイドバーありレイアウト -->

  <!-- 検索キーワードの表示 -->
  <div class="sub-title">
    <h1>「<?php the_search_query(); ?>」の検索結果</h1> <!-- ユーザーが入力した検索語を表示 -->
  </div>

  <!-- メイン + サイドバーの2カラムレイアウト -->
  <div class="container flex-area">

    <!-- メインコンテンツ -->
    <div class="main-area">
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <!-- 検索結果1件分の表示（アーカイブスタイル） -->
        <article class="archive-item">
          <a href="<?php the_permalink(); ?>"> <!-- 記事の詳細ページへのリンク -->

            <!-- アイキャッチ画像の表示（ある場合） -->
            <?php if (has_post_thumbnail()) : ?>
              <div class="archive-thumb">
                <?php the_post_thumbnail('medium'); ?>
              </div>
            <?php endif; ?>

            <!-- メタ情報（投稿日・タイトル・抜粋） -->
            <div class="archive-meta">
              <time datetime="<?php echo get_the_date('Y-m-d'); ?>">
                <?php echo get_the_date('Y年n月j日'); ?>
              </time>
              <h2><?php the_title(); ?></h2>
              <p class="excerpt"><?php echo get_the_excerpt(); ?></p>
            </div>

          </a>
        </article>
      <?php endwhile; else : ?>
        <!-- 検索結果が0件の場合のメッセージ -->
        <p>検索結果が見つかりませんでした。</p>
      <?php endif; ?>

      <!-- ページネーション（複数ページがある場合） -->
      <div class="pagination">
        <?php the_posts_pagination(); ?>
      </div>
    </div>

    <!-- サイドバー -->
    <aside class="sidebar">
      <?php get_sidebar(); ?> <!-- sidebar.php を読み込み -->
    </aside>

  </div>
</main>

<?php get_footer(); ?>
<!-- 共通のフッターを読み込み -->