カスタム投稿記事で特定の並べ替え順に前後の記事リンクを出す方法

カスタム投稿やカスタムタクソノミー別の記事上では、通常のWordpressの関数で前後の記事リンクを出すのは難しいです。

サブクエリを実行して、改めて該当する記事のID一覧を取得し、それを配列に格納します。

該当記事IDの順番を調べて、その一つ前・一つ後のID記事を取得する形が一番だと思います。

特殊な並び順の前後の記事リンクを出す

本記事ではWordpressのカスタム投稿記事の詳細ページ（single.php系）に、前後の記事のリンクを出す方法についてご紹介します。

ページ番号ではなく、前後の記事へのページネーション機能を実装していく訳ですね。

本環境について

今回は通常記事や、単なるカスタム投稿記事をベースにはしていません。

カスタム投稿記事で、特定の順番やカスタムフィールドの値順に並べる場合を想定したものになります。

特にカスタムタクソノミー（カテゴリごと）ごとの分類をしている場合などがそれにあたります。

ここで単に前後のリンクを出す関数を入れても、普通は投稿記事の日付順に並んでしまうためですね。

ではこういった複雑な記事情報の前後の記事を出す方法を解説していきましょう。

対象はカスタム投稿のカスタムタクソノミー別記事など

今回は、オリジナルで作った「用語集」のカスタム投稿記事などで使えると思います。

用語集にはア行やイ行などの各カテゴリがあり、これらがカスタムタクソノミーで分類されています。

さらに分類された用語集の各記事は、管理画面上に追加されたカスタムフィールドの番号順に並ぶ様にしています。

このちょっと複雑な状況で、前後の記事リンクおよびタイトルを出していきます。

サブクエリで並んだID順を把握する

こういう場合はWordpress関数は使わず、まずサブクエリで該当記事情報を整理していきます。

サブクエリを利用して、目的となる抽出条件や並び順で情報をカスタマイズし直す訳です。

実行した記事IDを配列内に格納する事で、記事IDが特定の順番で並びますよね。

これらの投稿記事IDの並びを元に、前の記事ID・後の記事IDを出力していく考え方です。

投稿IDの配列・順番を取得する

以下が投稿IDの配列・順番を取得するコードの例です。single.php上に設置しましょう。

記述コード

出力時はul・liタグを使っていますが、自由に変更して下さい。

<?php $taxonomy_terms = get_the_terms($post->ID,'glossary-cat'); foreach($taxonomy_terms as $taxonomy_term): $posts = get_posts( array ( 'post_type' => 'glossary', 'meta_key' => 'glossary-order', 'orderby' => 'meta_value', 'order' => 'ASC', 'posts_per_page' => -1, 'tax_query' => array( array( 'taxonomy' => 'glossary-cat', 'terms' => $taxonomy_term->slug, 'field' => 'slug', ), ), )); $post_ids = array(); foreach ( $posts as $p ) { $post_ids[] = $p->ID; } $current = array_search($post->ID, $post_ids); $currentID = $post_ids[$current]; $prevID = $post_ids[$current - 1]; $nextID = $post_ids[$current + 1]; ?> //ここから出力 <ul> <?php if ( $prevID ) : <li class="left_li"> //左寄せ <a href="<?php echo get_permalink($prevID); ?>"><?php echo get_post($prevID)->post_title; ?></a> </li> endif; if ( $nextID ) : <li class="right_li"> //右寄せ <a href="<?php echo get_permalink($prevID); ?>"><?php echo get_post($prevID)->post_title; ?></a> </li> endif; </ul> endforeach; wp_reset_postdata();

本文下にliを左右横並びで配置します。

$currentIDは現在の記事IDで、出力では使っていません。

コード解説

$taxonomy_terms = get_the_terms($post->ID,'glossary-cat'); foreach($taxonomy_terms as $taxonomy_term):

今回はカスタム投稿であり、さらに特定のカスタムタクソノミーの記事です。

そのためサブクエリを使って、一から記事情報をカスタマイズし直しています。

1行目で該当記事のID情報を取得し、foreach();で該当するタクソノミー情報一式を取得しています。

$posts（条件パラメータの設定）

ここからはサブクエリの記述です。

あらためてクエリ条件となる要素を、パラメータで指定していきます。

冒頭で取得した$taxonomy_termから、$taxonomy_term->slugでスラッグ名を条件に入れていますね。

このクエリ条件で一度サブループを掛ける訳です。

記事ID配列の格納

$post_idsで配列ボックスを作り、foreach();で記事のID配列を格納していきます。

これでサブクエリで抽出した記事IDの一覧が配列で収まります。

該当記事の順番を確認

$current = array_search($post->ID, $post_ids);

array_searchで該当記事IDが配列上の「何番目」にあるのか、その番号をカウントして$currentに代入しています。

例えば本記事のIDが配列格納した「$post_ids」の並びで「10番目」だったならば、$currentには「10」が代入される訳です。

前後の順番のIDを取得

つまり「10」の記事に-1をして「9」番目に該当する記事のID情報が、$prevIDに入ります。

さらに「10」の記事に+1をして「11」番目に該当する記事のID情報が、$nextIDに入る訳です。

前後のページリンク・タイトルの出力

ページの出力上では、echo関数を使ってgetにより情報を出力しています。

この方法を使えば、どんな並び替え順の記事であっても大丈夫ですね。

一度その抽出順および並び順でIDを並べて格納しておけば、前後の判定は自由自在です。

一般的な前後の記事を取得するWordpress関数

通常の投稿やカスタム投稿で、特定の並び順やタクソノミー順などがない場合は、以下の関数で取得できます。

いずれもsingle.phpなど、記事の詳細を出すファイルに入れましょう。

previous_post_link

リンクのみを出力する場合

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

リンクとタイトルを出力する場合

<?php previous_post_link('« %link', '%title'); ?> <?php next_post_link('%link »', '%title'); ?>

「%link」により前後の記事のリンクを含んだaタグ部分が出力され、さらに「%title」が入る事で記事タイトルを表示します。

%titleの部分を変えれば、タイトルではないテキストにする事もできます。

同じカテゴリの前後の記事を表示する

<?php previous_post_link('%link', '%title', true); ?> <?php next_post_link('%link', '%title', true); ?>

第3引数を追加して「true」を入れる事で、同じカテゴリー内での前後の記事を表示する事ができます。

getを使った出力方法

もう一つ、メインクエリの中でgetを使った出力もできます。

通常の投稿でもカスタム投稿であっても、前後の記事のページネーションを表示できます。

getによる情報取得

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

上記で取得した前後の記事の情報は、eco関数を使って出力します。

aタグのリンク出力

<a href="<?php echo esc_url( get_permalink( $previous_post->ID ) ); ?>"></a>

get_permalink()を使って、対象記事IDのリンク情報を出力する形です。

タイトル部分の出力

<?php echo esc_html( $next_post->post_title ); ?>

上記コードにより対象記事のタイトル情報を出力しています。

the_post_navigation関数

the_post_navigation();の基本形

<?php the_post_navigation(); ?>

上記の様に入れると、自動で以下のコードが出力されます。

出力コード例

<nav class="navigation post-navigation" aria-label="投稿"> <h2 class="screen-reader-text">投稿ナビゲーション</h2> <div class="nav-links"> <div class="nav-previous"> <a href="前の記事のリンク" rel="prev">前の記事タイトル</a> </div> <div class="nav-next"> <a href="次の記事のリンク" rel="next">次の記事タイトル</a> </div> </div> </nav>

カスタマイズ

arrayを追加してパラメータを入れる事で、表示するテキストや除外する記事のカスタマイズができます。

パラメータ設置例

the_post_navigation( array( 'next_text' => '<p class="meta-nav">%title', 'prev_text' => '<p class="meta-nav">%title', 'in_same_term' => true, 'excluded_terms' => '13, 14' 'taxonomy' => 'glossary-cat', 'screen_reader_text' => ' ' ) );

一押し人気コーナー紹介