WordPressの404エラーページをデザインして作成する方法

Wordpressの404エラーページをデザインして作成する方法

どうも、ごりょんさんです。

今回はWordpressのブログで表示される404エラーページを個性的にデザインして作成する方法を紹介したいと思います。

先日、WordPressでブログを作成してしばらく経ちました。ところが全くアクセスが無いので、どうしたものかと考えて、ネットでアクセスを増やす方法を調べてみました。

どうやら Google ウェブマスターツール に登録して、SEO対策をする事が基本という事が分かったので、Google ウェブマスターツールに登録してみました。

グーグル ウェブマスターツールの登録方法と使い方やGoogle XML Sitemapsのダウングレード方法
こんにちは、ごりょんさんです。 今回はGoogleでの検索結果で、サイトのパフォーマンスを監視や管理できるツール Google(グーグ...

しばらくして、Google ウェブマスターツール(現在ではSearch Consoleに名称が変更されています)にアクセスしてみました。すると、あるブログで1件の警告を発見。

Wordpressの404エラーページをデザインして作成する方法

クリックしてみると、HTTPステータスエラーがあるという事でした。

サイトマップの URL のサンプルをテストいたしましたところ、HTTP ステータス エラーが原因で、Googlebot が一部の URL にアクセスできないことがわかりました。 有効な URL は、通常どおりすべて登録されます。

その右側には、エラーページのURLが表示されていました。

Wordpressの404エラーページをデザインして作成する方法

試しにクリックしてみると、「ページが存在しません」の表示。

Wordpressの404エラーページをデザインして作成する方法

以前に、公開していた記事を削除したことが原因で、404エラーになりWeb上に残っているみたいです。

ワタシはWordPress初心者なので、詳しい事はイマイチよく解りませんが、このままではSEO的に良くないみたいなので、404エラーページをカスタマイズ して行きたいと思います。

スポンサーリンク

そもそも404エラーページとは何?

では、404エラーページとは、一体どういう意味なのでしょうか?

あなたは何か情報を知りたい時などは、インターネットで検索すると思います。そこで、目的のページを見つけてクリックすると

ページが存在しません 404 NOT FOUND 記事は見つかりませんでした。

こんなページを見かける事があると思います。この状態が 404エラーページ です。

404エラーページが作成される原因は大きく分けて3つあります。

  • 以前はページとして活用されていたが、現在はそのページは削除されてしまっている。
  • URLを打ち間違えて表示された。
  • リンク切れページ(内部リンク)をクリックした。

このような原因が考えられます。

有益な 404 ページとは

  • ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく魅力的な言葉を使用します。
  • 404 ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にします。
  • 最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。
  • ウェブサーバーが実際の 404 HTTP ステータス コードを返すことを確認します。  引用元:Google

分かりやすくまとめると

  • 404ページを検索ユーザーに対して、ページが見つからない事をやさしく伝えてね~。
  • 404ページは装飾しないで他の記事と同じ感じにしてね~。
  • 人気記事やトップへのリンクを作成しといてね~。
  • 実際にステータス コードを確認しといてね~。

とまあこんな感じなのではないでいょうか。

では、実際にWordpressで404エラーページをデザインして作成して行きましょう。なお、ワタシがWordpressで使用しているテーマはSimplicityです。

親テーマの404テンプレートを子テーマのテンプレートにコピーする

レンタルサーバーを使う方法

まずはレンタルサーバーへログインします。ワタシはFUTOKAでレンタルサーバーを借りているので、FUTOKAのサイトへログイン➝ファイルマネージャと続きます。

大容量・無制限・低価格レンタルサーバーFUTOKA

「public_html」➝404ページを作成するブログ➝「wp-content」➝「themes」➝「simplicity-child」と進んで行きます。

ページ左上の「New File」をクリックして、新しいファイル「404.php」を作成します。

Wordpressの404エラーページをデザインして作成する方法

「404.phpファイル」を右クリック、「Edit」をクリックします。そこにSimpliCityの親テーマ内の「404テンプレート(404.php)」をコピーして貼り付けて、最後に右上の「Save」をクリックします。

Wordpressの404エラーページをデザインして作成する方法

FTPソフトを使用する方法

FTPソフトを起動します。ここではFFFTPを使っています。親テーマ(simplicity)内の「404.php」をローカル(パソコンのデスクトップ等)に保存します。TeraPadでファイルを開き、404エラーページをカスタマイズ後に子テーマ(simplicity-child)にアップロードします。

404エラーページ内の画像とテキストを変更する

初めに変更する画像をメディアにアップロードしておきます。

Wordpressの404エラーページをデザインして作成する方法

ダッシュボード➝外観➝テーマの編集➝404テンプレートと進みます。

ここで3箇所を変更していきます。(クリックで拡大します。)

クリックで拡大
Wordpressの404エラーページをデザインして作成する方法

①赤枠の[“”]の中の画像を先程アップロードした画像に変更します。

②「ページが存在しません」の個所を好きな文章に書き換えます。

③Topページへのリンクと誘導文に変更します。

こんな感じにカスタマイズしました。

 
クリックで拡大

Wordpressの404エラーページをデザインして作成する方法

変更後の404エラーページです。訪問者にページが削除またはURLが変更された事を伝えて、トップページへのリンクを表示しました。

Wordpressの404エラーページをデザインして作成する方法

WordPressの404エラーページをデザインして作成する方法のまとめ

Simplicityの親テーマ内の「404.phpファイル」を、子テーマにコピーするだけで、初心者でもオリジナルの404エラーページの作成が可能になります。こうする事で訪問者の混乱を防げるし、SEO的にも有効的になると思います

WordPressの無料テンプレートのSimplicityでは、初心者には難しい PHPやCSSといったコードをいじらなくて良いので、比較的簡単にカスタマイズが可能です。

スポンサーリンク

シェアする

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です