[STINGER5]記事本文の直後に関連記事を表示させる方法

STINGER5はデフォルトでは「記事本文→アドセンス→コメント→関連記事」の順で各記事のページが表示されます。しかしこの順番だと、記事本文を読んでもらっても画面の一番下までスクロールしなければ関連記事を見てもらえません。

これではもし関連記事の中に読者の興味がある記事が含まれていたとしても、画面下までスクロールするという手間を強いてしまうことで、関連記事を見てもらえる可能性が下がってしまうかもしれません。

せっかく記事本文を読んでもらえたのなら、関連記事をすぐに提示することによってより多くの記事が見てもらえるかもしれません。ということで、STINGER5で記事本文の直後に関連記事を表示させるカスタマイズを行いました。

記事本文とアドセンスの間に関連記事を表示させる

記事本文の直後に関連記事を表示させるためには、single.phpを編集します。といっても内容は非常に簡単で、記事本文とアドセンスの間に関連記事を表示させるコードを移動させるだけです。

以下のコードが記事を表示している部分の抜粋です。

          <section> 
            <!--ループ開始 -->
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <h1 class="entry-title">
              <?php the_title(); //タイトル ?>
            </h1>
            <div class="blogbox">
              <p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
                <time class="entry-date" datetime="<?php the_time('c') ;?>">
                  <?php the_time('Y/m/d') ;?>
                </time>
                &nbsp;
                <?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>&nbsp; ' , $mtime; ?>
                </span> </p>
            </div>
            <?php the_content(); //本文 ?>
          </section>
          <!--/section-->
          <?php wp_link_pages(); ?>
          <p class="tagst"><i class="fa fa-tags"></i>&nbsp;-
            <?php the_category(', ') ?>
            <?php the_tags('', ', '); ?>
          </p>

          <div style="padding:20px 0px;">
            <?php get_template_part('ad'); //アドセンス読み込み ?>
            <?php if(is_mobile()) { //スマホの場合 ?>
            <?php } else { //PCの場合 ?>
            <div class="smanone" style="padding-top:10px;">
              <?php get_template_part('ad'); //アドセンス読み込み ?>
            </div>
            <?php } ?>
          </div>
          <?php get_template_part('sns'); //ソーシャルボタン読み込み ?>
          <?php endwhile; else: ?>
          <p>記事がありません</p>
          <?php endif; ?>
          <!--ループ終了-->
          
          <?php if( comments_open() || get_comments_number() ){
          comments_template(); } ?>

// この行以下のコードをwp_link_pages()とアドセンス読み込みのセクションの間に移動する
          <!--関連記事-->
          <h4 class="point"><i class="fa fa-th-list"></i>&nbsp;  関連記事</h4>
          <?php get_template_part('kanren');?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_title(); //タイトル ?>

</h1>

<?php the_time('Y/m/d') ;?>

</time>

<?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>  ' , $mtime; ?>

</span> </p>

</div>

<?php the_content(); //本文 ?>

</section>

<?php wp_link_pages(); ?>

<p class="tagst"><i class="fa fa-tags"></i> -

<?php the_category(', ') ?>

<?php the_tags('', ', '); ?>

</p>

<?php get_template_part('ad'); //アドセンス読み込み ?>

<?php if(is_mobile()) { //スマホの場合 ?>

<?php } else { //PCの場合 ?>

<?php get_template_part('ad'); //アドセンス読み込み ?>

</div>

<?php } ?>

</div>

<?php get_template_part('sns'); //ソーシャルボタン読み込み ?>

<?php endwhile; else: ?>

<p>記事がありません</p>

<?php endif; ?>

<?php if( comments_open() || get_comments_number() ){

comments_template(); } ?>

// この行以下のコードをwp_link_pages()とアドセンス読み込みのセクションの間に移動する

<?php get_template_part('kanren');?>

<section>タグで囲まれた部分が記事本文を表示しているコードです。その下の19〜23行目のコードが記事直後のカテゴリやタグへのリンクを表示するコードです。さらにその下の25行目〜33行目がアドセンスを表示するコードです。

今回はカテゴリ、タグへのリンクの下かつアドセンスより上の位置に関連記事を表示させたいので、上記のコードの間に関連記事を表示させるコードを移動させます。最終的に以下のようになります。

          <section> 
            <!--ループ開始 -->
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <h1 class="entry-title">
              <?php the_title(); //タイトル ?>
            </h1>
            <div class="blogbox">
              <p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
                <time class="entry-date" datetime="<?php the_time('c') ;?>">
                  <?php the_time('Y/m/d') ;?>
                </time>
                &nbsp;
                <?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>&nbsp; ' , $mtime; ?>
                </span> </p>
            </div>
            <?php the_content(); //本文 ?>
          </section>
          <!--/section-->
          <?php wp_link_pages(); ?>
          <p class="tagst"><i class="fa fa-tags"></i>&nbsp;-
            <?php the_category(', ') ?>
            <?php the_tags('', ', '); ?>
          </p>

// ここに以下の3行を移動させた
          <!--関連記事-->
          <h4 class="point"><i class="fa fa-th-list"></i>&nbsp;  関連記事</h4>
          <?php get_template_part('kanren');?>

          <div style="padding:20px 0px;">
            <?php get_template_part('ad'); //アドセンス読み込み ?>
            <?php if(is_mobile()) { //スマホの場合 ?>
            <?php } else { //PCの場合 ?>
            <div class="smanone" style="padding-top:10px;">
              <?php get_template_part('ad'); //アドセンス読み込み ?>
            </div>
            <?php } ?>
          </div>
          <?php get_template_part('sns'); //ソーシャルボタン読み込み ?>
          <?php endwhile; else: ?>
          <p>記事がありません</p>
          <?php endif; ?>
          <!--ループ終了-->
          
          <?php if( comments_open() || get_comments_number() ){
          comments_template(); } ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_title(); //タイトル ?>

</h1>

<?php the_time('Y/m/d') ;?>

</time>

<?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>  ' , $mtime; ?>

</span> </p>

</div>

<?php the_content(); //本文 ?>

</section>

<?php wp_link_pages(); ?>

<p class="tagst"><i class="fa fa-tags"></i> -

<?php the_category(', ') ?>

<?php the_tags('', ', '); ?>

</p>

// ここに以下の3行を移動させた

<?php get_template_part('kanren');?>

<?php get_template_part('ad'); //アドセンス読み込み ?>

<?php if(is_mobile()) { //スマホの場合 ?>

<?php } else { //PCの場合 ?>

<?php get_template_part('ad'); //アドセンス読み込み ?>

</div>

<?php } ?>

</div>

<?php get_template_part('sns'); //ソーシャルボタン読み込み ?>

<?php endwhile; else: ?>

<p>記事がありません</p>

<?php endif; ?>

<?php if( comments_open() || get_comments_number() ){

comments_template(); } ?>

これで記事本文の直後に関連記事の一覧が正常に表示されれば作業完了です。記事本文の直後に関連記事があることで、スムーズに次の記事も見てもらえそうですね！イイ感じです。

※なおPHPやHTMLの編集に慣れていない場合はファイルのバックアップをとってから作業されることを強く推奨します。不具合が出ても責任は負いかねますのでカスタマイズは自己責任でお願いします。