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 wp-nextprev-of-single

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

最近の記事

DaVinci Resolve 17 プロジェクト設定と環境設定

プロジェクト設定と環境設定について詳しく解説されている情報がなかなか見つからないので、要所要所で知り得た情報を更新していきます。 プロジェクト設定 ・・・

DaVinci Resolve

項目”Clipy”は開いているため、ゴミ箱に入れることができません。←アンインストールしようとしたときの話し

Clipyが超絶便利そうだったので、macOS Big Sur にインストール&再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・

徒然なままに

setTimeout は requestAnimationFrame に変えるべき?

requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimati・・・

JavaScript

書籍「小さなチーム、大きな仕事」からピックアップ

6年ぶりに読み返したが、今なおハッとさせられることが多く見つかる。 この本で忘れないようにしたい項目をピックアップするだけでも役に立ちそ・・・

起業向け情報

書籍「完全網羅 起業成功マニュアル」からピックアップ

この記事では、以前に読んだ際に付箋を付けていたが、その部分だけを備忘録としてピックアップするため、本の要約ではない。実際は、何倍も濃い内容で、練・・・

起業向け情報

書籍「はじめの一歩を踏み出そう」から気になったフレーズをピックアップ

もう一回、全部読み返したいところだが、書籍がありすぎるので、当時付箋紙をつけていたところだけをピックアップ。書籍内ではより具体的な説明があるので・・・

起業向け情報

書籍「起業して3年以上「続く人」と「ダメな人」の習慣」からフレーズ・ピックアップ

この記事でメモしたのは、6年前に独立したときに読んだ箇所に付箋紙をつけていたところで、本の中の一部。起業家資質かどうか知る意味で読んでも面白いと・・・

起業向け情報

書籍「金持ち父さんの起業する前に読む本」を読んで

従業員という働き方ではない道を選ぶ前に読んでおきたい本。独立するときに読んだが、そのときに付箋紙がたくさん付いていたので、その部分を備忘録として・・・

起業向け情報

大きなインパクトを世界に与え続けてきた企業=ビジョナリー・カンパニーに学ぶ

この記事は、名著「ビジョナリー・カンパニー」から見直したいと思った箇所を備忘録として書き記す。 十二の崩れた神話 下記は、ビジョナ・・・

起業向け情報

ビジョナリー・カンパニーの基本理念

この記事は、名著「ビジョナリー・カンパニー」にて、実際のビジョナリー・カンパニーの基本理念が紹介されていたので抜粋。基本理念をつくる上での参考に・・・

起業向け情報

人気の記事

iOS Safariで絶対配置(position:fixed)して惰性スクロールしてもロックしない、フリーズ回避方法

iPhoneやiPadで position: fixed; で絶対配置したエリア内をスクロールするとき、最上部をより上にスクロールしようとしたり、最下部をより・・・

JavaScript2021年4月28日

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

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

WordPress2018年10月11日

Instagram API を使ってインスタに投稿した画像データを取得する

インスタに投稿した画像を自動でホームページでも更新されるようにしたい。もっとも簡単に実現する方法を紹介する。 公式リファレンスInstagram・・・

API2021年2月22日

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

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

JavaScript2017年7月19日

iframeの高さを自動調整する

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

JavaScript2015年3月17日

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

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

WordPress2019年2月11日

配列の重複を削除する

配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・

JavaScript2020年12月14日

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

【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・

Illustorator2018年2月2日

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

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

WordPress2020年8月4日

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

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

MAMP2015年2月3日

コメントありの記事

えっ!?Yahooの検索結果から遷移しようとしたら全く違うサイトにリダイレクトされてしまった...

「>前田さん コメントありがとうございます。 環境は分かりかねますが、修正したいファイルのパーミッションを604や644に変更すると書き込みできるようになりま・・・」

お仕事・制作日記

Sony Eマウント フルサイズ対応のカメラレンズを収集するページを作ってみた

「レンズ情報追加しました 150-600mm F5-6.3 DG DN OS | Sports 超望遠レンズ。一本は持ってみたい!」

お仕事・制作日記

記事の投稿IDなどの投稿者(ユーザー)情報を取得する方法 → get_the_author_meta

「アバターを取得する「get_avatar」についても追記しました!」

WordPress

jQueryでformを操る【nameの値を取得する/クリアする】

「「値をクリアする」を追加しました。チェックボックスやラジオボタンの値を何も選択していない状態に戻すときについて触れています。」

JavaScript

iframeの高さを自動調整する

「>匿名さん コメントありがとうございます。 サンプルでは、beforeは何も処理していないので期待する表示にならない、で正解です。 クリックした後が、対応・・・」

JavaScript

Instagram API を使ってインスタに投稿した画像データを取得する

「コメントに嬉しいお言葉、ありがとうございます!」

API

MAMPでMySQL Serverが突然起動しなくなった時 → ログファイル削除

「(匿名)さん コメントありがとうございます。何も設定変更していないのに、それまで使用できていたサーバーが突然使えなくなるのは辛いですよね、、。 ここで紹介したや・・・」

MAMP

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

「コメントありがとうございます! そもそもできるかはわかりませんが、ソースを書き換える必要はあります。 下記記事などが参考になるかもしれません。 illustra・・・」

Illustorator

05_各種キーワードツール

「公開から14年振りの更新w デッドリンクを削除しました。ツール系は「SEO対策に役立つ便利ツール」に集約します。」

SEO

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

「「特定の「タイプ」に関連付けられた投稿を表示する場合」を一つの場合を追記し、複数の場合と分けました。」

WordPress

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