みんな404エラーページをデザインしてる? WordPressテーマ「SANGO」で、プラグイン不要でカスタマイズする方法。

どうも、イラストレーター・畫家ぐわか萬朶櫻ばんだのさくらです。82朶目の記事です。

唐突ですが、みなさん自分のブログの404ページをカスタマイズしてますか?

はい。投票數とうへうすうは少ないですが、どうやらしてないみたいですね。

404ページをカスタマイズするメリットとしては、

  • オリジナリティを出せる
  • の利いたデザインだと、ユーザーの苛立ちを抑へられる
  • イレギュラーなページにもを配つてゐると思つてもらへる

 

他ブログとの差別化やユーザー目綫めせん觀點くわんてんから、カスタマイズしておいて損はなささうですね。

 

僕のブログではカスタマイズしてあるので、そのあたりのことを書いてみます。

ちなみに僕のブログのサーバはエックスサーバーで、テーマはSANGOです。

404エラーページとは?

404エラーページとはリンクされたURLが間違つてゐた場合に、サーバから「何やそのURL。ワシは知らんで」と返されるページのことです。

みなさん1度は遭遇したことあるでせう。

Word Press有料テーマ『SANGO』の公式サイトの404ページ。404ページの畫像つて、微妙に煽つてる感ある氣がするんですけど、氣のせゐですかね?

404ページつて見た人の99割が「ウゲッ」つてなるページですよね。

た人からすると「何かしらのページ」を見ようと思つてURLを辿つてきたのに、いざてみると「そんなページありませ~ん」と突つぱねられるんですから。

ユーザーからすると「そんな、ご無體むたいなっ!!!」ですね。

 

しかもこの404エラー、自分のブログの内部リンクが間違つてゐた場合は自分で直せるんですけど、外部サイトやSNSで他人が間違つたURLを書いてゐた場合は修正不可能です。

いちいち間違つた人に凸るのもムリですしね。

なので、404ページはブログを運營うんえいするにたつて必ず發生はつせいするページと言ふことができます。

 

そこで404にてしまつた人に味氣あぢけない文言だけのページを出すのではなく、何かしら一工夫した文章やデザインを入れておけば、ユーザーの「ガッカリ度」を下げる效果かうくわがあるはずです。

このブログの404ページを

覗いてみる

404ページをデザインする際のポイント

デザイン、構成的な話では

  • オリジナリティあふれるデザイン、畫像ぐわざう文體ぶんたい
  • プロフィールページへのリンクを貼る
  • 人氣にんき記事やオススメ記事などのリンクを貼る

このあたりを意識すると大丈夫でせう。

 

特にプロフィールページやオススメ記事へのリンクは有效いうかうでせう。

來訪者ユーザーは(ミスクリックでもない限り)あなたのブログの何らかの記事を見たくてやつてくるはずです。

そこでいくつかの記事(プロフィール含め)への誘導を仕込んでおくと、「ぢやあ折角だから見てやらうか」と思つてもらへるかもしれません。

Word Pressテーマ「SANGO」で404ページをカスタマイズする方法 ~サーバー篇~

僕はSANGOのテーマファイルをいぢつてカスタマイズする方法を取りました。

このやり方について、公式ページのQ&Aにも囘答があります。

外部リンク:WordPressテーマ SANGOについてのよくある質問

僕もこれを參考にしてカスタマイズしたんですが、いかんせん情報が少なすぎて苦勞しました。

以下に僕なりにやつてみた方法を紹介します。

SANGO公式サイト

最初にことわつておきますと、萬朶櫻はシステム的なことにくわんしては素人です。みなさんがこのやり方を實踐じつせんしてみて何か不具合があつても責任は追ひかねますのでご諒承りやうしようください。またもつと良い方法(プラグイン以外で)があれば教へてくださると幸ひです。

注意
SANGOのテーマをカスタマイズする際は必ず子テーマを使ふやうにしませう。

親テーマを直接いぢつてしまふと、後に面倒なことになります。

SANGOの子テーマについては公式サイトのこのページを參照

サーバーのファイルマネージャーからSANGO親テーマの「content-not-found.php」をダウンロード

エックスサーバーのインフォパネルに行きます。

「ファイルマネージャー」の「ログイン」をクリックします。

ファイルマネージャーが開きますので、ご自身のブログのドメインのフォルダをクリックします。

ドメインはブログのトップページのURL「http://★★★/」の★★★の部分のことです。

僕のブログの場合はトップページのURLが「http://wanduoying.com/」なので「wanduoying.com」ですね。

その後、「public_html」、「wp-content」、「themes」と、階層を降つていきます。

「themes」の中に「sango-theme」と「sango-theme-child」がありますね。

これはそれぞれ親テーマと子テーマのフォルダです。

2つあるフォルダの内、まづは「sango-theme」(親テーマ)の方に入ります。

 

なんかよく分からんファイルがたくさんありますね。

ちなみに僕は半分もわかりません。

 

そのよく分からんファイルの中の「content-not-found.php」といふファイルを、いつたんPC内にダウンロードします。

ファイルの名前のところをクリックすると自動でダウンロードされるはずです。

萬朶メモ

ダウンロードした「content-not-found.php」は何も編輯へんしふしないでください。ファイル名も「content-not-found.php」のまま、變更へんかう無しです。もし「content-not-found.php (1)」とかになつてたら「content-not-found.php」に戻しておいてください。

ダウンロードした「content-not-found.php」をSANGO子テーマにアップロード

 

ダウンロードしたら、いちばん上にある矢印付きのフォルダアイコンをクリックします。

すると1つ上の階層に戻ります。

「sango-theme(親テーマ)」と「sango-theme-child(子テーマ)」のところです。

「sango-theme-child」に入ります。

中は明かに親テーマよりもファイル・フォルダが少ないですが大丈夫です。仕樣しやうです。

僕の場合はカスタマイズのため、他のファイル・フォルダをアップロードしてゐるので、みなさんと中身が少し違ふと思ひます。

ここに先ほどダウンロードした「content-not-found.php」をアップロードします。

「ファイルを選擇せんたく」から保存した「content-not-found.php」を選擇せんたく。「アップロード」をクリックします。

これで「content-not-found.php」が子テーマにアップロードされました。

あなたのPC内にある「content-not-found.php」は、別に削除しても良いですが、バックアップとして置いておくといいですよ。

 

エックスサーバーのインフォパネルはもう必要ありませんので閉ぢて大丈夫です。

次からはWordPressのダッシュボードからファイルを編輯へんしふします。

Word Pressテーマ「SANGO」で404ページをカスタマイズする方法 ~ダッシュボード篇~

WordPressの「テーマ編輯」で「content-not-found.php」を編輯。

いつものダッシュボードから「外觀ぐわいくわん」→「テーマの編輯へんしふ」を選びます。

さきほどアップロードした「content-not-found.php」があるはずです。

クリックすると「content-not-found.php」の中身が編輯へんしふできるやうになります。

上の畫像ぐわざうでは、だいぶ編輯へんしふが進んだ状態です。

みなさんが今開いてゐるファイルとは内容が違ひます。

萬朶メモ

僕はこのまま直接書き込みましたが、外部エディタ(メモ帳など)を使ふのも大丈夫です。

また重要なパラメータを改變かいへん、削除してしまつてどうにもならなかつた時は、バックアップで取つておいた「content-not-found.php」から復元してください。

「content-not-found.php」内容

オリジナルのファイル内容はこちら。

content-not-found.php

すごい長いですが、構造がわかれば大したこと無いです。

具體的なカスタマイズ

どこをどう弄ればいいのか、いくつかのブロックに分けて説明します。

content-not-found.phpのタイトル部分

/*①*/
タイトル横の水滴マークのことです。不要なら削除しても大丈夫です。

/*②*/ /*③*/
タイトルです。「記事が見附からなかつた場合」と「ページが見附からなかつた場合」の2種類あります。僕はデザインの都合上、削除しました。

 

content-not-found.phpの畫像部分

/*①*/
404で使用する畫像ぐわざうを指定します。デフォルトでは猫の畫像ぐわざうになつてゐます。

萬朶メモ

これを差し替へる場合は、差し替へる畫像ぐわざうをライブラリーにアップして、以下のやうにコードを書き替へます

<img src=”<?php echo get_template_directory_uri() . ‘/library/images/notfound.jpg’; ?>”>
↓↓↓
<img src=”画像のURL”>

公式ページのQ&Aにも同じ文言がありますので、ご參考さんかうにどうぞ。

外部リンク:WordPressテーマ SANGOについてのよくある質問

/*②*/
畫像ぐわざうの中心に表示される「404」の文字です。不要なら削除しても大丈夫です。

 

content-not-found.phpのページ本文

/*①*/
キーワード檢索けんさくで1件もヒットしなかつた場合の文章。

/*②*/
記事が未投稿の場合の文章。

/*③*/
削除された記事、もしくは打ち込んだURLが間違つてゐた場合の文章。

萬朶メモ
/*①*/ /*②*/ /*③*/ は條件でうけん分岐で違ふ文章が表示されます。僕はデザインの都合上、全部文章を同じにしてゐます。

/*④*/
檢索けんさくフォームを呼びだします。この記述を消すと檢索フォームが消えます。

/*⑤*/
カテゴリー一覽を呼び出します。この記述を消すとカテゴリー一覽いちらんが消えます。

/*⑥*/
「ホームに戻る」ボタンを呼び出します。この記述を消すとボタンが消えます。

 

これらの部分をご自身のブログに合はせてカスタマイズしてみてください。

萬朶櫻の場合

最後に僕の404ページのを載せておきます。

萬朶櫻404

まとめ

404ページをカスタマイズするメリットは

  • オリジナリティを出せる
  • の利いたデザインだと、ユーザーの苛立ちを抑へられる
  • イレギュラーなページにもを配つてゐると思つてもらへる

デザイン、構成的な話では

  • オリジナリティあふれるデザイン、畫像ぐわざう文體ぶんたい
  • プロフィールページへのリンクを貼る
  • 人氣にんき記事やオススメ記事などのリンクを貼る

この記事では404ページのカスタマイズ方法について、僕が分かる範圍はんゐで説明してみました。

もうあなたのブログは、URLを間違へた訪問者ユーザーを門前ばらひすることは無いでせう。

 

さあ、みなさんも素敵な404ライフを!!!

 

▼ブログ關係くわんけい關聯くわんれん記事

180609_e_Show-Article-Map内部リンク2【WordPress】Show Article Mapを使へば、ブログの内部リンクを俯瞰できる!【プラグイン】 【提供終了】ピクシブのブログパーツが表示されなくなつたので、その對策【WordPressデフォ機能のみ】