そらより

おもしろいと、かわいいと、おいしいと、うれしい。

初心者だってSTINGERの404エラーページをカスタマイズして好感度をアップしたい!

      2016/12/05

 

404エラーページとは「お探しのページは見つかりませんでした」と表示されるアレ。これまではそんなのめったに表示しないんだからデフォルトのままでいいんじゃね? とタカを括っていました。ところが最近、いやいやそれは運営側のエゴじゃないの? と思うようになったのであります。

じつは参照元のリンクが切れいくつかのページを削除しまして、ああ、あのページに期待して訪問してくださった方はきっととてもガッカリしているだろうなあ、それに応対するお客様相談窓口的な404エラーページはとても大切な機能なんだなあ、ということに気付いたのです。

調べれば、せっかくの訪問を回遊につなげるきっかけ作りになり、直帰率を下げる効果もある。SEO的にも有効と多くの諸先輩方がおっしゃっています。

そこで僅かな知識ながら、自分なりにできる範囲で404エラーページの改善に取り組むことにしました。そらより同様、WordPressはまだ初心者という方のために簡単なカスタマイズ方法をご紹介します。

使用するテーマはSTINGER7です。ファイルの編集にはFFFTPなどのFTPソフト、契約サーバでのログイン、ダッシュボードからの「テーマの編集」など複数の手段がありますが、ここではFTPソフトとテキストエディタソフトを使った方法で解説します。

※「テーマの編集」が最も簡単ですが、子テーマを使っている場合、親テーマとの行き来が煩雑で、現在の編集対象を見失いがちです。そこでそらよりは視覚的に現在の作業対象がわかりやすいオーソドックスな手法をとっています。

 

スポンサーリンク

 

 

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

STINGER7の場合、404エラーページを表示するのは404.phpというファイルです。そらよりは子テーマを使っているので作業ステップは次の三つとなります。

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

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

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

順を追って解説します。

 

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

親テーマはドメイン名のフォルダの中に格納されているwp-contentフォルダからthemesフォルダをたどった中にあります。下の画像のstinger7がそれ。

404親テーマ

 

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

404デフォルト

 

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

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

 

デフォルトをどのようにカスタマイズするか

ここでデフォルトの404エラーページはどうなっているか確認してみましょう。

404エラーデフォルト

 

とてもシンプルです。そらよりはそれを次のように変更してみました。

404エラーオリジナル340

 

実際のそらよりの404エラーページはこちらからご確認いただけます。

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

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

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

B.次のアクションを回遊につなげる

初めて訪れる方はそらよりのサイトの構造をまったくご存じありません。目的のページがないとなれば、すぐ離脱してしまうのは当然でしょう。そこで引き止め策として目的のページを探し出す方法を提案します。そらよりではフリーワード、カテゴリー、タグ、「NEW POST」「人気の記事」、ホーム画面などからアプローチできることを丁寧に紹介し、サイトの“奥座敷”へと誘うようにしました。

 

スポンサーリンク
ご自宅からご贈答品まで。かに通販【北海道海鮮工房】

 

コードを書き換える

具体的な編集方法を解説します。404.phpのデフォルトのコードは次のようになっています。

404デフォルトコード

 

それを赤枠の部分だけ次のように書き換えます。以下、部分的に順を追って解説していきます。

 

【タイトルと画像】

<h1 class="entry-title"> 任意の文言 </h1>

<br>

<p><img class="alignnone size-full wp-image-1781 aligncenter" src="画像のURL" alt="画像の代替テキスト" width="画像の幅" height="画像の高さ" /></p>

<br>

<br>

<p>

いつもそらよりをご覧いただきありがとうございます。大変申し訳ございません。アクセスしようとしたページはすでに削除されたか、URLが変更されたようです。以下の方法で、目的のページが見つかる可能性があります。

</p>

<br>

<br>

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

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

画像が用意できたらWordPressのダッシュボードで「メディアを追加」しましょう。仮の新規投稿ページを作成し、そこにいったん画像を貼り、テキストモードでコードを取得し、そっくりそれを緑帯の部分に挿入します。

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

 

【検索して見つける】

<h3>1.検索して見つける</h3>

<p><span style="font-size: 14px;">
下の検索ボックスに単語を入力してください。記事候補を一覧で表示できます。
</span></p>

<br>

<?php get_search_form(); ?>
<br>

<br>

次に回遊につなげる工夫です。ご自分のサイトの構成によって自由に項目を設定してください。

黄帯は「下の検索ボックス~」の文言の文字サイズを示しています。通常の段落文字は20pxに設定してあるので、アクセントをつけるためにやや小さくしました。

青帯は検索ボックスのタグです。このままご使用ください。

 

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

<h3>2.記事のカテゴリーから見つける</h3>

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

<br>

<br>

画像のつかない基本的なパーツはこのようになります。

 

スポンサーリンク

 

【最終的にホーム画面に】

<p>
以上の方法で見つからない場合はホームをご覧ください。現在公開しているすべての記事タイトルがご確認いただけます。
</p>

<p><a href="ホームのURL" target="_blank"><img class="alignnone size-full wp-image-1780 aligncenter" src="画像のURL" alt="画像の代替テキスト" width="画像の幅" height="画像の高さ" /></a>
</p>

「以上の方法で~」の文字は通常の段落20pxサイズですから14pxの指定は入れてありません。

緑帯は先述したように仮の新規投稿ページを作成し、そこにいったん画像を貼り、テキストモードでコードを取得してください。この画像はクリックするとホーム画面に飛ぶようになっています。新規投稿ページでの作成の際に「リンクの挿入」を指定してください。

 

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

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

<h1 class="entry-title"> 任意の文言 </h1>

<br>

<p><img class="alignnone size-full wp-image-1781 aligncenter" src="画像のURL" alt="画像の代替テキスト" width="画像の幅" height="画像の高さ" /></p>

<br>

<br>

<p>
いつもそらよりをご覧いただきありがとうございます。大変申し訳ございません。アクセスしようとしたページはすでに削除されたか、URLが変更されたようです。以下の方法で、目的のページが見つかる可能性があります。
</p>

<br>

<br>

<h3>1.検索して見つける</h3>

<p><span style="font-size: 14px;">
下の検索ボックスに単語を入力してください。記事候補を一覧で表示できます。
</span></p>

<br>

<?php get_search_form(); ?>
<br>

<br>

<h3>2.記事のカテゴリーから見つける</h3>

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

<br>

<br>

<h3>3.記事のタグから見つける</h3>

<p><span style="font-size: 14px;">
右サイドバー下段のタグクラウドから記事候補を一覧で表示できます。
</span></p>

<p><img class="alignnone size-full wp-image-1781 aligncenter" src="画像のURL" alt="画像の代替テキスト" width="画像の幅" height="画像の高さ" /></p>
<br>

<br>

<h3>4.「NEW POST」「人気の記事」から見つける</h3>

<p><span style="font-size: 14px;">
右サイドバーの「NEW POST」「人気の記事」に含まれているかもしれません。
</span></p>

<br>

<br>

<p>
以上の方法で見つからない場合はホームをご覧ください。現在公開しているすべての記事タイトルがご確認いただけます。
</p>

<p><a href="ホームのURL" target="_blank"><img class="alignnone size-full wp-image-1780 aligncenter" src="画像のURL" alt="画像の代替テキスト" width="画像の幅" height="画像の高さ" /></a>
</p>

<br>

<p>
引き続き、そらよりをどうぞよろしくお願いいたします。
</p>

 

 

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

編集を終えた404.phpファイルはいったんデスクトップに保存します。それをコピーし、子テーマにペーストしてください。

子テーマは親テーマと同じ階層にあります。

404子テーマ

 

子テーマを開き、先ほどコピーした404.phpファイルをペーストします。

404ペースト

 

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

 

ちなみにSTINGER7の404.phpファイルのデフォルトサイズは467バイトです。そらよりのカスタマイズ後のファイルサイズは2600バイト。およそ6倍です。SEOに最適化されているとされるSTINGERですから、開発者様には何か意図があってこのような404エラーページとなっているはずです。もしかしたらそのファイルサイズに意味があるのかもしれません。そらよりの2600バイトは0.0025メガバイト。素人目にはぜんぜん軽いと思えるのですが…

結局、ターゲットをどこに設定し、そのITリテラシーにどう対応していくかという問題だと思います。そらよりは幅広い層の人に観てもらいたい、丁寧に対応していきたいと考えています。サイトの軽さを多少犠牲にしても、が今のところの判断です。その辺りのところはみなさん自己責任でご検討くださいませ。

 

404エラーページの一般的なカスタマイズ方法はすでに多数存在しますが、STINGER7での方法がわからず、ちょっと戸惑いました。そらよりと同じようなWordPress初心者のみなさんに、この記事がお役に立てたらうれしいです。

 

2016年9月26日追記
NyanChestさんよりこの記事にリンクを貼っていただきました。ありがとうございます。

当該ページ「404というページの話」においてアドセンス公式の「広告の配置に関するポリシー」でエラーページでの広告表示は禁止されている旨の記述がありました。

翻ってそらよりの404エラーページをチェックすると、なんとサイドバーにアドセンス広告が表示されちゃっているではありませんか。

慌ててなんだかんだ調べ、右往左往、冷や汗をかいて、タオルでふき取って、sidebar.phpをいろいろいじってみた結果、なんの成果も得られず、今朝4時までかかって、結局ジンのロックを飲んで寝ちまって、7時に起きて猫のトイレだの、床のお掃除シート掛けだの、洗濯物干しだの家事諸々をこなして、冷静になってもう一度考えてみたら、単純にサイドバーウィジェットの配置が間違っていただけでした。

そらよりはSTINGER7(あくまで現時点)を使用しています。一時、アドセンス広告が表示されないトラブルに見舞われたことがあり、その後なかなか個性的な設定をしてしまったようです。以下を修正したことで問題はすっきり解決しました。もしも同様の症状にお悩みの方はぜひチェックしてみてください。

【修正前】
サイドバーウィジェットの最上段にアドセンス広告(レクタングル300)の「テキスト」を独自に配置

【修正後】
上記の「テキスト」をそのまま「Googleアドセンスのスマホ用300px」に移動・配置

 

スポンサーリンク

 

スポンサーリンク

 

 

クリックしていただけると幸いです
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

歳の差婚250 1
「年の差婚(交際)」の最適年齢を割り出す法則が海外にあった!

数年前から「年の差婚」がブームです。人気キャスターや人気女優、人気歌手が、歳の離 ...

補色01 2
赤い点を30秒間じっと見つめてください。天井を見上げると不思議なことが!

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や ...

パーティ開け11 3
「パーティ開け」不要!スナック菓子はもっとスマートにシェアできる!!

ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べると ...

 - WordPress, デジタル

Copy Protected by Chetan's WP-Copyprotect.