AFFINGER4の404エラーページのカスタマイズとサイドバーの非表示

投稿日:2016年5月8日 更新日:

 

インターネット上で指定のURLをクリックすると目的のページではなく「Not Found」や「404エラー」などの文言が表示されるケースがあります。これらは「404エラーページ」と呼ばれ、おもに「URLの変更」「ページの削除」などによって引き起こされます。

一般的なWordPressテーマであれば、あなたの運営するサイトでも同様のことが起こります。

この記事では「404エラーページ」について「訪問者のサポート」と「AdSense禁止事項」の二点の改善策を提示したいと思います。

 

「訪問者のサポート」の意義

AFFINGER4の場合、「404エラーページ」に以下の文言が表示されます。

Not Found 
申し訳ありません。お探しのページはありませんでした。

簡潔でわかりやすいですが、せっかく訪れてくれた閲覧者の期待が放っておかれたままでちょっとさびしいですね。

そこで閲覧者につぎのアクションをうながし、移動した記事あるいは同様の情報を含む記事を発見してもらえる好感度の高い「404エラーページ」したいと思います

最後に手をつくすことで、目的のページが見つからなくてもよい印象をもって離脱してもらおうというのが狙いです。

またこれは訪問を回遊につなげ滞在時間を伸ばす効果や直帰率を下げる効果もあります。SEO的にも有効と多くの先輩方が指摘しているところです。

 

「AdSense禁止事項」とは

AdSenseヘルプページでは

コンテンツを含まないページ(手続き完了ページ、離脱ページ、ログインページ、エラーページなど)に広告を掲載することは許可されません

とあります。

AFFINGER4のデフォルトの「404エラーページ」ではサイドバーやフッターが表示される仕組みです。もしもその場所にAdSense広告を配置している場合、AdSenseの禁止事項に抵触し、ペナルティを課せられる可能性があります。

そらよりブログの場合「サイドバートップ」に「カスタムHTML」ウィジェットでAdSenseの「リンクユニット」広告を表示しています。

404erroradsense

「404エラーページ」の特定のコードを削除することでサイドバーやフッターを非表示にしペナルティを回避したいと思います。

 

カスタマイズするファイルと記述

404.php

AFFINGER4の親テーマから「404.php」ファイルを探します。これをコピーし、コードをカスタマイズしたものを子テーマに入れます(詳細は後述)。

404errorcopy

 

「404.php」ファイルを開き「訪問者のサポート」のため①の部分を変更(詳細は後述)。また「AdSense禁止事項」のため必要に応じ②「サイドバー」、③「フッター」の記述を削除します。

404erroroya

 

カスタマイズのための準備

初心者の方のため、カスタマイズの準備と子テーマについて解説しておきます。ご存知の方はこの項をスキップしてかまいません。

「404.php」ファイルを編集するのはダッシュボード>外観にある「テーマの編集」が最も簡単ですが、ここではFTPソフト(無料ソフト「FFFTP」)、テキストエディタソフト(無料ソフト「サクラエディタ」)を使用しています。

このほか契約サーバーにログインしファイルを取り出す方法もあります。

 

スポンサーリンク

 

子テーマを使った編集方法

「404.php」ファイルの編集は親テーマで行わず、親テーマからコピーしたものを編集後、子テーマに入れます。こうすることでテーマのバージョンアップの都度書き換える必要がなくなり便利です。

ただしまれに「404.php」ファイルに大幅な変更が加えられる場合があるので、バージョンアップされたら正しく表示されるかチェックすることをおススメします。

子テーマを使用する場合、作業ステップを整理するとつぎの三つとなります。

①親テーマから404.phpファイルをコピー

②デスクトップにペーストし編集

③編集後の404.phpファイルを子テーマにペースト

順を追って解説します。

 

①親テーマから404.phpファイルをコピー

親テーマはドメイン名のフォルダの中に格納されている「publick_html」フォルダ>「wp-content」フォルダ>「themes」フォルダをたどった中にあります。

 

「affinger4」を開くと赤枠で囲んだ位置に「404.php」ファイルがあります。まずこれをコピーします。

 

404errorcopy

 

②デスクトップにペーストし編集

コピーした404.phpをいったんデスクトップにペーストします。これを編集すればデフォルトの状態のファイルは親テーマに残されているので、たとえ間違ったコードを記述してしまっても安心です。

 

「訪問者のサポート」のカスタマイズ

そらよりはデフォルトをつぎのように変更しました。

404errormihon2

実際のそらよりの404エラーページはhttps://sorayori.com/の後ろに任意の数字を入れて検索するとご覧いただけます。

大きな変更点は二つです。

A.ビジュアルでやさしく対応

訪問された方は目的のページにたどり着けず不便で不快で不満です。まずはこれを解きほぐさなくてはなりません。そらよりはちょっとオチャメなイラストでお詫びの気持ちと和みの雰囲気を演出してみました。

B.つぎのアクションを提案

初めて訪れる方はそらよりのサイトの構造をまったくご存じありません。目的のページがないとなれば、すぐ離脱してしまうのは当然でしょう。そこで引き止め策として目的のページを探し出す方法を提案します。

 

スポンサーリンク

 

コードを書き換える

具体的な編集方法を解説します。「404.php」ファイルのデフォルトのコードは次のようになっています。ここでは①の部分の変更の詳細を解説します。

404erroroya

 

以下、部分的に順を追って解説していきます。

 

【タイトルとリード文と画像】

<h1 class="entry-title"> 任意の文言 </h1>
<p>
いつもそらよりをご覧いただきありがとうございます。大変申し訳ございません。アクセスしようとしたページはすでに削除されたか、URLが変更されたようです。以下の方法で、目的のページが見つかる可能性があります。
</p>
<div align="center">
<img src="画像のURL" alt="画像の代替テキスト">
</div>

タイトルは橙帯の部分に任意の文言を入れてください。そらよりはイラストの文字がメインの日本語タイトルとなっているので、ここは英文を使っています。

下の橙帯の部分は導入の文言です。こちらも任意に設定してください。

画像はご自分で用意する必要があります。著作権フリーの写真やイラストを無料で提供してくれるサイトがあるので利用すると便利です。LINKSのページでもご紹介していますがphotoAC(写真AC)が日本向けの素材が充実していておススメです。

画像が用意できたらWordPressのダッシュボードで「メディアを追加」しましょう。「メディア」の編集画面で「画像のURL」は取得できます。

なお黄帯は画像をセンターに配置するための記述です。

 

つぎにアクションの提案です。ご自分のサイトの構成によって項目を設定してください。

 

【「ホーム」画面を表示する】

<h2>「ホーム」画面を表示する</h2>
<p>下の画像をクリックし、新しいタブで「ホーム」画面を表示します。</p>
<div align="center">
<a href="リンク先"><img src="画像のURL" target="_blank" alt="画像の代替テキスト"></a>
</div>

そらよりブログはAdSense広告をサイドバーに掲示しているため「404エラーページ」でサイドバーを非表示にしています。

しかしサイドバーはナビゲーションの役目を担っており「訪問者のサポート」を実行するのに不可欠です。

そこで「404エラーページ」とは別に新規ダブで「ホーム」画面を呼び出し、サイドバーを活用できるようにします。画面のスクリーンショットをボタン代わりにしています。

画像リンクの緑帯の「リンク先」は「ホーム」画面のURLでよいでしょう。必ずそのあとに「target="_blank"」があることを確認してください。これは新規タブを立ち上げるための記述です。閲覧者が説明を確認しながら操作できるようにするためです。

 

【タイトルと「人気の記事」から見つける】

以下黄帯部分は「右サイドバー~」部分の文言の文字サイズを示しています。通常の段落文字は20pxに設定してあるので、アクセントをつけるためにやや小さく14pxにしました。

<h2>四つの方法</h2>
<p>「ホーム」画面で、つぎの1~4の方法をお試しください。</p>
<p>&nbsp;</p>
<h3>1.「人気の記事」から見つける</h3>
<p><span style="font-size: 14px;">
右サイドバーの「人気の記事」に含まれているかもしれません。
</span></p>

 

【検索して見つける】

<h3>2.検索して見つける</h3>
<p><span style="font-size: 14px;">
右サイドバー最上部の検索ボックスに単語を入力してください。記事候補を一覧で表示できます。
</span></p>

 

【記事のカテゴリーから見つける】

<h3>3.記事のカテゴリーから見つける</h3>
<p><span style="font-size: 14px;">
ページトップのメインメニューからカテゴリーごとの記事候補を一覧で表示できます。
</span></p>

 

スポンサーリンク

 

 

【記事一覧から見つける】

<h3>4.記事一覧から見つける</h3>
<p><span style="font-size: 14px;">
「ホーム」画面の記事一覧から現在公開しているすべての記事タイトルがご確認いただけます。
</span></p>

 

そらよりの404エラーページの全コード

以上をまとめると次のようなコード(Aパターン)となります。適宜差し替えてご自由にお使いください。

<h1 class="entry-title"> Not Found 404 error </h1>
<p>
いつもそらよりをご覧いただきありがとうございます。大変申し訳ございません。アクセスしようとしたページはすでに削除されたか、URLが変更されたようです。以下の方法で、目的のページが見つかる可能性があります。
</p>
<div align="center">
<img src="画像のURL" alt="画像の代替テキスト">
</div>
<p>&nbsp;</p>
<h2>「ホーム」画面を表示する</h2>
<p>下の画像をクリックし、新しいタブで「ホーム」画面を表示します。</p>
<div align="center">
<a href="リンク先"><img src="画像のURL" target="_blank" alt="画像の代替テキスト"></a>
</div>
<p>&nbsp;</p>
<h2>四つの方法</h2>
<p>「ホーム」画面で、つぎの1~4の方法をお試しください。</p>
<p>&nbsp;</p>
<h3>1.「人気の記事」から見つける</h3>
<p><span style="font-size: 14px;">
右サイドバーの「人気の記事」に含まれているかもしれません。
</span></p>
<h3>2.検索して見つける</h3>
<p><span style="font-size: 14px;">
右サイドバー最上部の検索ボックスに単語を入力してください。記事候補を一覧で表示できます。
</span></p>
<h3>3.記事カテゴリーから見つける</h3>
<p><span style="font-size: 14px;">
メインメニューからカテゴリーごとの記事候補を一覧で表示できます。
</span></p>
<h3>4.記事一覧から見つける</h3>
<p><span style="font-size: 14px;">
「ホーム」画面の記事一覧から現在公開しているすべての記事タイトルがご確認いただけます。
</span></p>
<p>&nbsp;</p>
<p>
引き続き、そらよりをどうぞよろしくお願いいたします。
</p>

 

スマホでの表示を変えたい場合

上記のコード(Aパターン)はパソコン表示を前提とした内容です。これをスマホで表示すると、たとえば「ホーム」画面のスクリーンショットをクリックし、新規タブを起こす操作はできません。

そのためスマホでの表示を前提とした操作手順を考え、別のコード(Bパターン)を記述しなくてはなりません。そらよりは最上部のそらよりロゴをタップしてもらうことで「ホーム」画面への誘導を図ることにしました。

<h2>「ホーム」画面を表示する</h2>
<p>下の画像をクリックし、新しいタブで「ホーム」画面を表示します。</p>
<div align="center">
<a href="リンク先"><img src="画像のURL" target="_blank" alt="画像の代替テキスト"></a>
</div>

これを以下のように変更しました。

<h2>「ホーム」画面を表示する</h2>
<p>最上部のそらよりロゴをタップし「ホーム」画面を表示します。ただし必ずつぎの「四つの方法」をご確認(できればメモ)の上、操作してください。</p>

文言を変え、divで囲んだ部分をそっくり削除しています。

このようにスマホに適したコードや文言を用い、前述のコードAと同様のコードBを作成します。

 

スマホとパソコンでの表示の分岐

コードA(パソコン用)とコードB(スマホ用)を用い、スマホとパソコンでの表示の分岐を行います。

そのコードの構造はつぎのとおりです。

<?php if(st_is_mobile()) { ?>
コードBを入力
<?php } else { ?>
コードAを入力
<?php } ?>

上記の「if(st_is_mobile())」は「もしもモバイルなら」を意味しています。また「else」は「そうでなければ」を意味しています。

上記のコードを「404.php」ファイルの①の部分と入れ替えます。

 

③編集後の404.phpファイルを子テーマにペースト

「訪問者のサポート」と「AdSense禁止事項」のための編集を終えた「404.php」ファイルはいったんデスクトップに保存します。それをコピーし、子テーマにペーストしてください。

子テーマは親テーマと同じ階層にあります。子テーマを開き、先ほどコピーした「404.php」ファイルをペーストします。

 

これでカスタマイズは完了です。任意のURLで404エラーページを表示しご確認ください。

 

スポンサーリンク

 

さらにこんな記事はいかがでしょう(広告があります)


ブログランキングに参加しています

人気ブログランキング   にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

nitori_futoncover01 1

  家が安普請のせいか、冬の寝室が寒いんです。ベッドの窓側に寝ているそらよりは右半身がとくに冷える。羽毛ふとんを使っていますが、すでにヘタり、毎年厚手の毛布を上にかけカバーしています。 &n ...

布団乾燥機アイキャッチ 2

  家電の寿命というのは突然訪れるもので、これまで便利に使っていたふとん乾燥機がこの度お亡くなりになりました。春の訪れまで、まだしばらく時間がかかりそうなこの時期、ふとん乾燥機のない生活はい ...

rakuchinpack01 3

  キッチン用保存容器の条件とは お料理上手の条件は段取り上手。手にヨリをかけて作ったせっかくのご馳走も冷めたり、伸びたりしては台無しです。美味しいものを美味しいうちにテーブルに並べるには、 ...

ikea_driver02 4

  2017年2月6日追記 「通りすがりの者」さんから次のご指摘をちょうだいしました。 イケアの家具に使われているプラスねじは「ポジドライブ」というイギリスの規格なので、日本のJIS規格のプ ...

パスワード作成 5

  パスワードがいくつもあって管理できない、と昔から言われ続けていますが、いっこうに改善される気配がありません。 でもパスワードを使う場面はますます増えています。 もしもご自分のパスワードの ...

補色01 6

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や茂みにたくさんの人の顔が写っている。心霊写真のお馴染みのパターンですが、さすがに最近はテレビで取り上げることもなくなりま ...

パーティ開け11 7

  ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べるとき、普通に開けたら、開封口の向きが気になって、ちょっと不便ですよね。横から手を入れるのも汚れて面倒。 つい ...

-WordPress, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2017 AllRights Reserved.