WordPressで独自の404ページを作る方法（プラグイン無し）

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

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

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

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

2017.01.01

2021.08.31

WordPressで404エラーが表示される原因と対策

「404 NOT FOUND」「お探しのページが見つかりませんでした」これらは存在しないページにアクセスした時に表示される404エラーメッセージです。当記事では、404エラーの基本知識に加え、原因と対策について解説していきます。 404エラーとは 404エラー（Not Found）と...

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()」のより詳しい使い方については、以下に解説してますので、参考にしてください。

2023.12.10

home_url()でWordPressサイトのURLを取得する方法！site_url()の違いも解説

WordPressのサイトURLは、一般的にトップページのURLになります。当サイトの場合は「https://tcd-theme.com」がサイトURLになりますね。当記事では、このURLを取得できる「home_url()」の使い方について解説していきます。 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」を作成して、そのファイルに任意のフォームの記述を追加してください。