2016/01/31

WordPressで404エラーページをカスタマイズ!超簡単に工夫して作る方法

404 Not Found。ブログしてる人なら解っても、何で404ページに飛んだか解らない人に、自分の言葉で伝えたい♪って思いますよね。

初心者でも簡単に作れる「404ページ作成方法」をご紹介します。(WordPressのテーマ編集画面に404.phpがあるのでいけますよっ♪)

HTMLとかCSSは全く解らなくっても形になりますので、404ページへ飛んでしまったユーザーさんに、メッセージを作ってみましょう♪

かうたっくの404ページを簡単につくちゃおう♪

スポンサーリンク

404ページって何?

404ページは、既に存在しないページの事です。例えばURLを変更してそのままにしてたり、間違ったURLを記入した場合とか。後は、画像のリンク切れの時も404ページに飛んだ事もあります。

  • そもそも存在しないページってことで「FILE NOT FOUND」ファイルが見つからないという意味
    ロリポップ 404 ERROR FILE NOT FOUNDの画像編集したイメージ画像
  • 404はステータスコードと言って、サーバーが表示したくても出せません。っと伝えてる
  • 該当ページが見当たらないと知らせてる

LINKヤバイ!初心者向けで凄い解るHTTPステータスコード301.403.404.500等の意味

404ページは、ブログをオススメするチャンス!

ネットにウトいユーザーは、さっぱり意味が分からないまま即離脱。せっかく訪問してくれたユーザーは手間なだけだし、書いてる側から見ると、もったいないです。

何でこのページが表示されたか説明を入れて、興味を持ってもらえる404ページ作りにして、他こんなページはいかがでしょうか!?と、提案するのも面白いですっ。

本当に欲しいページへの道しるべを作など、初心者でも出来たらなぁ♪っと思いませんか?404ページを1から作るのは大変だけど、工夫してコピー貼り付けすれば誰でも出来ます。

404エラー画像も404デザインの画像で検索したら、結構面白いしアイデアの参考になりますよ。

404エラーページを簡単にコピペで作る方法

簡単に404ページをカスタマイズしておくと、いざ404エラーが出て、ネット初心者ユーザーが見て理解してもらいたいです。ハードルを下げるため、投稿ページで文を作成して、404.phpに貼り付ければ簡単!

WordPressの投稿画面を使えば、リンクや画像のHTMLタグを知らなくても簡単に作成できます。ビジュアル画面で書いて、テキスト画面のHTMLを貼り付ければ、「ど」の付く素人でも、仕上げられるんですっ(*✪▽✪)b

404ページのデザインで入れたいのは画像。メッセージ付きの画像を作って置くと、個性も出せますからねっ♪下記は私が作った404ページ画像です。

ごめんなさいっ(´。・д人)  ページが、見つからなくって、お手数おかけしてますっ(ノ_・。)スミマセン…

私のこだわりポイントは、お気に入りのTOPへ戻るボタンと同じ「可愛いロボット」。自分で画像合成して作りたいならオススメページを見てやってくださいね♪

LINK簡単、楽しいフリーペイントツールで、はめ込み合成画像★作成&出来た画像をGIFアニメに!

404エラーページのテンプレートの編集

Simplicity1.6.0の(404.php)でしたら、下記の通りこの部分です。

stinger5ver20141227の404.phpでしたら、

って事は、

って、事に落ち付きますっ♪

404.phpを置いてる場所は、【ダッシュボード】→【外観】→【テーマの編集画面】の【右側】にありますよっ♪

※テーマによってない場合もあり。404.phpという名前のファイルを作って、使ってるテーマの直下に入れる手もありますが。パスは/wp-content/themes/Gush4-Child/404.php

色々記載しないとダメなので、割愛します><

ワードプレスの管理画面、投稿ページで編集していけばリンクのタグなども簡単に付けられるし、画像を差し込むのだって簡単ですよねっ。

WordPressの投稿画面で404ページを簡単に作る工程ビジュアル画面

 

ビジュアル画面でいつも通りに書いて、最後に【テキスト画面】を開いて、コピーして404.phpの上述の<p>タグ内に貼り付ければ、簡単にできちゃいます!

phpファイルで、段落<br>・改行<p>をきちんと書く方法

下記は、投稿画面のテキストよりコピーして、404.phpの所定の箇所へ貼り付けた状態だけです。すると段落・改行が反映されないので、見やすさを求めてたいのなら付け足さないとダメですよねぇ♪

ビバ★りずむ 404ページ

運営者である、かうたっくに、そっと教えてみよう♪って、思った優しいあなたに。 リンク切れのページURLを入れていただけますか♪ あなたの親切に感謝します。 「ビバ★りずむ」について >【リンク切れ報告】

サンプル:このブログ「ビバ★りずむ」の404ページ

例えば。
運営者である、かうたっくに、そっと教えてみよう♪って、思った優しいあなたに。【ここで改行br入れたい。】リンク切れのページURLを入れていただけますか♪【ここで段落を変えたい】あなたの親切に感謝します。

そんな時。404.phpに手打ちします♪

こんな風に、段落pや改行brを404.phpに入れたら反映されますので、確認しながらやるとできましたっ♪文でこうして書くより、実際やったら結構簡単です。

HTMLタグが何かわからない場合は、下記を参考にしてください。

LINK初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?

初心者さんでも激簡単に404ページに個性を出して見やすいページにできますよっ♪

404ページに、アドセンス置くと違反

404ページで気を付けないといけないのは、アドセンスです。

元々テーマに備わってるアドセンスの位置なら、全く問題ないです。いじってアドセンスの位置を変えてたら、アドセンスが表示されてないか、404ページを表示させて見ないといけません。

404を表示させるには、URLの最後に自分が書いてない数字や文字列を入れてあげるとページが存在しないので、404をだせますよ。例)http://bibabosi-rizumu.com/1

ポリシー違反でペナルティーになる前に、確認して表示されてるなら、すぐに改善しておきましょう。私は、サイドのウィジェットに入れてたんですけど、思いっきりアドセンスが表示されてたので、A8.netの広告に変えました。

WordPress使ってるんで、分岐コードを入れたら良いけど、わかんないなら広告を別のものに差し替えてもよさそうです!解るかたは下記をどうぞ。

分岐タグを使い、404ページにアドセンスを表示しない方法

404ページではないのときアドセンスを表示する。というphpを記入すればOKです。

もし404ページは表示せず、他のページなら表示する。って意味です。

  • !is_404のビックリマークが入ると404ではないとき。
  • is_404ビックリマークが入ってなければ404ページで表示するとなる。

私が失敗したのは、404ページで表示しない。他のページに表示させるため、もう1つコードを入れるって思ってました。完全に勘違いで、2つアドセンスが表示されちゃって、サイドバーにA8.netの広告をいれたんです。

そんなことしなくても、404以外のサイドバーの上に広告を入れたければ、サイドバーにあるコードの前後にphpの記載を入れたら404ページには表示せず、他のページにはサイドに広告が表示されます。

直接PHPに書くと簡単ですけど、念のためバックアップをとってから編集してくださいね。具体的にやりたいけど解らない場合は相談してください。一緒に解決しましょう!

さいごに

初心者でもできる404ページ作成が楽しくって、テンションがあがるなら、カスタマイズが好きなんでしょうね!楽しいですよね♪

滅多に見られないページですけど、404ページを「バックアップをとってから」サクッと作ってみてください!意味が解らず404を出したユーザーさんにも配慮したいですからね^^

それでは、かうたっくでした!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー