ゆるくはじめるWordPress.

WordPressで404ページを作ろう

not-found-top

サイト内に存在しないページにアクセスがあった時に表示される404ページ。不要なページを削除したり、パーマリンクの設定を変更した時など、中身の無い古いURLへもリンクやブックマークからアクセスがあるかもしれません。
訪れてくれた人がNot foundページに辿り着いてしまっても404ページをちゃんと作っておけば他のページへ誘導する事もできますね。今回はそんな404ページの作り方を簡単にまとめてみました。

404ページの作り方

404.phpを用意する

テーマフォルダ内に404.phpが無い場合はテキストエディタなどで新規作成してテーマフォルダの中にアップロード。文字コードは忘れずUTF-8のBOMなしで。


404.phpの中身を書き込む

外観>テーマの編集から404.phpの中身を編集します。他のテンプレートファイルと同じ様にヘッダーやフッターをインクルードして、コンテンツ部分にはページが見つからなかった事を伝える文面と、トップページへのリンクを入れてみます。

404.phpの例

<?php get_header() ?>
<div class="content">
  <p>お探しのページが見つかりませんでした。<br>
  <a href="<?php echo esc_url( home_url() ); ?>">TOPページへ戻る</a></p>  
</div><!--content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

あとは画像を付けたり、サイト内の検索フォームや人気記事一覧を入れてみたりお好みで。
最後にファイルを更新で保存。これで存在しないページにアクセスがあった場合404.phpの内容が表示されるようになります。


ページを確認する

404ページの確認はhttp://○○○.com/404とか適当に存在しないURLを打ち込めばOK。自分が設定した通りの表示になっていれば完成です。


エラーページに広告を貼ってはダメ

Googleアドセンスなどの広告は、規約でエラーページへの設置が禁止されていることがあります。広告入りのサイドバーをそのまま404ページにインクルードするとポリシー違反になる可能性があるので、しっかり規約を確認しておく事。
404ページだけ表示を除外するなら下のように!付きで条件を指定しておけばOK。

<?php if( !is_404() ): ?>
    <!-- 広告 -->
<?php endif; ?>

.htaccessを編集する

Codexにこのような事が書かれていました。

デフォルト設定では、WordPress が特定のページを探すことができなかった場合、404.php ページを探します。しかし、WordPress が気づく前に、ウェブサーバーがこの問題に遭遇することがあります。この場合でも、ウェブサーバーのカスタム 404 エラー処理を設定することで、訪問者に 404.php テンプレートファイルを返すようにできます。
404エラーページの作成 – WordPress Codex 日本語版

つまりエラーが出ても404.phpが表示されないケースもあるようなので、その対策として.htaccessに以下を書き加えます。

# 404
ErrorDocument 404 /index.php?error=404

.htaccessはルートディレクトリ内にあります。# BEGIN WordPress# END WordPressより下に書き込んでおきましょう。.htaccessは設定を失敗するとサイトが表示されなくなったりするので編集前にバックアップを取っておくことをおすすめします。


404ページのデザイン

404ページを作るにあたって、色々なサイトの404ページ巡りをしておりました。
普段あまり見る機会のない404ページですが、探してみるとサイトごとにこだわりが見られておもしろかったので、メモついでに少しここに載せておきたいと思います。デザインや作り方の参考にどうぞ。

株式会社LIG

株式会社LIG404ページ

色々見た中で一番インパクトのあった404ページ。同ページ内でおすすめ記事を紹介しています。エラーページにもここまでこだわるなんて、さすがWeb制作会社という感じ。
株式会社LIG | 台東区上野にあるウェブ制作会社


WordPress.com

WordPress.com404ページ

WordPress.comの404ページ。シンプルにわかりやすく。検索フォームが用意されていて、探しているページが見つけやすいように作られていますね。
WordPress.com


JA Brisk

Brisk404ページ

困り顔な404ページ。キャラクターが謝罪していたり、悲しそうな表情をしているものもパターンとして多かった印象。
Joomla template for technology news website – JA Brisk


Cooklet

Cooklet404ページ

中身が無くなった!とか空っぽ。なイメージを使ったページもたくさんありました。スマートにパッと見で内容が伝わるデザインっていいですよね。
Recipes, dishes, meal ideas. Community, social cooking, Top Chef – Cooklet


Kochatelier Berlin

Kochatelier Berlin404ページ

サイトの内容と絡めたイメージを利用しているパターン。こだわりのある404ページだとページが見つからなかったガッカリ感も半減する気がします。
Aktuelles aus der Kochschule in Berlin Mitte | Kochatelier Berlin – Die Kochschule in Berlin


スポンサーリンク

公開日: