IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Wordpress / WordPress:階層化パンくずリスト(プラグインなし)とページネーション、ページャー

WordPress:階層化パンくずリスト(プラグインなし)とページネーション、ページャー

2022/09/8 Wordpress

テーマをゼロから作ってみる(5)です。

今回は階層化パンくずリストをプラグインを使わずに作ってみます。ページネーションやページャーは WordPress の関数を使えば簡単に実現できます。パンくずリストの方はプラグインを使うか自作するしかないようです。

  • WordPress:テーマをゼロから作ってみる
  • ページネーション、ページャー
  • 階層化パンくずリスト
    • 自作の階層化パンくずリスト
    • 使い方
  • get_the_category の戻り値

ページネーション、ページャー

ページネーションとかページャーとか適当に言葉を使っていますが、要は次の記事や次のページ、または前の記事や前のページへのリンクということでいいと思います。ページが分割されている場合のリンクも同じように呼ぶようです。

これに関係する関数はたくさんあります。

個別投稿ページで前後の投稿へのナビゲーションを表示する関数の

  • next_post_link
  • previous_post_link
  • the_post_navigation

そして、インデックスやカテゴリーページなどで前後のページへのナビゲーションを表示する関数の

  • posts_nav_link
  • next_posts_link, get_next_posts_link
  • previous_posts_link, get_previous_posts_link
  • paginate_links
  • the_posts_pagination, get_the_posts_pagination

があります。

いろいろ試した結果、まずは、

<?php if (is_single()): ?>
<?php the_post_navigation(); ?>
<?php else: ?>
<?php the_posts_pagination(array('mid_size' => 2)); ?>
<?php endif; ?>

でやってみて、カスタマイズの必要が出てくれば、next_post_link, previous_post_link や get_the_posts_pagination を使えばいいでしょう。このコードですと次のように表示されます。

個別記事
インデックス(現在トップページ)

後は CSS で見た目を整えればいけそうです。個別ページの画像のナビゲーションは左右に振ってあります。また、スクリーンリーダーテキストの「投稿ナビゲーション」は CSS で視覚的に消せばいいと思います。その CSS のコードは、Make WordPress Accessible にあります。

階層化パンくずリスト

下記記事に決定版があります。

WordPress:階層化パンくずリスト決定版(プラグインなし、複数対応)

パンくずリストに関しては用意された関数はありませんので自作することになります。

まず、現時点では、パンくずリストは記事ページに表示することを前提にし、記事が属するカテゴリーを階層的に示すものとして始めます。記事は複数のカテゴリーを持てますし、階層化されている場合はかなり面倒になります。固定ページやカテゴリーページの場合はさほど難しくないと思われますので後回しです。

自作の階層化パンくずリスト

WordPress が提供しているカテゴリー関連の関数をいろいろながめて構想した結果、流れは次のようになりました。

  • get_the_category で記事が属するカテゴリーを取得する
  • category_parent が 0 のカテゴリーを探し、その cat_ID を取得する
  • category_parent がその cat_ID のカテゴリーを探し、その cat_ID を取得する
  • 3 を繰り返し、記事のカテゴリーヒエラルキー [ 親, 子, 孫, … ] の cat_ID を取得する
  • 各カテゴリーに対し、get_category, get_category_link を使い、階層化カテゴリーツリーを作成する

コードは次のようになります。

function get_imz_breadcrumbs( $post_id ) {

    $categories = get_the_category($post_id);
    $array = array();
    $get_child_category = function($parent) use (&$get_child_category, $categories, &$array){
        foreach($categories as $category){
            if($parent == $category->category_parent){
                $array[] = $category->cat_ID;
                $get_child_category($category->cat_ID);
            }
        }
        return $array;
    };

    if($categories){
        $category_tree = $get_child_category(0);
        $separator = '<li class="separator">/</li>';
        $breadcrumbs = '<ol><li class="breadcrumb-item"><a class="breadcrumb-link" href="'.get_bloginfo('url').'" >HOME</a></li>' . $separator;
        foreach($category_tree as $id){
            $category = get_category($id);
            $category_url = get_category_link( $id );
            $breadcrumbs .= '<li class="breadcrumb-item"><a class="breadcrumb-link" href="' . $category_url . '">' . $category->name . '</a></li>' . $separator;
        }
        echo $breadcrumbs . '<li class="breadcrumb-item">' . get_the_title($post_id) . '</li></ol>';
    }
}

使い方

記事ページであれば、ループ外であっても、

<nav class="breadcrumb"><?php get_imz_breadcrumbs(get_the_ID()); ?></nav>

とすれば、

のように表示されます。とりあえずは CSS で各リストに display: inline を指定して横並びにしています。なお、サンプルでは「トップ」というカテゴリーが表示されていますが、これは get_the_category の返す順序を試すもので説明は次のとおりです。

get_the_category の戻り値

  • get_the_category

この関数は現在の投稿が属するカテゴリーを配列で返します。ソースを確認していませんが、その戻り値はカテゴリーID(term_id)の昇順で返ってきます。登録順ということです。

ですので、たとえば親カテゴリーとなる「トップ」を最後に登録した場合は、親カテゴリーは配列の最後になります。具体的には次のとおりです。

array(3) {
  [0]=>
  object(WP_Term)#5030 (16) {
    ["term_id"]=> int(29)
    ["name"]=> string(6) "た行"
    ["slug"]=> string(9) "ta-column"
    ["term_group"]=> int(0)
    ["term_taxonomy_id"]=> int(29)
    ["taxonomy"]=> string(8) "category"
    ["description"]=> string(0) ""
    ["parent"]=> int(53)
    ["count"]=> int(5)
    ["filter"]=> string(3) "raw"
    ["cat_ID"]=> int(29)
    ["category_count"]=> int(5)
    ["category_description"]=> string(0) ""
    ["cat_name"]=> string(6) "た行"
    ["category_nicename"]=> string(9) "ta-column"
    ["category_parent"]=> int(53)
  }
  [1]=>
  object(WP_Term)#5027 (16) {
    ["term_id"]=> int(41)
    ["name"]=> string(3) "と"
    ["slug"]=> string(2) "to"
    ["term_group"]=> int(0)
    ["term_taxonomy_id"]=> int(41)
    ["taxonomy"]=> string(8) "category"
    ["description"]=> string(0) ""
    ["parent"]=> int(29)
    ["count"]=> int(2)
    ["filter"]=> string(3) "raw"
    ["cat_ID"]=> int(41)
    ["category_count"]=> int(2)
    ["category_description"]=> string(0) ""
    ["cat_name"]=> string(3) "と"
    ["category_nicename"]=> string(2) "to"
    ["category_parent"]=> int(29)
  }
  [2]=>
  object(WP_Term)#5028 (16) {
    ["term_id"]=> int(53)
    ["name"]=> string(9) "トップ"
    ["slug"]=> string(3) "top"
    ["term_group"]=> int(0)
    ["term_taxonomy_id"]=> int(53)
    ["taxonomy"]=> string(8) "category"
    ["description"]=> string(0) ""
    ["parent"]=> int(0)
    ["count"]=> int(1)
    ["filter"]=> string(3) "raw"
    ["cat_ID"]=> int(53)
    ["category_count"]=> int(1)
    ["category_description"]=> string(0) ""
    ["cat_name"]=> string(9) "トップ"
    ["category_nicename"]=> string(3) "top"
    ["category_parent"]=> int(0)
  }
}

五十音順でカテゴリーを組んでいるケースですので、「た行」「た」がカテゴリーになっています。そこに最後にカテゴリー「トップ」を登録し、該当記事の get_the_category を取得したケースです。

要は、最上位の親カテゴリーが何番目にあるかはわからないということになります。ですので、上のコードでは、まず category_parent が 0 のカテゴリーを探し出し、その cat_ID を category_parent に持つカテゴリーを探し出すという方法を繰り返しています。

ただし、これでもまだ完全ではありません。複数の親を持つ記事、またはカテゴリーも存在し得ますのでその場合どうするかが問題になります。

その宿題は後々として、とりあえずは階層化パンくずリストが出来上がりました。

【銀座 に志かわ】水にこだわった高級食パン 一斤 林先生が驚く初耳学 土産 高級食パン テレビ クッキー パ...

【銀座 に志かわ】水にこだわった高級食パン 一斤 林先生が驚く初耳学 土産 高級食パン テレビ クッキー パ…

1,670円(01/27 16:45時点)
Amazon
WordPressに目次(プラグインなし、保存型)
phpからpythonを呼び出し結果を取得
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com