ブログ404エラーページのカスタマイズ Twenty Seventeen

ブログ404エラーページのカスタマイズ Twenty Seventeen

404ページとは、読者がサイトを検索したとき、投稿ページが削除されていたり、URLが変更になっていた時に表示されるページのことで、サーバーから出されるものと、自分のサイトから出されるものの2種類あります。

今回は自分のサイトから出される404ページを編集します。

変更前の404ページ

このように
味気ないコメントが返ってきます。
これではせっかく訪れた読者も、即画面ダウンってことになりかねませんし、まして、もう一度訪れようなどとは考えませんね。

せっかくしてくださった読者が求めていることに、少しでも答えるよう努力することが必要ですし、それによりサイトのSEO対策にもなります。

404エラーページの編集

エラーページは、WP/外観/テーマ編集/404テンプレート(404.php)に有ります。編集エディタに貼ると

短いphpファイルです。
この中で以下の部分が404エラーページのコメント部分です。

<h1 class="page-title">

<?php _e( 'Oops! That page can&rsquo;t be found.', 'twentyseventeen' ); ?></h1>   </header><!-- .page-header -->

<div class="page-content">
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyseventeen' ); ?></p>

<?php get_search_form(); ?>
一番上の青色部分が、「お探しのページが見つかりません。」の部分です。e(’○○○’)は○○○を和訳して表記するという意味です。
真ん中が「こちらには何もありません。検索をお試しください。」の部分です。
下が検索ボックスです。

何を表記したいか?

左側には
M海のブログとメニューからサイトにアクセスできること。

右側には
記事の変更点と集約になった6ページへのアクセス(リンク)

以上をファイルに表わすと

<header class="page-header">
  <h1 class="page-title">
  <?php _e( 'お探しのページが見つかりません。<br/>
 <br/>
 お手数ですが 上記 <font color="#0000ff">M海のブログ</font>
あるいは <font color="#0000ff">メニュー</font> 項目へのアクセスをお願いします。', 'twentyseventeen' ); ?></h1>
  </header><!-- .page-header -->

<div class="page-content">
  <p><?php _e('申し訳ありません。<br/>
 お探しのページは下記理由で変更しました。<br/>
 <br/>
 1. umi55.com/wp/…→ umi55.com/ …に変更<br/>
 2. 記事を集約<br/>
 <br/>
 三重ゴルフツアー → <u><a href="https://umi55.com/life/107">伊勢神宮参拝と三重ゴルフ…</a></u><br/>
 Word Press をインストール → <u><a href="https://umi55.com/blog/612">ブログ奮戦記「…</a></u><br/>



: 同じなので中略


 <br/>
 <br/>
 検索ボックスに該当するキーワードを入力して下さい。
 ', 'twentyseventeen' ); ?></p>

     <?php get_search_form(); ?>
表記中の<br/>は改行、<u></u>はアンダーライン、<a    </a>は リンクです。

追記 2月19日

LIONBLOGの404ページは以下のように変更しました。

Scroll Up