自作WordPressテーマ『404ページ』の作り方（コピペOK）

今回は、自作WordPressテーマに、404ページを設置する方法について解説します。

えりー

コピペで使えるコード（HTML・PHP）をご用意しました！

自作WordPressテーマ作成については、下記記事でまとめてご紹介しています。ぜひあわせてご覧ください！

あわせて読みたい

自作WordPressテーマを作ろう【過去記事まとめ】

404ページとは：ページが無かった時に表示されるページ

404ページとは、ページが無かった時に代わりに表示されるページのことです。

えりー

404とはエラーの番号のことです。

自作WordPressテーマを作成する際にも、この404ページを用意しておく必要があります。

自作WordPressテーマ 404ページの作り方

早速、404ページを作っていきましょう。

1.「404.php」というファイルを作り、WordPressテーマフォルダ内に保存

「404」という名前のファイルを作成し、PHP形式でWordPressテーマフォルダ内に保存してください。

つまり、「404.php」というファイルを作ります。

2.ヘッダー（get_header）とフッター（get_footer）を記載

ここからは、404.phpを編集していきます。

1<?php get_header(); ?>
2<!-- ここにコンテンツを記載 -->
3<?php get_footer(); ?>

まず、get_headerとget_footerでヘッダーとフッターを呼び出します。

3.コンテンツを記載

1<?php get_header(); ?>
2<!-- #notfound -->
3<section id="notfound">
4  <h2 class="ttl">404</h2>
5  <div class="txt">
6    <p>お探しのページは見つかりませんでした。</p>
7    <p class="link"><a href="/">トップページへ戻る</a></p>
8  </div>
9</section>
10<!-- /#notfound -->
11<?php get_footer(); ?>

上記はあくまで一例ですが、２～10行目にコンテンツを記載しています。

コピーして必要に応じて編集してお使いください。

えりー

あとはUPして完了です！

CSSはサイトによって変わりますので、ここには記載していません。

4.「404ページ」が表示されるか確認する

UPしたら、404ページが正しく表示されるか確認しましょう。

404ページはURLが間違っていないと表示されないページなので、まずは正しいURLでページを表示し、URLの一部を変えて間違ったURLにする方法がおすすめです。

間違ったURLでアクセスして、404ページが表示されれば無事設置完了です！

最後に：WordPressについてのご相談もお気軽にどうぞ！

空創デザインオフィスでは、ホームページ制作・リニューアル、WordPress導入、自分でホームページを作りたい方へのサポートなども承っております。

下記ボタンよりお気軽にお問い合わせください！（お見積りは無料です）

あわせて読みたい

自作WordPressテーマを作ろう【過去記事まとめ】

えりー

Web・グラフィックデザイナー / ブロガー

2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！