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

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

最近の記事

GulpでERRが出てテンパった → gyp: No Xcode or CLT version detected! → PostCSS plugin autoprefixer requires PostCSS 8

Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・

制作効率化

ビジネス前提ワークシート

書籍「LEAN UX リーン思考によるユーザエクスペリエンス・デザイン」から抜粋。 「前提の宣言」「MVPの作成」「実験の実行」「フィードバックとリサー・・・

知識編

リーン思考のUXデザイン

LEAN UX は、コラボレーションと部門/領域横断的な手法によって、製品の本質を素早く明らかにするための実践的手法であり、これによって文書への過度な依存を減・・・

知識編

ES6(ES2015)の主な変更点

オブジェクト指向 クラス定義 JavaScriptは厳密にはクラスがない、プロトタイプベースのオブジェクト指向言語。ES6でclass構文が導入さ・・・

JavaScript

JavaScriptスタイルガイド

書籍「メンテナブルJavaScript」と Google JavaScript Style Guide 和訳 を参考に自分なりのJavaScriptスタイルガ・・・

JavaScript

投稿を公開したときに指定したページにアクセスする

この記事では「管理画面で投稿やカスタム投稿の公開ステータスを更新したときに何かしらの処理をする」方法の備忘録です。 functions.php を修正し・・・

WordPress

ローカルフォントをWebフォント指定する

Google Fonts はとても便利だが、適用するまでの遅延が気になったので、同様の効果をローカルにあるフォントを利用して実現させる。 事前に用意する・・・

CSS

[ソフト] Web font用のwoff、woff2にフォントを変換する無料サービス

WOFFコンバータ ダウンロードhttps://opentype.jp/woffconv.htm 以下、リンク先の「概要」を抜粋。 フォント・・・

CSS

JSON

JSON.parse() 配列とオブジェクトのリテラル記法を組み合わせた文字列をデータとして取り扱えるようにする。 // JSONデータ let ・・・

JavaScript

いろいろな判定

真の場合。偽の場合は、!== を使う。 プリミティブ値の判定 文字列の判定 if (typeof a === 'string') {} ・・・

JavaScript

人気の記事

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

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

MAMP

iframeの高さを自動調整する

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

JavaScript

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

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

JavaScript

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

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

WordPress

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

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

Illustorator

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

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

WordPress

Advanced Custom Fields を使った条件分岐(セレクトボックス、チェックボックス、ラジオボタン、真偽)のテンプレート記述方法

前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・

WordPress

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

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

WordPress

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

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

WordPress

カウントアップ、カウントダウンするJavaScript

ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・

JavaScript

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