WordPressで404 Not Foundページをカスタマイズするのは意外と簡単！存在しないページに行ってしまったユーザーさんに別のページを紹介、知りたい情報・記事を追加することも可能になる、コンタクトが取れる可能性が高くなる404ページの作成方法です。
初心者も簡単に作れる「404ページ作成方法」をご紹介します。（WordPressのテーマ編集画面に404.phpがあるのでいける）
HTMLとかCSSは全く解らなくっても形になるので、404ページへ飛んだユーザーさんに、メッセージを作ってみましょう♪
404ページって何？
404ページは、既に存在しないページの事です。例えばURLを変更してそのままにしてたり、間違ったURLを記入した場合とか。後は、画像のリンク切れ、ページ内検索でヒットしなかった場合も404ページに飛びます。
- そもそも存在しないページってことで「FILE NOT FOUND」ファイルが見つからないという意味
- 404はステータスコードで、サーバーが表示したくても出せません。っと伝えてる
- 該当ページが見当たらないと知らせてる
LINKヤバイ！初心者向けで凄い解るHTTPステータスコード301.403.404.500等の意味
404ページは、記事をオススメするチャンス！
ネットにウトいユーザーは、さっぱり意味が分からないまま即離脱。せっかく訪問したユーザーは手間で、書いてる側から見るたらもったいない！
何でこのページが表示されたか説明を入れて、興味を持ってもらえる404ページ作りにして、他こんなページはいかが！？と、提案するのも面白いです。
本当に欲しいページへの道しるべなど、初心者でも出来たらなぁ♪と思いませんか？404ページを1から作るのは大変だけど、工夫してコピー貼り付けすれば誰でも出来ます。
404エラー画像も404デザインの画像で検索したら、結構面白いしアイデアの参考になりますよ。
404エラーページを簡単にコピペで作る方法
簡単に404ページをカスタマイズのハードルを下げるため、投稿ページで文を作成して404.phpに貼り付ければ簡単！
WordPressの投稿画面を使えば、リンクや画像のHTMLタグを知らなくても簡単に作成できます。ビジュアル画面で書いて、テキスト画面のHTMLを貼り付ければ、「ど」の付く素人でも、仕上げられるんですっ(*✪▽✪)ｂ
404ページのデザインで入れたいのは画像。メッセージ付きの画像を作って置くと、個性も出せますからねっ♪下記は私が作った404ページ画像です。
私のこだわりポイントは、お気に入りのTOPへ戻るボタンと同じ「可愛いロボット」。自分で画像合成して作りたいならオススメページを見てやってくださいね♪
LINK簡単、楽しいフリーペイントツールで、はめ込み合成画像★作成＆出来た画像をGIFアニメに！
404エラーページのテンプレートの編集
Simplicity1.6.0の(404.php)でしたら、下記の通りこの部分です。
<h2 class="entry-title">ページが存在しません</h2> <img class="not-found" src="<?php echo get_template_directory_uri() ?>/images/404.png" alt="404 Not Found" /> <p>お探しのページは見つかりませんでした。</p>
stinger5ver20141227の404.phpでしたら、
<h1 class="entry-title"> Hello! my name is 404 </h1> <p>お探しのページはありませんでした！申し訳ありません。</p>
って事は、
<h1 class="entry-title"> ★ここに404ページって内容の事★ </h1> <p>★ここは、メッセージを作れば良い、投稿画面でっ♪★</p>
って、事に落ち付きますっ♪
404.phpを置いてる場所は、【ダッシュボード】→【外観】→【テーマの編集画面】の【右側】にありますよっ♪
※テーマによってない場合もあり。404.phpという名前のファイルを作って、使ってるテーマの直下に入れる手もありますが。パスは/wp-content/themes/該当（子）テーマ/404.php
色々記載しないとダメなので、割愛します＞＜
ワードプレスの管理画面、投稿ページで編集していけばリンクのタグなども簡単に付けられるし、画像を差し込むのだって簡単ですよねっ。
WordPressビジュアルエディタで404ページを作る工程
ビジュアル画面でいつも通りに書いて、最後に【テキスト画面】を開いて、コピーして404.phpの上述の<p>タグ内に貼り付ければ、簡単にできちゃいます！
phpファイルで、段落<p>を書く方法
WordPress投稿画面のテキストエディタよりコピーして、404.phpへ貼り付けた状態だと段落・改行が反映されません。見やすさを求めたいのでpタグを付け足します。
「ビバ★りずむ」当ブログはわかりやすくをモットー
初心者さんにわかるページを提供したくて作ったブログですが、至らない点があるかと思います。時間をかけて勉強＆改善します。
わかりにくい事あれば、気軽に声かけてください。
- どのページの何を知りたい
- どこが不明
知ってる事は全てご回答します。分からない事は一緒に悩みます＾＾
サンプル：このブログ「ビバ★りずむ」の404ページ
404.phpに手打ちします♪
<h2>「ビバ★りずむ」当ブログはわかりやすくをモットー</h2> <p>初心者さんにわかるページを提供したくて作ったブログですが、至らない点があるかと思います。時間をかけて勉強＆改善します。</p> <p>わかりにくい事あれば、気軽に声かけてください。</p> <ul> <li>どのページの何を知りたい</li> <li>どこが不明</li> </ul> <p>知ってる事は全てご回答します。分からない事は一緒に悩みます＾＾</p>
こんな風に段落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です。
<?php if(!is_404()) :?> //ここにアドセンスのコードを入れる <?php endif; ?>
もし404ページは表示せず、他のページなら表示する。って意味です。
- !is_404のビックリマークが入ると404ではないとき。
- is_404ビックリマークが入ってなければ404ページで表示
私が失敗したのは、404ページで表示しない。他のページに表示させるため、もう1つコードを入れるって思ってました。完全に勘違いで、2つアドセンスが表示されちゃって、サイドバーにA8.netの広告をいれたんです。
そんなことしなくても、404以外のサイドバーの上に広告を入れたければ、サイドバーにあるコードの前後にphpの記載を入れたら404ページには表示せず、他のページにはサイドに広告が表示されます。
直接PHPに書くと簡単ですけど、念のためバックアップをとってから編集してください。
さいごに
初心者でもできる404ページ作成が楽しくって、テンションがあがるなら、カスタマイズが好きなんでしょうね！楽しいですよねっ♪
滅多に見られないページですけど、404ページを「バックアップをとってから」サクッと作ってみてください！ユーザーさんとグッと近くなれるチャンスでもありますからね＾＾
それでは、かうたっくでした！
Comments