1. TOP
  2. WordPress
  3. WordPressで前後の記事リンクを出力するいくつかの方法

WordPressで前後の記事リンクを出力するいくつかの方法

シングル投稿記事でその記事の前後記事送りを出現させたい時はデフォルトのWordpressのテンプレートタグで簡単に出力できるが、

  • 自動で出力される文字を変更したい
  • CSSで自由に装飾したい
  • 表示されているカテゴリのみに絞って出力させたい

などその時々によって取得方法を出来れば変えたい。

その時の呼び出したい内容で微妙に方法が変わってくるのでいつものように
覚書メモ

デフォルトの呼び出し方法

<?php previous_post_link(); ?> //前の記事リンクを取得・出力
<?php next_post_link(); ?> //次の記事リンクを取得・出力

または
<?php previous_post_link('« %link', '%title'); ?> //前の記事リンクを取得・出力
<?php next_post_link('%link »', '%title'); ?> //次の記事リンクを取得・出力

この時、表示される «を変更したいときは %linkの前後で任意のものに変更、
文字を変更したい時は %title →　任意の文字　に変更することができる。

CSSなどで装飾したい時の出力方法：例

<?php
if (get_previous_post()) : ?>
<p class="prevLink gr"><?php previous_post_link('%link', '« Previous Post<br><span>%title</span>'); ?>
<img src="/images/navStone01.png" alt="" class="navStone01">
<img src="/images/navStone02.png" alt="" class="navStone02">
<img src="/images/navStone03.png" alt="" class="navStone03">
<img src="/images/navStone04.png" alt="" class="navStone04">
</p>
<?php endif; ?>
<?php 
if (get_next_post()) : ?>
<p class="nextLink gr><?php next_post_link('%link', 'Next Post »<span>%title</span>); ?>
<img src="/images/navStone05.png" alt="" class="navStone05">
<img src="/images/navStone06.png" alt="" class="navStone06">
<img src="/images/navStone07.png" alt="" class="navStone07">
<img src="/images/navStone08.png" alt="" class="navStone08">
</p>
<?php endif; ?>

if (get_previous_post()) や　if (get_next_post())で条件を設定して好みの装飾をすることができる。 上記内容で出力した時の表示例（自分の好みで装飾してるのであまり参考にはならないかもですが）

カスタム投稿で同一カテゴリに属する前後記事を出したいとき

//custom_typeは実際のカスタムタクソノミー名を記述する
<?php previous_post_link('« %link', '前の記事', TRUE, '', 'custom_type'); ?> 
<?php next_post_link('%link »', '次の記事', TRUE, '', 'custom_type'); ?>

これで特定のカスタムタクソノミーで現在のタームに紐づく記事のみで前後リンク表示・取得が出来る。

同一カテゴリに絞ってサムネイル画像もつけたい場合（カスタムタクソノミーも対応）

<?php
  $taxonomy_slug = 'taxonomy_slug'; // タクソノミースラッグを指定
  
  // 同一カテゴリにの前の記事リンクを取得・出力
  $prev_post = get_previous_post( true, '', $taxonomy_slug);
  
  // 同一カテゴリにの次の記事リンクを取得・出力
  $next_post = get_next_post( true, '', $taxonomy_slug); 

<?php if( $prev_post ): ?>
<a href="<?=get_permalink($prev_post->ID)?>">
<p>< 前の記事</p>
<figure>
<img src="<?=get_the_post_thumbnail_url($prev_post->ID)?>">
</figure>
<?=get_the_title($prev_post->ID)?>
</a>
<?php endif; ?>


<?php if( $next_post ): ?>
<a href="<?=get_permalink($next_post->ID)?>">
<p> 次の記事 ></p>
<figure>
<img src="<?=get_the_post_thumbnail_url($next_post->ID)?>">
</figure>
<?=get_the_title($next_post->ID)?>
</a>
<?php endif; ?>

これで、前後の記事のサムネイル画像等を取得・表示させることができる。



カスタム投稿・カスタムタクソノミーかつ同一カテゴリーの記事限定で。という条件で色々と模索、
カスタム投稿では先にfunctions.phpで設定してからじゃないと実装出来ないなどもあったが、上記方法だと呼び出したいsingle.phpのテーマファイル内に記述で実装出来た。

前後記事を出力するにもどう出力したいかによって色んな方法がありますね。

SENSITIVITY