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

シェアする

WordPressで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.phpに貼り付ければ簡単!

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

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

404 Not Found

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

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

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

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

stinger5ver20141227の404.phpでしたら、

って事は、

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

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

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

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

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

WordPressビジュアルエディタで404ページを作る工程

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

phpファイルで、段落<p>を書く方法

WordPress投稿画面のテキストエディタよりコピーして、404.phpへ貼り付けた状態だと段落・改行が反映されません。見やすさを求めたいのでpタグを付け足します。

「ビバ★りずむ」当ブログはわかりやすくをモットー

初心者さんにわかるページを提供したくて作ったブログですが、至らない点があるかと思います。時間をかけて勉強&改善します。

わかりにくい事あれば、気軽に声かけてください。

  • どのページの何を知りたい
  • どこが不明

知ってる事は全てご回答します。分からない事は一緒に悩みます^^

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

404.phpに手打ちします♪

こんな風に段落pやulリストliを404.phpに入れ確認しながらやるとたら反映されます。文で書くより、実際やったら結構簡単です。

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

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

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

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

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

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

404を表示させるには、URLの最後に自分が書いてない数字や文字列を入れてあげるとページが存在しないので、404をだせますよ。例)https://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ページを「バックアップをとってから」サクッと作ってみてください!ユーザーさんとグッと近くなれるチャンスでもありますからね^^

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

トップへ戻る