【解説】WordPressで404ページの作成方法

パソ君

・WordPressで404ページってどうやって作る？

こんな疑問にお答えします。

WordPressのテーマ作成にて、404ページが必要になりますよね。

でもどうやって作るのかわからない人もいるかと。

実は簡単に作成可能です！

ジト

すぐにできるよ！

ということで、この記事では「WordPressで404ページの作成方法」について解説していきます！

【解説】WordPressで404ページの作成方法

WordPressでの404ページについて、下記の順に紹介していきますね。

1つずつ見ていきましょう！

404ページとは？

404ページとは、サイト上で存在しないページにアクセスした場合に表示されるエラーページのこと。

このサイトでも存在しないURLでアクセスすると、下記画面のようになります↓

404ページを表示することで、ユーザーに対して適切なメッセージとともに、他のページへのリンクや検索フォームなどを提供することができます。
かつ、サイト内を探索しやすくできる。

ジト

ユーザー側にとって必要なページだよ！

404ページの作り方

404ページの作り方は、テーマフォルダ内に「404.php」という名前のファイル作成することです。

存在しないページにアクセスしたら、この「404.php」が表示されるようになります。

ちなみに「404.php」がない場合、テンプレート階層的に「index.php」が表示されますよ。

404ページのコード記述例

あとは「404.php」にコードを記述すれば作成完了。

コードに入れる例としては下記な感じですね↓

ユーザーエクスペリエンスを向上させるための記述をしましょう。

例としてこんな感じ。

<?php get_header(); ?>

  <main class="l-main">
    <div class="error-page">
      <h1 class="error-page__title">お探しのページが見つかりませんでした。</h1>
      <div class="error-page__thumbnail">
        <!-- 404エラーページ用のサムネイル画像など -->
      </div>
      <p class="error-page__detail">
        お探しのページは「すでに削除されている」、「アクセスしたアドレスが異なっている」などの理由で見つかりませんでした。
      </p>
      <div class="error-page-btn">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="error-page-btn__link">トップページへ戻る</a>
      </div>
      <!-- 
        検索フォーム
        お問い合わせへのリンクなど
      -->
    </div>
  </main>

<?php get_footer(); ?>

これで404ページが完成しました！

【解説】WordPressで404ページの作成方法：まとめ

ジト

404ページの役割と作り方を覚えておこう！