[STINGER5]記事本文の直後にソーシャル連携機能を表示する方法

本ブログで使用させて頂いているSTINGER5では、最初からTwitterボタンやFacebookボタン、はてなブックマークボタンなどのソーシャル連携機能が利用できます。

自分で追加しなくても標準的なSNS連携機能が使用できるのでとてもありがたいんですが、デフォルトでは記事下のアドセンスの後に表示されます。

好みの問題かも知れませんが、記事本文の直後にソーシャル連携機能があった方がより多くクリックしてもらえるんじゃないかと自分は思ったので、今回はソーシャル連携機能を記事本文の直後に表示させる方法を紹介します。

記事本文とタグリンクの間にソーシャル連携機能を表示させる

記事本文の直後に関連記事を表示させるためには、single.phpを編集します。といっても内容は非常に簡単で、記事本文とタグリンクの間にソーシャル連携機能を表示させるコードを移動させるだけです。

以前の記事（[STINGER5]記事本文の直後に関連記事を表示させる方法）で紹介した方法とほとんど同じやり方で実現できます。

以下が記事表示部分のコードです。

          <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>

// この行を</section>タグとwp_link_pages()の間に移動する
          <?php get_template_part('sns'); //ソーシャルボタン読み込み ?>

          <?php endwhile; else: ?>
          <p>記事がありません</p>
          <?php endif; ?>
          <!--ループ終了-->
          
          <?php if( comments_open() || get_comments_number() ){
          comments_template(); } ?>

          <!--関連記事-->
          <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>

// この行を</section>タグとwp_link_pages()の間に移動する

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

<?php endwhile; else: ?>

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

<?php endif; ?>

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

comments_template(); } ?>

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

今回は記事本文とタグリンクの間にソーシャル連携機能を表示させたいので、以下のように編集します。

          <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 get_template_part('sns'); //ソーシャルボタン読み込み ?>

          <?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 endwhile; else: ?>
          <p>記事がありません</p>
          <?php endif; ?>
          <!--ループ終了-->
          
          <?php if( comments_open() || get_comments_number() ){
          comments_template(); } ?>

          <!--関連記事-->
          <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 get_template_part('sns'); //ソーシャルボタン読み込み ?>

<?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 endwhile; else: ?>

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

<?php endif; ?>

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

comments_template(); } ?>

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

これで記事本文とタグリンクの間にソーシャル連携機能が表示されます。

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