WordPress

AFFINGERに魅力的な404エラーページを!カスタマイズとアドセンス非表示について

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

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

この記事ではWordPressテーマ「AFFINGER」の「404エラーページ」を訪問者のサポートで魅力的にするカスタマイズとGoogleアドセンスの非表示設定についてシェアしたいと思います。

 

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

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

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

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

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

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

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

 

「アドセンス禁止事項」とは

アドセンスヘルプページでは

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

出典:アドセンスヘルプ「広告の配置に関するポリシー>適切な広告配置>手続き完了ページ、離脱ページ、ログインページ、エラーページでの広告掲載」

とあります。

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

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

404erroradsense

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

AFFINGER5では「404ページ」のウィジェット利用でアドセンス広告のみが自動で非表示となります

 

AFFINGER5の404エラーページのカスタマイズ

AFFINGER5には404エラーページ専用のウィジェット項目が用意されています。

たとえばAFFINGER5にこんな404エラーページを

IT-SORAYORIでは以下のような404エラーページとなっています。赤線内はAFFINGER5のデフォルトの表記です。カスタマイズしなければ、この表記のままです。

そこにお探しのページを見つけてもらうヒントとなる文章を加えます。実物はブラウザの新規タグでhttps://it.sorayori.com/の後ろに任意の文言を加えることで確認できます。

wordpress_404_180710_3

 

カスタマイズ方法

step
1
「404ページ」を表示

ダッシュボード「外観」>「ウィジェット」でサイドバー項目「404ページ」を表示します。

 

wordpress_404_180710

 

step
2
「カスタムHTML」ウィジェットを挿入

[1]サイドバー項目「404ページ」のを開き、[2]「カスタムHTML」ウィジェットを挿入。「カスタムHTML」ウィジェットに表示したいタグを記述します。

 

wordpress_404_180710_2

 

step
3
タグ見本

前述の見本はつぎのタグ表記となっています。

よろしかったら、ぜひご利用ください。文言はご自由に変更ください。緑色の部分は、差し替える必要があります。

なお画像リンクからは「target="_blank"」の記述は外してあります。AFFINGER5(WING)ver20180621とWordPress 4.9.7 の組み合わせの「404ページ」のウィジェットでは機能しません。

 

AFFINGER4の404エラーページのカスタマイズ

親テーマの「404.php」ファイルをコピーし、変更を加えたものを子テーマに置く方法をご紹介します。以下は2016年5月そらよりブログに掲載した記事であり現在のAFFINGER4では正しく表示されない可能性があります。またそらよりブログは現在AFFINGER5を使用しているためここで設定した404ページは表示されません。

 

ファイルごとカスタマイズするための準備

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

「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

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

以下①について順を追って解説していきます。

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

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

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

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

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

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

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

 

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

 

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

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

そらよりブログはアドセンス広告をサイドバーに掲示しているため「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パターン:スマホ)を作成しなくてはなりません。

そしてコード分岐のタグで挟みコード(Aパターン)とコード(Bパターン)を記述(詳細は後述)します。

 

スマホでの表示は最上部のそらよりロゴをタップしてもらうことで「ホーム」画面への誘導を図ることにしました。

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

これを以下のようなコード(Bパターン:スマホ)に変更しました。

<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ファイルを子テーマにペースト

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

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

 

これでカスタマイズは完了です。

お役立ち記事

pdfedit 1
ipodアイキャッチ 2
Twitterスパムアイキャッチ 3
spotify_sf_size01 4
171106twittertsuchi2 5
gdpr 6
photo_gallery10 7
kensaku05 8
mymail08 9
tankrover01 10
プリンター250 11
renet01 12
spotify_1807 13
pokego161214_2 14
プロフィール表示01 15

-WordPress
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.