[WordPress]前後投稿へのリンクを実装する方法を解説[サムネイル出力あり]

公開：2019.10.06 更新：2020.05.09

こんにちは、らいどらです。

記事でたまに見る[前後投稿へのリンク]。当サイトにも実装したくなったので、解説しながら設置していこうと思います。

なお、真偽は定かではありませんが、この[前後投稿へのリンク]は特にSEO面では有利を取ることは無いと言われています。

まあ、回遊性は高まるかもしれませんが、記事の内容に沿ったテーマを見に来たユーザーが同じサイトであるというだけで関係のない記事に手を伸ばすのは珍しいですからね。

妥当と言えるでしょう。

前後投稿を出力するタグ

さて、解説していきます。

前後投稿はいつもおなじみのテンプレートタグを使うことで簡単に出力することが出来ます。

投稿タイトルとリンクだけの出力ならば、以下のコードだけでOKです。

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

単純にリンクを設置するだけならこれでOKですね。

サムネイルも出力したい場合

文が簡単すぎるし薄々感づいてはいましたが、 先述した方法ではサムネイル の出力まではしてくれないようです。

前後投稿リンクにサムネイルを出力するためには、もうひと手間必要なようです。

詳しくは以下の記事が参考になりました。

サムネイル出力したい場合は以下のコードを参照してください。

※当サイトのコードを引用している為、スタイリング等の理由から一部コードが乱れてますが、ご了承ください。

<div class="beforenext-link-area clearfix">
　<div class="beforelink clearfix"><span class="maenokiji">＜前の記事</span>
  　<?php
       $bp = get_previous_post();
        if (!empty( $bp )): 
	   $b_thum = get_the_post_thumbnail($bp->ID, array(100,100) );
   ?>
 　　　<div class="beforediv">
　　　　　<div class="b-thum">
	  　<?php if($b_thum){ echo $b_thum; } ?>
　　　　　</div>
　　　　　<div class="b-ancr">
	　　<a href="<?php echo get_permalink( $bp->ID ); ?>">
    　　　　 <?php echo $bp->post_title; ?></a>
　　　　　</div>
　　　　</div>
          
          <?php endif; ?>
        </div>
        
        <div class="nextlink clearfix"><span class="tuginokiji">次の記事＞</span>
          <?php
            $np = get_next_post();
              if (!empty( $np )): 
	        $n_thum = get_the_post_thumbnail($np->ID, array(100,100) );
          ?>
  		
          　<div class="nextdiv">
	　　　<div class="n-ancr">
	　　　　<a href="<?php echo get_permalink( $np->ID ); ?>">
                <?php echo $np->post_title; ?></a>
	　　　</div>
            　<div class="n-thum">
	  	<?php if($n_thum){ echo $n_thum; } ?>
	　　　</div>
          　</div>
		
          <?php endif; ?>
        
  </div>
</div>

リンクだけの時よりずいぶん長くなってしまいましたね……。

コードの内容としては、投稿の情報を引き出してから、各情報（タイトルやサムネなど）を出力するという内容になっているため、仕方ないのかもしれませんが……。

とは言っても、上記のコードは”前後”の投稿リンク出力なので、例として”次投稿リンクのみ”の出力にすると以下のコードになります。

<div class="nextlink clearfix"><span class="tuginokiji">次の記事＞</span>
          <?php
            $np = get_next_post();
              if (!empty( $np )): 
	        $n_thum = get_the_post_thumbnail($np->ID, array(100,100) );
          ?>
  		
          　<div class="nextdiv">
	　　　<div class="n-ancr">
	　　　　<a href="<?php echo get_permalink( $np->ID ); ?>">
                <?php echo $np->post_title; ?></a>
	　　　</div>
            　<div class="n-thum">
	  	<?php if($n_thum){ echo $n_thum; } ?>
	　　　</div>
          　</div>
		
          <?php endif; ?>
</div>

内容を軽く解説すると、まずget_next_post();で次投稿の情報を取得し、変数npに入力。

その後、各所でnpを引用しながらget_the_post_thumbnailでサムネイルを取得、配列arrayでサイズを調整。その後のecho $n_thum;でサムネイルを出力（変数n_thumにはサムネイルの情報を入力してあるため）

さらにecho get_permalinkでリンクを取得して<a>タグで囲むことによってそのまま出力。

最後にecho $np->post_title;でタイトルを出力していますね。

順を変えたい場合は十分配慮しながら各<div>要素を切り取っていけば大丈夫です。（たぶん）

後は、お好きなようにCSSでスタイリングを整えてください。

これで完成！！

それでは！！