ワードプレス

404 not found(ノットファウンド)のページ作り方【404 お探しのページは見つかりませんでした】【WordPress版】

404ページアイキャッチ画像

WordPressではデフォルトとして、HTTPステータスコードが404の場合「トップページ」を表示するようになっています。テーマフォルダ直下に404.phpを設置すると、優先的に404ページとして適用してくれます。

404 Not Found:該当アドレスのWebページが存在しない状態。

ページが見つからない
ページが見つからない

URLに存在しないURLを入力すると「404: ページが見つからない」状態を確認することができます。
(例)https://design-pull.com/404/test

404 not found(404エラー)が起こる原因

404エラーが起こる原因は、大きく以下の4つに分けられます。

  • URLの記載ミス
  • リダイレクトができていない
  • 旧URLのまま表示している
  • リンク切れ

404以外のエラー内容

401 Unauthorizedユーザー認証が必要なページで認証に失敗。
403 Forbiddenアクセス権限がない。
404 Not Found指定したファイルが存在しない。
500 Internal Server Errorサーバがリクエスト実行できない。
501 Not Implementedリクエストを処理できる機能がサーバにない。
503 Service Unavailableサービス利用不可。
エラー内容

404ページは「ページが見つからなかった」ことを伝える文言を入れることで、存在しないページにアクセスしてしまったと伝えるページを作る必要がります。

404ページを作るメリット

検索エンジンのクローラーが存在しないURLにたどり着いても、404ページ作っておくことで回遊することができサイトの正しい評価に繋がります。

404ページを作る流れ

  • 404ページを作成
  • HTTPステータスコードが404のときに作成したページを表示させるよう設定

必要なファイル

  • .htaccess
  • 404.php

.htaccessでのリダイレクトイメージは下記の画像の通りです。↓

404ページリダイレクト
404ページリダイレクト

■.htaccessの役割
.htaccessファイルの役割は存在しないページ「404の時にどこのページを表示するか?」を指定するための記述をします。ルートパスでの記述。

▪.htaccessのコード記述↓

ErrorDocument 404 /404.html

404.phpの役割
存在しないURLにユーザーがアクセスしてしまった時の表示ページファイル。

<?php get_header();?>

<main id="notfound">
  <h2><span class="yon">404</span><span class="not">page not found...</span></h2>
  <p>お探しのページは見つかりませんでした。</p>
  <a class="more" href="<?php echo home_url(); ?>"><span>トップページに戻る</span></a>
</main>

<?php get_footer();?>

ファイルの置き場所

▪https://ルートディレクトリ/サブディレクトリ/wp-content/themes/テーマ名

テーマのディレクトリに.htaccess404.phpを置きます。

ファイルの置き場所
ファイルの置き場所

この工程で、存在しないURLを入力した際に404.phpを読み込んで、404ページを表示させることができます。

▪404ページデザインコード参考例↓

See the Pen 404ページ by pull-design (@design90806871) on CodePen.

▪お探しのページは見つかりませんでした。↓

See the Pen 404-お探しのページは見つかりませんでした。 by pull-design (@design90806871) on CodePen.

↓WordPressの応用が身についたお勧めの本です。

一歩先にいくWordPressのカスタマイズがわかる本
一歩先にいくWordPressのカスタマイズがわかる本

▪一歩先にいくWordPressのカスタマイズがわかる本
WordPressの入門書を読みながら一度サイトを制作した方でも、もっと「ああしたい」「こうしたい」というときになって、よくわからなかったり、うまくいかなったりして困った方が意外と多いです。自社のサイトを制作するWeb担当者も、お客様の要望に応えるWebデザイナーも、読めば得する一冊です。

↓下記本も自身のWordPressの応用が身についたお勧めの本です。

WordPress標準デザイン講座 20LESSONS
WordPress標準デザイン講座 20LESSONS

▪WordPress標準デザイン講座 20LESSONS【第2版】
WordPressは、Web制作の定番スキルとなっており、かんたんなブログサイトから高機能なCMSサイトまで効率的に制作することができます。実際に作りながらスキルを身につける「実習」パートからなる、合計20のLESSONを順番にステップアップしながら学んでいけます。

book
created by Rinker
¥2,838 (2022/10/05 00:18:26時点 楽天市場調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA