ワードプレスで404ページを作成・カスタマイズする方法2選！

ワードプレスで404ページを自分好みにしたいんだけどどうやるの？

そんな疑問を解消するためにこの記事では404ページのカスタマイズ方法を書いていきたいと思います。

記事の内容

ワードプレスブログの404ページをカスタマイズする方法
プラグインを使って404ページを作成する方法

404ページはデフォルトではテーマによって変わってくるよ

404ページはテーマで用意されている場合が多いので、最初はテーマによって変わってきます。このブログはDiverだからDiverの404ページをカスタマイズしていくけど、他のテーマでも同じような流れでできるはずです。

404ページをカスタマイズしていこう！

ワードプレスの404ページはテーマによって様々

404ページなんだけど、これはテーマによって変わってきます。というのもテーマが既に404ページを用意している場合が多くそれが表示されるからです。いくつかテーマの404ページを見てみましょう。

Diver

ハミングバード

Cocoon

ワードプレスのテーマによってデザインは様々だね

そうだね、自分のブログがどんな404ページなのかを確かめてみるといいよ

自分のブログで404ページを表示させたい場合には適当な存在しないURLをアドレスバーに打ち込んでみましょう。

ワードプレスで404ページを表示するファイル

404ページを表示しているファイルは404.phpです。このファイルがあなたの使っているテーマにも入っているのではないかと思います。例えばこのブログのテーマであるDiverならこんな感じですね。

[外観→テーマファイルエディター]から404.phpがどんなファイルなのかを見ることができる。このファイルが存在しないURLを開いたときに表示される仕組みだね。

404.phpがない場合

ワードプレスで404.phpが存在しない場合はindex.phpが表示されるようになっているはずです。なので、index.phpファイルの中身を見て確認するといいでしょう。404.phpを自分で作るのもいいですね。

ワードプレスの404ページを作成・カスタマイズする方法

404ページがどんなものか何となく分かったけど、どうやってカスタマイズするの？

404ページの作成・カスタマイズ方法は大まかに以下の3つ方法があるよ

404ページを作成する方法

自作の404ページを作成する
既存の404ページをカスタマイズする
プラグインを使って404ページを作成する

大体の人は既存の404ページをカスタマイズするっていう方法を取るんじゃないかなと思います。既に404.phpは存在する場合が多いと思いますからね。404.phpがなければ自分で作成するのがいいでしょう。

また、ワードプレスのプラグインを使って404ページを作成する方法もあります。プラグインを使う方法はコードをいじらなくていいから簡単だね。

ワードプレスで既存の404ページをカスタマイズする方法

ワードプレスの管理画面から404.phpを確認することができるので、そのファイルを自分好みに編集する方法です。

ただ直接編集するのはやめて子テーマ内に作成するといいです。

子テーマ内で404.phpを作成しよう

テーマ内のファイルを直接編集すると、テーマのアップデートなど何かの拍子にその変更内容が失われます。こういったことろ防ぐために子テーマを使うっていうのはもう知っていますよね。404ページも子テーマ内に作っておきましょう。

子テーマは本テーマと一緒に提供されている場合も多いので、「自分が使っているテーマ　子テーマ」で検索してみるといいです。

子テーマに404.phpを作成する

子テーマ内に404.phpが存在しない場合は404.phpを作成します。作成方法は何でもいいけど、この記事ではレンタルサーバーのファイルマネージャーから作成します。このブログはエックスサーバーで運営しているからエックスサーバーの管理画面を使うけど、他のレンタルサーバーでも同じように作成できます、

作成するとワードプレスの管理画面からも作成した404.phpが表示される。ここに存在しないページにアクセスした際のコードを書いていけばいいです。

既存の404ページをカスタマイズする場合は親テーマの404.phpをコピペ

既存の404ページをカスタマイズしたい場合は親テーマの404.phpをいったんコピペしてから始めるといいです。

子テーマに親テーマの404.phpを貼り付けたらカスタマイズを始めましょう。

子テーマの404.phpをカスタマイズする

404.phpをどうカスタマイズしていくかだけど、Googleはこんなことを言っていますね。

ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく平易な言葉を使用します。
404 ページを、サイトのその他の部分と同じデザイン（ナビゲーションを含む）にします。
最も人気のある記事や投稿へのリンクのほか、ホームページへのリンクを追加します。
無効なリンクを報告する方法をユーザーに提供することを検討します。
Google検索セントラル

現状の自分の404ページは全体でみるとこうなんだけど、足りない点がいくつかあります。

足りない点

親しみやすく平易な言葉でない
最も人気のある記事などのリンクがない

上記の点を新たに404ページに追加していきます。

404ページをカスタマイズする

404ページに欲しい情報を追加していきましょう。今回は文言の変更と人気記事やカテゴリ別の人気記事を表示させてみました。

404ページに表示させたい内容を書いていっただけですね。

ある程度コードが分からないと作れないね

そうだね、HTML/CSSと少しのPHPの知識が欲しいところ

ちなみに上の画像で表示した人気記事は、WordPressPopularPostのコードとHTML、CSSを組み合わせて作りました。コードは雑いので自分好みにしてみてください。

<?php
//　全体の人気記事表示
$args = array(
  'range' => 'daily',
  'order_by' => 'views',
  'post_type' => 'post',
  'limit' => 10,
  'wpp_start' => '<ul class="wpp-list popularlist_404">',
  'wpp_end' => '</ul>',
  'thumbnail_width' => 120,
  'thumbnail_height' => 90,
  'post_html' => '<li style="width: 20%;">{thumb} <a href="{url}">{text_title}</a></li>'
);
wpp_get_mostpopular($args);
?>

<style>
.wrap_popularlist_404 {
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
}
</style>

もし人気記事を404ページに表示したかったらWordPressPopularPostsのコードを使うと楽でいいですね。