Lognote

ネット集客に強い整体院サイトを制作

stinger8-404-and-search-customize-thumbnail

STINGER8の404エラーページをカスタマイズしてクローラー巡回促進対策してみた

公開日:2017-04-07
最終更新日:

意外とカスタマイズで見落としがちな検索結果ページと404エラーページ。

この二つのページはあまり人の目に触れることの少ないページなので、結構おろそかにしている人も多いように感じます。

WordPressをカスタマイズをするにしても、表側だけやって満足してしまい忘れがちな部分だったりします。何を隠そう私がそうでした。

検索結果ページと404エラーページのカスタマイズは何で必要なの?

まずはみなさんのブログの検索フォームに、わざと検索に引っかからないようなキーワードを打ち込んでみてください。

stinger8-404-and-search-customize-01

カスタマイズをしていないと、大体は「記事がありません。」で終わりです。

次に、アドレスの最後の/(スラッシュ)の後に同じように適当な文字を打ち込んでアクセスしてみてください。

stinger8-404-and-search-customize-02

今度は「Hello! my name is 404 お探しのページはありませんでした。」と出ますでしょうか? 挨拶されてしまいました(笑)

これはこれで機能的に問題ないのですが、ちょっと淡白すぎます。それに、記事がないとわかれば誰でもほかのブログを探しにいってしまいますよね。

これって非常にもったいなくないですか? せっかくブログに訪問してもらえたのに離脱確定です。

以前も違う方法の404エラーページ対策をしたけど……

以前、このブログでもSTINGER7の404エラーページの対策記事を書きましたが、それはそれはひどいものでした。

内容としては404エラーページにアクセスした訪問者を問答無用でトップページに飛ばすというとんでもないものです。

「存在しないページです」と表示されるよりいいかなと思いおこなったカスタマイズでしたが、いきなりトップページに飛ばされるのですからユーザビリティも糞もありませんよね。この記事に関してはかなり反省しています。

テーマ変更ついでにSEO見直しを兼ねて

つい最近STINGER7から新しくSTINGER8にテーマを変更したこともあり、そのあたりを見直すいい機会かと404エラーページと検索結果ページをカスタマイズしてみました。

参考にしたのはバズ部さんのこちらの記事です。

こちらの記事によると、404エラーページ対策は訪問者のその後の行動先をしっかりと用意してあげることで、 ただ単にユーザビリティの向上を目的とするだけではなく、Googleクローラーもまた同じように巡回効率が上がり、サイト全体のSEO対策につながるということでした。

これはなおさら、すぐにでもカスタマイズした方がよさそうですね。

基本的なコードやデザインはお借りし、それをSTINGER8用に調整しました。

実際の404エラーページと検索結果ページ

今回おこなったカスタマイズで表示される実際の404エラーページと検索結果ページを以下のリンク先でご確認ください。

404エラーページを確認

検索結果ページを確認

STINGER8の検索結果ページと404ページのカスタマイズの流れ

今回おこなう流れは以下の通りです。

  • ページがなかった場合に呼び出すインクルードファイルを作成する
  • 404ページ(404.php)にインクルードファイルを挿入する
  • 検索結果ページ(search.php)を結果があった場合となかった場合に処理を分岐させる
  • 検索結果一覧ページを表示するテンプレートファイル(itiran-search.php)を作成する
  • CSSでデザインを整える

この順番で作業を進めていきます。

①ページがなかった場合に呼び出すインクルードファイルを作成する

以下のコードをコピーして、content-none.phpというファイルを作り、FTPソフトで子テーマ「stinger8-child」にアップロードします。

こちらのコードをそのまま使う前提条件として「Contact Form 7」と「WordPress Popular Posts」の2つのプラグインをインストールしている必要があります。
<div class="content-none">
<?php if( is_404() ){
// 404ページの場合
$t = get_bloginfo('name');
echo 'いつも、',$t,'をご覧いただきありがとうございます。アクセスされたページは削除またはURLが変更されています。お手数をおかけしますが、以下の方法からもう一度目的のページを探してみてください。';
}elseif( is_search() ){
// 検索結果ページの場合
$t = get_bloginfo('name');
$r = get_search_query();
echo 'いつも', $t, 'をご覧いただきありがとうございます。<span class="rmarker">「',$r,'」で検索しましたがページが見つかりませんでした。</span>お手数をおかけしますが、以下の方法からもう一度目的のページを探してみてください。';
} ?>
  <h2>1.検索して見つける</h2>
  <!-- 検索ボックスを設置 -->
  <p>検索ボックスにお探しのコンテンツに該当するキーワードを入力してください。それに近い内容のページリストが表示されます。</p>
  <?php get_search_form(); ?>
  <h2>2.人気の記事から見つける</h2>
現在Lognoteで人気の記事一覧です。集計間隔は一ヶ月となっています。
<h4>RANKING</h4>
<!-- wppカスタマイズランキング -->
<?php
 $wpp = array (
 'range' => 'monthly',
 'limit' => 5,
 'post_type' => 'post',
 'title_length' => '25',
 'stats_comments' => '0', 
 'stats_category' => '1',
 'stats_views' => '1',
 'thumbnail_width' => '100', 
 'thumbnail_height' => '100', 
 'wpp_start' => '<div id="rank">',
 'wpp_end' => '</div>',
 'post_html' => '<div class="rank-post">
<div class="rank-img">{thumb_img}</div>
<div class="rank-text">
<a href="{url}"><h5>{text_title}</h5></a>
<div class="rank-spec">
<span class="cat">{category}</span>
</div>
</div>
</div>',
); ?>
<?php wpp_get_mostpopular($wpp); ?>
<!-- wppカスタマイズランキング -->
  <h2>3.カテゴリーから見つける</h2>
  <!-- カテゴリー一覧を表示 -->
  <p>それぞれのカテゴリーのトップページからもう一度目的のページを探してみてください。</p>
  <div id="search-list">
  <?php
    wp_list_categories(
      array(
        'title_li'  => '',
        'depth' => 1 //数字の分だけ下層カテゴリーを表示する
      )
    );
  ?>
  </div>
  <h2>4.無効なリンクを報告する</h2>
  <!-- 無効なリンクを表示 -->
  <p>もし当サイト内で無効なリンクを発見された場合、どのページのどのリンクが無効だったかをご報告いただけると幸いです。今後とも、使いやすいサイトになるよう精進させていただきますのでよろしくお願いいたします。</p>
  <?php echo do_shortcode('Contact Form 7のショートコード'); ?>
</div>

23行目はdaily(日ごと)、weekly(週ごと)、monthly(月ごと)でランキング集計期間を変更できます。24行目はランキング表示する記事数です。

ランキング表示の仕方はこちらの記事を参考にしました。

54行目はカテゴリーの階層を指定します。1が親カテゴリーのみの表示となり、2からは一つずつ下の子カテゴリーが表示されるようになります。

64行目はContact Form 7のショートコードを記載します。ショートコードはコンタクトフォーム一覧ページから確認できます。

stinger8-404-and-search-customize-03

②404ページ(404.php)にインクルードファイルを挿入する

先ほど作成したcontent-none.phpを404.phpにテンプレートコードを使って挿入します。

<?php get_header(); ?>
<div id="content" class="clearfix">
	<div id="contentInner">
		<div class="st-main">
			<article>
				<div class="post">
					<img src="https://lognote.biz/wp-content/uploads/2016/04/default-thumbnail-image.jpg">
					<?php get_template_part('content', 'none'); ?>
				</div>
				<!--/post-->
			</article>
		</div>
	</div>
	<!-- /#contentInner -->
	<?php get_sidebar(); ?>
</div>
<!--/#content -->
<?php get_footer(); ?>

体裁を記事ページと同じにするため、mainをst-mainに変更しています。

postの間のテンプレートコードはcontent-none.phpを呼び出すためのもので、その上に好みに合わせて画像を挿入します。なくても大丈夫です。

ここまでで、404エラーページのカスタマイズは終了です。

③検索結果ページ(search.php)を結果があった場合となかった場合に処理を分岐させる

次に、検索結果ページのカスタマイズをします。

結果がある場合は既存のitiran-search.phpを、結果がない場合はcontent-none.phpを表示するように分岐処理を加えましょう。

<?php get_header(); ?>
<div id="content" class="clearfix">
	<div id="contentInner">
		<div class="st-main">
			<article>
				<div class="post">
					<h1>「<?php echo esc_html( $s ); ?>」の検索結果 <?php echo $wp_query->found_posts; ?> 件 </h1>
				<?php if (have_posts() && get_search_query()) : while (have_posts()) : the_post(); ?>
					<?php get_template_part( 'itiran-search' ); //検索用一覧読み込み ?>
				<?php endwhile; ?>
					<?php get_template_part( 'st-pagenavi' ); //ページナビ読み込み ?>
				<?php else : ?>
					<img src="https://lognote.biz/wp-content/uploads/2016/04/default-thumbnail-image.jpg">
					<?php get_template_part('content', 'none'); ?>
				<?php endif; ?>
				</div>
			</article>
		</div>
	</div>
	<!-- /#contentInner -->
	<?php get_sidebar(); ?>
</div>
<!--/#content -->
<?php get_footer(); ?>

13行目の画像は検索結果がなかった場合に表示される画像を指定しています。

④検索結果一覧ページを表示するテンプレートファイル(itiran-search.php)を作成する

分岐処理で使用するitiran-search.phpを作成します。こちらもcontent-none.phpと同様に子テーマにアップロードしてください。

なぜこのファイルが必要になるかというと、無限ループを回避するためです。既存のitiran.phpで記事一覧を表示しようとするとsearch.phpの分岐ループ処理重複して分限ループが発生してしまいます。

itiran-search.phpはループ処理を削除したコードを記述しています。

<?php
/**
 * 検索結果がなかった場合の一覧
 */
?>
<div class="kanren">
		<dl class="clearfix kanren-custom">
			<dt><a href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
						<?php the_post_thumbnail( 'st_thumb150' ); ?>
					<?php else: // サムネイルを持っていないときの処理 ?>
							<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
					<?php endif; ?>
				</a></dt>
			<dd>
				<p class="kanren-t"><a href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a></p>

				<div class="blog_info">
					<p><i class="fa fa-clock-o"></i>
						<?php the_time( 'Y/m/d' ); ?>
						&nbsp;<span class="pcnone">
							<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
							<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>
          </span></p>
				</div>
				<div class="smanone">
					<?php the_excerpt(); //抜粋文 ?>
				</div>
				<div style="text-align:right;"> <a href="<?php echo get_permalink(); ?>" class="btn btn-detail">続きを読む</a> </div>
			</dd>
		</dl>
</div>

⑤CSSでデザインを整える

最後にCSSでデザインを整えましょう。

/*--------------------------------------
404ページ 人気ランキング
--------------------------------------*/
#rank {
  counter-reset: wpp-ranking;
}
#rank .rank-post{
  overflow:hidden;
  padding:10px 0;
  position:relative;
}
#rank .rank-post:before{
  color:white;
  background: #343434;
  text-align: center;
  content: counter(wpp-ranking, decimal);
  counter-increment: wpp-ranking;
  line-height: 1;
  padding: 5px 7px;
  position: absolute;
  top:10px;
  left:0;
  z-index: 1;
}
#rank .rank-post a {
  color: #333 !important;
  text-decoration:none!important;
}
#rank .rank-post a h5{
  display:block;
  margin:0 0 7px 7px;
}
#rank .rank-post a h5:hover {
  text-decoration: underline!important;
}
#rank .rank-post .rank-spec{
  overflow:hidden;
  display:block;
  font-size:14px;
}
#rank .rank-post .rank-spec .cat,
#rank .rank-post .rank-spec .time{
  display:inline-block;
  float:left;
  margin-right:20px;
  padding:1px 3px;
}
#rank .rank-post .rank-spec span.cat:before {
    font-family: "FontAwesome";
    content: "\f115";
    padding-right: 5px;
}

/*--------------------------------------
404ページ カテゴリーリスト
--------------------------------------*/
#search-list li {
    list-style-type: none;
    padding-left: 0;
}
#search-list li.cat-item a:before {
    font-family: "FontAwesome";
    content: "\f0da";
    padding-right: 5px;
}
#search-list li.cat-item a {
    display: block;
    overflow: hidden;
    font-size: 16px;
    line-height: 2.4em;
    text-decoration: none;
    vertical-align: middle;
    padding: 0 8px;
    color: #333;
    background: #fff;
    margin-bottom: 2px;
}
#search-list li.cat-item a:hover {
    background: #333;
    color: #fff;
}
#search-list li.cat-item span {
    line-height: 1em;
    float: right;
    margin: 8px 0 0 8px;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    background: #999;
}

/*media Queries PC
----------------------------------------------------*/
@media only screen and (min-width: 780px) { 

    /*--------------------------------
    一覧ページ変更
    ---------------------------------*/
    .kanren-custom dt { width: 150px; margin-right: 30px }
    .kanren-custom dt img { width: 150px; }
    .kanren-custom dd { padding-left: 100px }
    .kanren-custom dd h3 {margin: 10px 0 }
    .kanren-custom dd h3 a {
        color: #333;
        text-decoration: none;
        font-size: 22px;
        line-height: 1.7;
    }

}

以上でカスタマイズは終了です。

まとめ

案外サボりがちになる404エラーページと検索結果ページ。

「このサイトデザインかっこいー!」と思っていたら404エラーページがデフォルトだったらガッカリしますよね(笑)逆にしっかりデザインされていたら好感度もあがります。(私は)

なおかつSEO効果でPVアップも期待できるのでまだ手を加えていない方はぜひやっておきたいカスタマイズです。

以上、「STINGER8の404エラーページをカスタマイズしてクローラー巡回促進対策してみた」という記事をお届けしました。

-STINGER
-

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

STINGER8の404エラーページをカスタマイズしてクローラー巡回促進対策してみた
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

stinger8-pager-css-customize-thumbnail

STINGER8のページネーションを少しおしゃれにするCSSデザイン例

WordPressの記事が増えてくると、ページネーションのデザインも気になってきます。STINGER8のページネー...

footer-3column-customize-thumbnail

ちょっと寂しいSTINGER7のフッターをカッコよくカスタマイズしてコンテンツを増やそう!

STINGER7のフッターをもう少し華やかにしたい!そう思ったことはないでしょうか?この記事では、フッタ...

stinger8-newentry-toppage-hide-thumbnail

STINGER8の「最近のエントリ」をトップページだけ非表示にする方法

STINGER8のトップページには新着記事一覧が表示されています。 そして、サイドバーには「最近のエントリ」と …

stinger8-footer-3column-customize-thumbnail

STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法

STINGER8のフッターに3カラムウィジェットを設置する方法を紹介します。 STINGER7をご利用の方はこ …

sns-follow-button-thumbnail

STINGER8の記事下にサムネ付きでフォロー誘導ボックスを設置する方法

STINGER8の記事下にいいねボタンやフォロワー誘導ボックスをサムネ付きで設置する方法を紹介します。

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい