404ページは、存在しないページをリクエストされたときに表示されるページです。

Webサイトに必須なページですが、WordPress自体に404ページを設定する機能はありません。独自の404ページを表示するためには、テーマファイルを編集する必要があります。

当記事では、404ページの作り方について解説します。

404ページってなに?404エラーとは?などの基本的な知識を知りたい方は、以下の記事で解説してますので、先にこちらをご覧ください。

WordPressの404ページの作り方

WordPressで独自の404ページを実装するには、専用のテンプレートファイルを用意する必要があります。

こちらがなければ「index.php」が読み込まれてしまうので、不格好な投稿一覧が表示される可能性があるんですね。以下に具体的な手順をまとめてますので、順番に進めてみてください。

  • 404ページ用テンプレートの用意
  • 404.phpに表示内容を記載
  • トップに戻るリンクを設置する
  • 検索フォームを設置する

404ページ用テンプレートの用意

WordPressテーマには、URLに応じて呼び出されるテンプレートファイルが存在します。トップページなら「front-page.php」、個別投稿ページなら「single.php」などが該当しますね。

404ページの場合も、このような専用のテンプレートファイルを用意します。

404ページの場合に優先的に読み込まれるのは「404.php」という名称のファイルになりますので、「404.php」を作成してテーマフォルダに設置してください。(設置する場所はstyle.cssと同じディレクトリ)

404.phpに表示内容を記載

次は、404ページに表示したい内容を「404.php」に記入していきます。以下は、404ページを作るために最低限必要な記述になりますので、コピペして動作を確認してみてください。

<?php

/* 404.phpに最低限入れるべき内容 */

// header.phpの読み込み
get_header();

// ココに表示したいコンテンツを記載
?>
<div class="page-404">
  <h1>404 NOT FOUND</h1>
  <p>お探しのページは見つかりませんでした</p>
</div>
<?php

// footer.phpの読み込み
get_footer();

ただし、これだけだとユーザーにとって不便かもしれません。他によく使われるトップに戻るリンクや検索フォームの設置方法について解説します。

トップに戻るリンクを設置する

トップページに戻れるリンクを404ページに設置する方法をご紹介します。トップページのURLを出力するには「home_url()」関数を使って、以下のように記載します。

<?php
// トップページのURLを出力
echo esc_url( home_url( '/' ) );
?>

こちらをaタグのhref属性に記入することで、トップに戻るボタンを作成できます。

<?php

get_header();

?>
<div class="page-404">
  <h1>404 NOT FOUND</h1>
  <p>お探しのページは見つかりませんでした</p>
  <?php // トップに戻るボタン ?>
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップに戻る</a>
</div>
<?php

get_footer();

「home_url()」のより詳しい使い方については、以下に解説してますので、参考にしてください。

検索フォームを設置する

最後にWordPressのサイト内検索フォームを設置する方法についてご紹介します。検索フォームは、以下の関数で簡単に設置できます。

<?php get_search_form(); ?>

実際にテンプレートファイルに記入すると以下になります。

<?php

get_header();

?>
<div class="page-404">
  <h1>404 NOT FOUND</h1>
  <p>お探しのページは見つかりませんでした</p>
  <?php // トップに戻るボタン ?>
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップに戻る</a>
  <?php get_search_form(); // 検索フォーム ?>
</div>
<?php

get_footer();

検索フォームの構造を変えたい方は「searchform.php」を作成して、そのファイルに任意のフォームの記述を追加してください。

まとめ

今回は、独自の404ページを作成する方法についてご紹介しました。なお、「404.php」を用意せずとも、「index.php」の中で「is_404()」を使って、独自の404ページを表示させることも可能です。

このような条件分岐タグを覚えておくと非常に便利ですので、気になる方はぜひ以下もご覧ください。

404エラー関連の記事一覧

第1回:404エラーとは
第2回:404エラーの原因と対策
第3回:404ページを作る方法(当記事)
第4回:リダイレクト設定
第5回:おしゃれな404エラーデザインまとめ