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

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

 

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

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

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

 

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

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

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

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

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

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

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

 

「AdSense禁止事項」とは

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>

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

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

画像はご自分で用意する必要があります。著作権フリーの写真やイラストを無料で提供してくれるサイトがあるので利用すると便利です。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>

これを以下のようなコード(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ファイルを子テーマにペースト

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

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

 

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

 

 

ピックアップ記事(一部広告)


ランクアップに応援ください
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ 人気ブログランキング
  • この記事を書いた人
  • 最新記事

sorayori

昭和半ば生まれのおじさんです。妻と娘と猫と金魚と東京・吉祥寺にひっそり暮らしています。息子夫婦に孫娘ちゃんもいます。くらしとデジタルとこころにうるおいをお届けしたいと思っています。

人気の記事

1

最近ココナッツオイルがブームとかで、我が家にも常備されるようになりました。朝食のパンやサラダだけでなく、コーヒーに溶いて飲むというようなことをしています。たおやかな甘さが口の中に広がり、南国パラダイス ...

horeizaiinhair 2

  本格的な夏がもうすぐやってきます。みなさん暑さ対策、熱中症予防はどのように工夫していますか。 うちの娘ちゃんによると、ポニーテールが結べるくらいの髪の長さがあれば、かんたんでとってもよい ...

12本体アップ 3

  いったいどれほどの方に役立てていただけるかまったく自信がございませんが、ニッチな話題が好きなそらよりは今回噴霧器のレビューを書くのであります。(2016年5月8日追記 「使用後の洗浄」に ...

hanazo 4

「花ぞ」の花は梅 東進の「全国統一中学生テストTVCM」で、先生が板書をしながら生徒に注意をうながします。 「この、花ぞの花は梅だからな」 すると一人の生徒が手を挙げ質問します。 「なぜ桜じゃなくて梅 ...

rakuchinpack01 5

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

leplus01 6

  いままで900円台のイヤフォンを使っていた輩が、音がどうのこうのと申し上げるのは誠に恐縮なのですが、いやハイレゾイヤフォンの音の良さったらすごかったです。   スポンサーリンク ...

aircon_kojihikomi 7

  もう20年近く使ってきたエアコンが、この夏動かなくなりました。エアコンの買い替えはシーズンが替わる11月、それも水曜日が安いと耳に挟んだので、このたびちょい古な2016春夏モデルを購入し ...

EGT260DX01 8

50対1を守らないとどうなるか? 新規に購入した草刈機の最初の使用時に、間違って25対1の混合燃料を入れてしまいました。因果関係は不明ですが、エンジンが掛かりません。 こうした状況について推測できる範 ...

パスワード作成 9

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

pdfedit 10

無料で配布されているPDFビューア「Acrobat Reader(旧Adobe Reader)」はPDF文書の表示、検索、印刷、テキストやフォームの入力、注釈機能の使用が可能です。 しかし画像を挿入・ ...

スプレー容器 11

春夏秋冬、汗っかきさんにとって気を緩めてよい季節なんてありませんよね。朝夕と昼の温度差が激しかったりしようものなら、うっかり服装のチョイスをまちがえ、外出先で大汗をかくということしばしばです。 そんな ...

sentakki_door03 12

  歳の瀬に朝から困ったことが起きました。洗濯機のドアが開かなくなってしまったのです。 2008年に購入したPanasonicのドラム式洗濯機NA-VR1200Lという機種です。購入してから ...

-AFFINGER, WordPress, セレクトワード, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2018 All Rights Reserved.