初心者でも出来た!Simplicityで404エラーページを自分らしくカスタマイズ!

img_0 (4)

皆さんは、「404エラーページ」についてご存知でしょうか?

きっと誰もが見たことあるだろう、このようなページです。

スクリーンショット 2016-03-14 23.24.46

スポンサーリンク
トップページ 広告W336×280

404エラーページとは?

わかりやすく言うと、「前は存在していたけど、今は削除されて存在しないページ」のことを言います。

わたしは先日、パーマリンク(URL)を変更したことにより、たくさんの404エラーページが出来てしまいました。

プラグインでリダイレクト出来た分は良かったのですが、中にはリダイレクト先となるページがなくて(公開はしたものの削除した記事など)リダイレクト出来なかったページもありました。

エラーにさよなら!Redirection(リディレクション)/WordPressでリダイレクトする簡単手順
当サイトはWordPressで運営しています。先日、SEO対策も兼ねてパーマリンク(URL)を変更しました。パーマリンクは、サイトを運営して...

そうすると、もし誰かがそのページを開いてくれたときに上記のようなエラーを返してしまうことになります。

せっかくページを開いてもらえたのに「エラー」を返してしまうなんて、なんだかとっても失礼で嫌な気持ちになりますよね( ; _ ; )

また、開いた方も損した気持ちになると思います。

わたしだったら、なります(。-_-。)

なので、この404エラーページをどうにか失礼に値しないページにしたいと思ったわけです!

Googleに削除してもらえば?

わたしは最初、「404エラーページはない方が良い」と考え、そのURL自体をGoogleに削除してもらおうとしました。

ところが、調べた結果Googleとしてはこのように推奨していました。

URL 削除ツールは、機密情報が誤って公開されている場合など、すぐにブロックする必要があるコンテンツに対する最初のステップとして使用します。他の目的でこのツールを使用すると、サイトで問題が発生することがあります。

誤った情報をクリーンアップする目的でこのツールを使用しないでください(404 エラーの古いページなど)。サイトが変更されたため、インデックスに登録されている URL が古くなってしまった場合は、次回のクロール時にこのことが認識されて、古いページが自然に Google の検索結果から削除されます。すぐに更新するようにリクエストする必要はありません。

「URL 削除ツール」Google公式ページを参照する

ということで、削除をするのは良くないそうなのでやめました。

また、Googleはこのようにも述べていました。

サーバーへのアクセス権がある場合は、独自の 404 ページを作成することをおすすめします。404 ページをわかりやすくカスタマイズすることにより、探している情報の場所をユーザーに知らせたり、役に立つ他のコンテンツを提供したり、サイト内をさらに探すよう促したりできます。

ふむふむ。

自分で有益なページにカスタマイズするのは良い、ということみたいです(=゚ω゚=)

有益な404エラーページとは?

Googleがおすすめしている主な役割はこちらです。

  • ユーザーに対して、探しているページが見つからないことを明確に伝える。

  • 親しみやすく魅力的な言葉を使用する。

  • 404 ページを、サイトのその他の部分と同じデザインにする。

  • 人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加する。

「有益な 404 ページを作成する」Google公式ページを参照する

ということで、今回はこれを踏まえたページを作成してみました。

それがこちら!!!

(長過ぎて2分割。笑)

スクリーンショット 2016-03-15 6.02.39

スクリーンショット 2016-03-15 6.04.40

これで、Googleの基準は満たしていると思います。

あっそれと、404エラーページをカスタマイズするにあたって、ひとつだけ気を付けなければいけないことがあります。

それは、「404エラーページには広告を載せない」ということです。

載せていると規約違反となってしまうようなので、気を付けましょう!

ちなみに、テーマSimplicityを使用している場合、自動的にエラーページにはAdSense広告は出ないようになっているそうです。

がちょぴんさんとSimplicity開発者わいひら様の会話

実際、わたしも出ませんでした!!

本当に、わいひら様はどこまでも初心者に優しいカスタマイズを行ってくれて、感謝・感謝です( ; _ ; )

ただ、サイドバーに表示していた他の広告は表示されたままになっていたので、念の為非表示にしました。

特定のページにだけ広告を載せないようにするやり方は、プラグインで簡単に出来ちゃいます\(^o^)/

そのやり方も後半ご説明します。

それでは早速!

カスタマイズスタートです♪( ´▽`)

カスタマイズの手順

わたし自身、テーマSimplicityで行ったので、Simplicityでの手順で説明させていただきます。

他のテーマを使用されている場合、少し異なる点が出てくる可能性もありますのでご了承ください。

また、Simplicityを使用されている方も、これはSimplicityの子テーマが必要となります。

親テーマをカスタマイズしても、開発者のわいひら様がアップデートを加えた際、すべてのカスタマイズが消えて無効となってしまうからです。

まだ子テーマをインストールしていない方は、こちらからダウンロードしてください。

「Simplicityの子テーマをインストールする方法」公式サイト

子テーマをインストールしたら、始めましょう♪( ´▽`)

投稿ページで「モト」を作成する

まず、通常記事を作成するのと同じように、投稿ページにて自分好みの404ページに表示させたいページを作成してください。

恐らく、一番「個性の出る場所」かもしれません(*^o^*)

ここは自由に楽しく作成しちゃいましょう!

作成が出来たら、下書きを保存します。

子テーマに「404.php」ファイルを追加する

次に、404.phpを編集します。

まずはそこまでの行き方を載せておきます。

わたしが使用しているのがロリポップ!なので、ロリポップを例に挙げます。

サーバーの「ユーザー専用ログイン」からログインし、「アカウント情報」→「ロリポップ!FTP」→「wp-content」→「themes」→「simplicity2」へ行きます。

そこで、「404.php」を開き、中身をコピーします。

そして、今度は「themes」に戻り、「simplicity2-child」をクリックして開きます。

そこには、「404.php」のファイルはありません。

そのため、新しく作成してあげる必要があります。

「新規ファイル作成」をクリックします。

スクリーンショット 2016-03-15 3.24.33

以下のように、ファイル名を入力し、先ほどコピーした中身を貼り付けます。

スクリーンショット_2016-03-15_3_29_23 (1)

そして保存をします。

そうすると、今度はちゃんと「simplicity2-child」に「404.php」のファイルが追加されていると思います。

子テーマの「404.php」ファイルに記事の「モト」をコピペ!

先ほど投稿ページで下書き保存した文章を、「テキスト」表示で丸ごとコピーしてください。

スクリーンショット_2016-03-15_4_02_32

それを、先ほど作成した「404.php」ファイルにコピペすれば完了なんです。

簡単ですよね(*^o^*)

どこにコピペするかご説明します。

まず、最初の3行はいじりません。

<?php get_header(); ?>

<div class="post">
 <!--ループ開始-->

また、最後の3行もいじりません。

</div>
<!-- END div.post -->
<?php get_footer(); ?>

ここはちょこっといじります。

<h2 class="entry-title">ページが存在しません</h2>

  • h2(見出し2)をh1(見出し1)に変更しましょう。

こうすることによって、「ページが存在しません」の部分を、タイトルとして目立つように表示することが出来ます。

  • 「ページが存在しません」の部分に入れたい文章をコピペして入力してください。

わたしはここに、この部分を入力しています。

スクリーンショット_2016-03-15_3_52_44

あとはコピペ(*^o^*)ラクラク♪

あとは、そのすぐ下にあなたの作成したテキストのコピーを貼り付けてください♪

スクリーンショット_2016-03-15_4_22_32

そして、「保存」をしましょう。

ご自身のサイトの「404エラーページ」へアクセスしてみてください。

きちんと作成した通りに出来ていたら成功です。

404エラーページの広告を非表示にする

このやり方は、「Dynamic Widgets」というプラグインを使えば簡単に出来ます。

<注意>

プラグインをインストールする前には、必ずバックアップを取りましょう!

(プラグイン同士の組み合わせが悪い場合、サイトに影響を及ぼす可能性があるため)

BackWPup×DropboxでWordPressのバックアップを確実に取る方法
WordPressでブログを始めたら、まず1番最初に覚えた方が良いと言われているのが、「バックアップの取り方」です。せっかく時間と労力をかけ...

「Dynamic Widgets」をインストールする

「プラグイン」→「新規追加」→「Dynamic Widgets」を検索して、インストールしましょう。

スクリーンショット 2016-03-15 2.18.37

「有効化」すればすぐに使用できます。

広告を非表示に設定する

今回は、サイドバーに貼ってある広告を非表示にするやり方をご説明します。

ご自身の貼ってある広告に合わせて設定してみてください。

やり方はとっても簡単です(*^o^*)

まず、「ウィジェット」から、広告が貼ってある「テキスト」をクリックします。

スクリーンショット_2016-03-15_4_52_19

すると、1番下にこのような表示があると思います。

「一定」をクリックしてください。

スクリーンショット_2016-03-15_4_53_41

すると、このような画面になると思います。

ここで、いろいろと設定出来ます。

今回はエラーページへの広告を非表示にしたいので、こちらを選択します。

スクリーンショット_2016-03-15_4_54_07

「いいえ」にチェックし、保存しましょう。

スクリーンショット 2016-03-15 4.54.26

戻ると、先ほどの表示がこのように変化していると思います。

スクリーンショット_2016-03-15_4_52_46

これで、広告の非表示が完了しました(*^o^*)

それでは、また「404エラーページ」へ行って確認してみましょう!

見事に広告が非表示になっていると思います。

まとめ

どうでしたでしょうか?(*^o^*)

こんなにも簡単にカスタマイズ出来るなんて、正直びっくりじゃないですか?!

わたしがそうでした!!

こんなにも簡単に、しかも自己流に変えられるなんて嬉しいですよね♪( ´▽`)

SEO的には、「404エラーページが多いと嫌われる」とか「関係ない」とかいろいろな意見があるようです。

が、1番はサイトに訪れてくれた方に対してきちんとフォローが出来ていれば良いのだと思うので、今回カスタマイズのやり方を覚えることが出来て、本当に良かったです♪

また、今回参考にさせていただいたサイトはこちらです。

どうもありがとうございました♪

[初心者必見]Simplicityで404エラーページを簡単にカスタマイズしてみた

それでは、この記事を読んでいただきどうもありがとうございました!!

またお会いしましょう。

追記:

スマホで見たら、画像のサイズが大き過ぎるため変に伸びてしまってたので、画像を変更しました!!

ついでに文面もちょこっと変えました♪( ´▽`)

第二弾はこんな感じに♪

(またまた長くて3分割。笑)

  • 画像の大きさは、スマホも見ながら調節したのが良さそうです!

スクリーンショット 2016-03-15 6.50.46

  • 1枚目の画像を小さくした分、2枚目の画像を追加してみました(*^o^*)

コアラカワイイ…♥♥♥

スクリーンショット 2016-03-15 6.51.01

  • そして最後は、バッチリサイトへの誘導と、サイドバーの記事をアピール♪

スクリーンショット 2016-03-15 6.51.44

何度やっても、楽しいカスタマイズ!!

やればやるだけ慣れてきて、言葉の変更くらいなら直接phpファイルから編集出来るようになりますよ\(^o^)/

とりあえず、自分へのメモも兼ねての追記でした!!

初心者でも出来た!Simplicityで404エラーページを自分らしくカスタマイズ!
この記事をお届けした
ポントピの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
トップページ 広告W336×280
トップページ 広告W336×280

役に立ったらからシェア♪

気になるからフォロー♪

トップへ戻る