みんな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
<article class="notfound">

	<div class="nofound-title">
		<?php if(is_search()||is_archive()){
			echo '
			<i class="fa fa-tint fa-lg"></i>
			記事が見つかりませんでした。';
		} 
		
		else {
			echo '
			<i class="fa fa-tint fa-lg"></i>
			お探しのページが見つかりませんでした。';
			}?>
	</div>
	
	<div class="nofound-img">
		<img src="
			<?php echo get_template_directory_uri() 
			. '/library/images/notfound.jpg'; ?>">
		<?php if(is_404())echo '<h2 class="dfont strong">404</h2>'?>
	</div>

	<div class="nofound-contents">
		<?php if(is_search()): ?>
			<p>指定されたキーワードでは記事が見つかりませんでした。
			別のキーワード、もしくはカテゴリーから記事をお探しください。</p>
		<?php elseif(is_archive()): ?>
			<p>まだ記事が投稿されてゐません。以下でキーワードや
			カテゴリーから記事を探すことができます。</p>
		<?php else: ?>
			<p>お探しのページは「すでに削除されてゐる」、
			「アクセスしたアドレスが異なつてゐる」
			などの理由で見つかりませんでした。
			以下でキーワードやカテゴリーから記事を探すことができます。</p>
		<?php endif; ?>
		<?php get_search_form(); ?>
		<p>以下のカテゴリー一覽から記事を探すこともできます。</p>
		<div class="withtag_list">
			<span>カテゴリー</span>
			<ul>
				<?php wp_list_categories('depth=2&title_li=');?>
			</ul>
		</div>
		<div class="ct">
			<a class="raised accent-bc" 
				href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<i class="fa fa-home"></i> ホームに戻る</a>
		</div>
	</div>
</article>

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

具體的なカスタマイズ

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

content-not-found.phpのタイトル部分
<div class="nofound-title">
	<?php if(is_search()||is_archive()){
		echo '
		<i class="fa fa-tint fa-lg"></i> /*①*/
		記事が見つかりませんでした。'; /*②*/
	} 
	
	else {
		echo '
		<i class="fa fa-tint fa-lg"></i> /*①*/
		お探しのページが見つかりませんでした。'; /*③*/
		}?>
</div>

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

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

 

content-not-found.phpの畫像部分
<div class="nofound-img">
	<img src="<?php echo get_template_directory_uri() . '/library/images/notfound.jpg'; ?>"> /*①*/
	<?php if(is_404())echo '<h2 class="dfont strong">404</h2>'?> /*②*/
</div>

/*①*/
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のページ本文
<div class="nofound-contents">
	<?php if(is_search()): ?> /*①*/
		<p>指定されたキーワードでは記事が見つかりませんでした。
		別のキーワード、もしくはカテゴリーから記事をお探しください。</p>
	<?php elseif(is_archive()): ?> /*②*/
		<p>まだ記事が投稿されてゐません。以下でキーワードや
		カテゴリーから記事を探すことができます。</p>
	<?php else: ?> /*③*/
		<p>お探しのページは「すでに削除されてゐる」、
		「アクセスしたアドレスが異なつてゐる」
		などの理由で見つかりませんでした。
		以下でキーワードやカテゴリーから記事を探すことができます。</p>
	<?php endif; ?>
	<?php get_search_form(); ?> /*④*/
	<p>以下のカテゴリー一覽から記事を探すこともできます。</p>
	<div class="withtag_list"> /*⑤*/
		<span>カテゴリー</span>
		<ul>
			<?php wp_list_categories('depth=2&title_li=');?>
		</ul>
	</div>
	<div class="ct"> /*⑥*/
		<a class="raised accent-bc" 
			href="<?php echo esc_url( home_url( '/' ) ); ?>">
			<i class="fa fa-home"></i> ホームに戻る</a>
	</div>
</div>

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

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

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

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

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

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

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

 

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

萬朶櫻の場合

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

萬朶櫻404
<article class="notfound">
	<div class="nofound-title"></div>
	<div class="nofound-img"><img src="http://wanduoying.com/wp-content/uploads/2018/05/notfound_2.png"></div>
	<div class="nofound-contents">
		<?php if(is_search()||is_archive()){echo '<h2 class="hh hh3 main-bdr">おっと! ここは404教室だつたやうです。</h2>';} else {echo ' <h2 class="hh hh3 main-bdr">おっと! ここは404教室だつたやうです。</h2>';}?>
		<?php if(is_search()): ?>
		<p>どうやらサクラちやんは404<ruby>教室<rt>ページ</rt></ruby>で着替へ中だつたやうです。このまま<ruby>見續<rt>みつづ</rt></ruby>けるのも可哀想なので、何も言はず去つてあげませう。	</p>
		<?php elseif(is_archive()): ?>
			<p>どうやらサクラちやんは404<ruby>教室<rt>ページ</rt></ruby>で着替へ中だつたやうです。このまま<ruby>見續<rt>みつづ</rt></ruby>けるのも可哀想なので、何も言はず去つてあげませう。	</p>
		<?php else: ?>
			<p>どうやらサクラちやんは404<ruby>教室<rt>ページ</rt></ruby>で着替へ中だつたやうです。このまま<ruby>見續<rt>みつづ</rt></ruby>けるのも可哀想なので、何も言はず去つてあげませう。	</p>	
		<?php endif; ?>
		&nbsp;
		<p>サクラちやんがフリーズしてゐます。<ruby>氣<rt>き</rt></ruby>の毒なので早く立ち去つてあげませう。ここはひとつ、このサクラちやんを描いた萬朶櫻の<a href="https://goo.gl/JtDpa7">プロフィールページ</a>なんかいかがでせう。</p>
		&nbsp;
		<p>え? もう見た? これは<ruby>失禮<rt>しつれい</rt></ruby>。サクラちやんの<ruby>顏<rt>かほ</rt></ruby>が見る見る赤くなつてゐます。ずつと見てゐるのも申しわけ無いので、早く立ち去つてあげませう。えーっと、それでは萬朶櫻からのオススメ記事なんかいかがでせう。</p>
		<p>↓↓↓以前描いたイラストのまとめです。量が多いので<ruby>見應<rt>みごた</rt></ruby>へありますよ!</p>
		<p><a href="https://goo.gl/xPUc83">2017年に描いたニコフレユーザーまとめ</a></p>
		&nbsp;
		<p>↓↓↓今使つてる机のレビューです。L字デスクつて興味ありません?</p>
		<p><a href="https://goo.gl/GQgx8h">一人暮らしにL字デスクはオススメ! 使つたらメリットしかなかつたので紹介するよ!</a></p>
		&nbsp;
		<p>↓↓↓Pixiv FANBOXについての記事です。みんな案外見てくれる記事ですよ?</p>
		<p><a href="https://goo.gl/gX7QPn">ピクシブ歴9年の繪描きが書く。Pixiv FANBOXの登録方法と使つてみた感想</a></p>
		&nbsp;
		<p>え? そんな記事には興味が無い? こ、これは<ruby>失禮<rt>しつれい</rt></ruby>。さうですね…それでは<ruby>檢索<rt>けんさく</rt></ruby>で記事を探しませう。サクラちやんの肩が震へてきてゐます。さすがにこれ以上の長居は心苦しいですね。</p>
		<?php get_search_form(); ?>
		&nbsp;
		<p>え? 焦つて良いワードが思ひつらない? 困りました。サクラちやんの目から涙が溢れさうです。</p>
		<p>それでは手つ取り早くカテゴリー<ruby>一覽<rt>いちらん</rt></ruby>からも記事を探してみませう。</p>
		<div class="withtag_list">
			<span>カテゴリー</span>
			<ul>
				<?php wp_list_categories('depth=2&title_li=');?>
			</ul>
		</div>
			<p>カテゴリー<ruby>一覽<rt>いちらん</rt></ruby>からも見附からない!? ああ、もうダメだ。サクラちやん、もう泣いてしまひましたよ……</p>
		&nbsp;
			<p>しかたないですね。サクラちやんは僕が慰めておきますので、いつたんホームでお待ちください。</p>	
		<div class="ct">
			<a class="raised accent-bc" href="<?php echo esc_url( home_url( '/' ) ); ?>"><i class="fa fa-home"></i> ホームに戻る</a>
		</div>
	</div>
</article>

まとめ

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

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

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

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

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

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

 

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

 

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA