WordPress

記事ページで、前後リンクは祖先カテゴリーを対象にする

前後記事ページを表示するのは、あらかじめ用意された関数を使うことで簡単に実装できる。ただし、記事のカテゴリーの祖先カテゴリ(*1)を対象にした前後記事ページを表示するには、自作するしかないらしいので作ってみた。

*1 祖先カテゴリを対象にするとは、たとえば、URLが https://www.sample.com/aaa/bbb/ccc/abc.html の場合、aaa に含まれる記事一覧のことです。

実装イメージ

前提条件は下記の通り。

  • 対象は記事ページ(カスタム投稿ではない)
  • 一投稿に対してカテゴリは一つ選択(複数選択ではない)
  • html/cssの修正は多少できる

この前提で実装しました。カスタム投稿の場合や一つの投稿に複数のカテゴリを選択している場合は、別途修正が必要になるかと思います。
これを踏まえて実装イメージ。

  1. 現在の投稿IDを取得する
  2. 現在の投稿IDからカテゴリーのターム(ID)を取得する
  3. カテゴリーのターム(ID)の祖先ターム(ID)を取得する(なければ現在のカテゴリータームを祖先タームとする)
  4. 祖先タームから祖先のカテゴリー名を取得する(画面表示用)
  5. 祖先タームを含む、祖先ターム内のカテゴリーターム(ID)を配列で用意する(検索用)
  6. 祖先タームを含む、祖先ターム内の記事一覧を取得して、前後記事のIDを取得する
  7. HTMLコーディングする

single.php の前後ページリンクを表示させているところ

<?php
/**
 * 記事ページで、祖先カテゴリーを対象に前後リンクを作る
 * wordpress version 5.0.3 で動作確認済
 */
// 現在の投稿IDを取得する
$current_id = $post -> ID;
// 現在の投稿のカテゴリーのターム(id)を取得する
$category = get_the_category($current_id);
$category = $category[0];
$category_id = $category -> term_id;
$ancestors = get_ancestors($category_id, "category");
// 現在の投稿の祖先のカテゴリーのターム(id)を取得する(なければ現在の投稿のカテゴリーのターム)
if (count($ancestors) > 0) {
  $ancestor_id = array_reverse($ancestors);
  $ancestor_id = $ancestor_id[0];
} else {
  $ancestor_id = $category_id;
}
// 祖先の名前を取得する
$ancestor_name = get_the_category_by_ID($ancestor_id);
// 祖先のターム(id)を配列にする
$array_category = array($ancestor_id);
// 子孫のターム(id)を取得する
$categories = get_categories(array(
  'child_of' => $ancestor_id
));
// 祖先配列に、子孫のターム(id)を追加する
foreach ($categories as $cat) {
  $array_category[] = $cat -> term_id;
}
// 前後IDを取得する
$args = array(
  'post_type' => 'post',
  'category__in' => $array_category,
  'posts_per_page' => -1,
  'order' => 'DESC'
);
$posts = get_posts( $args );
if ($post) {
  $is_next = false;
  $next_id = "";
  $prev_id = "";
  foreach ($posts as $post) {
    setup_postdata($post);
    $check_id = $post -> ID;
    if ($check_id == $current_id) {
      $is_next = true;
    } elseif (false === $is_next) {
      $next_id = $check_id;
    } elseif (true === $is_next) {
      $prev_id = $check_id;
      break;
    }
  }
}
wp_reset_postdata(); // 直前のクエリを復元する
// 前後記事のどちらかがある場合は、コーディングする
if ("" != $next_id || "" != $prev_id):
?>
  <h1><?php echo $ancestor_name; ?>に関連する前後記事</h1>
  <?php if ("" != $prev_id): $nextprev_id = $prev_id; ?>
  <h2>前の記事情報</h2>
  <ul>
    <li>タイトル:<?php echo get_the_title($nextprev_id); ?></li>
    <li>URL:<?php echo get_the_permalink($nextprev_id); ?></li>
    <li>日付:<?php echo get_the_date("Y-m-d H:i", $nextprev_id); ?></li>
    <li>サムネイル:<?php if (get_the_post_thumbnail_url($nextprev_id)) { echo get_the_post_thumbnail_url($nextprev_id); }; ?></li>
    <?php
    $category = get_the_category($nextprev_id);
    $category = $category[0];
    $category_name = $category->name;
    $category_base = $category->slug;
    ?>
    <li>カテゴリー名:<?php echo $category_name; ?></li>
    <li>カテゴリースラッグ:<?php echo $category_base; ?></li>
  </ul>
  などなど、よしなに
  <?php endif; ?>
  <?php if ("" != $next_id): $nextprev_id = $next_id; ?>
  <h2>次の記事情報</h2>
  <ul>
    <li>タイトル:<?php echo get_the_title($nextprev_id); ?></li>
    <li>URL:<?php echo get_the_permalink($nextprev_id); ?></li>
    <li>日付:<?php echo get_the_date("Y-m-d H:i", $nextprev_id); ?></li>
    <li>サムネイル:<?php echo (get_the_post_thumbnail_url($nextprev_id))? get_the_post_thumbnail_url($nextprev_id): "なし"; ?></li>
    <?php
    $category = get_the_category($nextprev_id);
    $category = $category[0];
    $category_name = $category->name;
    $category_base = $category->slug;
    ?>
    <li>カテゴリー名:<?php echo $category_name; ?></li>
    <li>カテゴリースラッグ:<?php echo $category_base; ?></li>
  </ul>
  などなど、よしなに
  <?php endif; ?>
<?php endif; ?>

htmlとcssで取得したデータを色々修正して、いい感じにデザインして完成です。

実装するのに、あーだこーだトライエラーしまくること1日かかってしまいました。でも、これがあれば、次からは一瞬でできる!

ちなみに、GitHubにてソースコード公開しています。
GitHub taketake2145/wp-nextprev-of-single

実際に試してみる場合はバックアップをお忘れなく。
お役に立てれば嬉しいです。

最近の記事

Custom Post Type UI で 投稿画面にタクソノミー が表示されなくなった場合 → REST API

数ヶ月前、WordPress本体をバージョンアップして、エディタがガラリと変わった。その際、それまでサイドナビに、Custom Post Type UI(CP・・・

WordPress

なるほどデザイン

書籍「売れるデザインのしくみ」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。テキストのみで備忘録として残しておくが実際はイラストと・・・

デザイン

グーグルの考えるデザインガイドライン

使えるデザインになっている?→ デザインは正しいインプットによって、人の暮らしや夢を助けるツールサクサクと動く、機能するデザインになっている?→ デザインが機・・・

デザイン

売れるデザイン

書籍「売れるデザインのしくみ」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。2009年に出版されたと知って驚き。10年前と言えば、・・・

マーケティング・ブランディング

スタバに学ぶ。

書籍「スターバックスはなぜ値下げもテレビCMもしないのに強いブランドでいられるのか?」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。20・・・

マーケティング・ブランディング

favicon.icoをWordPressの管理画面からアップロードできない→ wp-config.php を一時的に修正

いつもは直接アップロードしているので気にしていなかったが、WordPress管理画面のメニュー「メディア」からfavicon.icoをアップロードしようとした・・・

WordPress

Sony α7SIII、ついに公式発表!

2020年7月28日 23:00。ついに、α7SIIIがはじまる。次々と発表される機能に思わず声を上げることもありながら、物欲は上昇していく。 公式Yo・・・

カメラネタ

「楽天モバイル+楽天ひかり」で、スマホも家のネットも一年月額無料!

一年前まで「LINEモバイル+Softbank光」という組み合わせで通信環境を整えていた。スマホと家のネットで5,0000円未満に抑えることができて大満足だっ・・・

徒然なままに

カメラ初心者がαに出会ったとき

いよいよ2020年7月29日(水) 13:00に、α7S 3の詳細が発表される。これをきっかけに、カメラをはじめる人もいるはず。 そんな方に向けて、So・・・

カメラネタ

EOS R5 / R6。Sony α7無印シリーズと価格で比較してみた

キヤノンのR5/R6が発表されて2日。ぼくの脳はもう完全に冷静を取り戻しつつある。 いろんなYouTuberさんたちの「全財産投げ打ってでも買う!」宣言・・・

カメラネタ

人気の記事

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

背景画像の拡大・縮小 → background-size !

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・

CSS

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress

アーカイブページでカスタムフィールドやタクソノミーで絞り込みした状態でリスト表示する

<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・

WordPress

[連想配列]2つ以上のキーで並び替えをする

2つ以上のキーで連想配列を並び替えしたいときの備忘録。 サンプル配列 var arr = []; arr.push(["5", "4", "たちつて・・・

JavaScript

イラストレーターでレイヤーごとにPNGで書き出す

フォトショップでは、レイヤーごとに書き出す設定がありますが、イラストレーターにはありません。そこでレイヤーごとにPNGファイルを書き出すためのスクリプトファイル・・・

Illustorator

管理画面のカスタム投稿一覧で並び順を変更する

WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・

WordPress

http://localhost:8888/ → http://localhost/

http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・

MAMP

WEB制作アプリケーションWordPress記事ページで、前後リンクは祖先カテゴリーを対象にする | シンプルシンプルデザイン