WordPressのカスタマイズやテーマファイル、プラグインの作り方などデータベース構造から詳しく解説します。

記事の前後のページリンクを出力する処理を自作

記事ページの前後にある記事を出力する処理を書きました。
短いコードで簡単に作れますし、使い方によってはユーザーにも喜ばれるのでおすすめです!

使用した関数

WordPressには便利な関数があらかじめ用意されています(助かるな〜)
今回使用させてもらったのはこちらです
get_previous_post()
get_next_post()
previous_post_link()
next_post_link()

使い方はCodeXにも記載されています!
CodeX:get_previous_post()
CodeX:get_next_post
CodeX:previous_post_link()
CodeX:next_post_link()

実際に処理をかく

僕が書いた処理はこちらになります。
※この関数を使用する際は記事を呼び出すループの処理内で使ってください。

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

<!-- ここから前後の記事ページのリンクを呼び出す処理 -->
<?php
  $prev_post = get_previous_post();
  $next_post = get_next_post();
?>
  <div id="post_nav">
    <?php if($prev_post) { ?>
      <div id="prev_post">
        <?php previous_post_link('%link', '&#8656;%title', false); ?>
      </div>
    <?php } ?>
    <?php if($next_post) { ?>
      <div id="next_post">
        <?php next_post_link('%link', '%title&#8658;', false); ?>
      </div>
    <?php } ?>
  </div>
<?php endwhile; endif; ?>

色んな場所で使用できるように関数にしてみるとこんな感じです。

<?php
  // 前後の記事情報を取得して、記事があれば出力をする処理
function prev_next_post_link() {
  $prev_post = get_previous_post();
  $next_post = get_next_post();
?>
  <div id="post_nav">
    <?php if($prev_post) { ?>
      <div id="prev_post">
        <?php previous_post_link('%link', '&#8656;%title', false); ?>
      </div>
    <?php } ?>
    <?php if($next_post) { ?>
      <div id="next_post">
        <?php next_post_link('%link', '%title&#8658;', false); ?>
      </div>
    <?php } ?>
  </div>
<?php
}

説明

記事の情報を取得する(if文で前後の記事が存在するのかどうかを確認するための準備)

$prev_post = get_previous_post();
$next_post = get_next_post();

前の記事が存在するのなら、前の記事のリンクを出力(previous_post_link()の使い方はCodeXをみてください)

<?php if($prev_post) { ?>
   <div id="prev_post">
     <?php previous_post_link('%link', '&#8656;%title', false); ?>
   </div>
<?php } ?>

これで完了です!!!!

関連記事

ページ上部へ戻る