IMUZA.com

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

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

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

2022/12/9 php, Wordpress

これでパンくずリスト関連3回目、特にこだわっているわけではありませんが、当初勘違いしていたことと、やはり ol でマークアップしたほうがいいだろうということで3回になってしまいました。

これで決定版です(笑)。下が過去の記事です。

  • WordPress:階層化パンくずリストを複数表示する(プラグインなし)
    シンプルですが ol でマークアップされていません
  • WordPress:階層化パンくずリスト(プラグインなし)とページネーション、ページャー
    記事のカテゴリー選択の際、親と子両方にチェックを入れなくてはいけないと勘違いしていました
  • 階層化パンくずリスト ol マークアップ
    • get_category_parents を使って
    • get_the_category, get_category を使って
  • 使い方

階層化パンくずリスト ol マークアップ

get_category_parents を使って

まず前回の get_category_parents を使ったタイプです。

この関数は、指定されたカテゴリーの親カテゴリーのリストを出力してくれますので、その出力に preg_replace を使って li タグを挿入します。

(Android 上の Chrome 限定の注意)
コードブロックをタップしますと数秒固まる場合があります。スクロール等他の操作に支障はありません。Chrome のバグとの報告が上がっています。詳細は「AndroidのChromeだけ固まる(止まる)ってどういうこと?!」をご覧ください。

function get_imz_breadcrumbs( $post_id ) {
    $categories = get_the_category( $post_id );
    foreach( $categories as $category ){
        $breadcrumbs .= '<ol class="breadcrumb"><li class="breadcrumb-item"><a href="'.esc_url(home_url('/')).'" >ホーム</a></li><li class="separator"> &raquo; </li>';
        $id = $category->cat_ID;
        $breadcrumb = get_category_parents( $id, true, '<li class="separator"> &raquo; </li>' );
        $pattern=array('/<a/','/<\/a>/');
        $replace=array('<li class="breadcrumb-item"><a','</a></li>');
        $breadcrumbs .= preg_replace($pattern, $replace, $breadcrumb);
        $breadcrumbs .= '<li class="breadcrumb-item">' . get_the_title( $post_id ) . '</li></ol>' . PHP_EOL;
    }
    echo $breadcrumbs;
}

get_the_category, get_category を使って

get_the_category は該当記事が属するカテゴリーを配列で返します。複数あれば複数返します。

  • get_the_category

そこから親カテゴリーの ID を添字(でいいのかな?)category_parent で取り出し、get_category でトップカテゴリーまでたどります。get_the_category は記事の ID から、get_category はカテゴリー ID からというだけで同じ出力です。親カテゴリー ID が 0 になればそのカテゴリーがトップカテゴリーです。

function get_imz_breadcrumbs( $post_id ) {
    $get_parent_category = function($id) use (&$get_parent_category, &$array){
        if($id != 0){
            $category = get_category($id);
            $name = $category->cat_name;
            $array[] = [$id, $name];
            $parent_id = $category->category_parent;
            $get_parent_category($parent_id);
        }
        return array_reverse($array);
    };

    $categories = get_the_category($post_id);
    foreach($categories as $category){
        $array = array();
        $id = $category->cat_ID;
        $category_tree = $get_parent_category($id);

        $separator = '<li class="separator">/</li>';
        $breadcrumbs = '<ol class="breadcrumb"><li class="breadcrumb-item"><a href="'.esc_url(home_url('/')).'" >HOME</a></li>' . $separator;
        foreach($category_tree as $category){
            $category_url = get_category_link( $category[0] );
            $breadcrumbs .= '<li class="breadcrumb-item"><a href="' . esc_url($category_url) . '">' . $category[1] . '</a></li>' . $separator;
        }
        echo $breadcrumbs . '<li class="breadcrumb-item">' . get_the_title($post_id) . '</li></ol>' . PHP_EOL;
    }
}

使い方

上記2つの関数は同じコードを出力します。どちらが速いかは調べていませんのでわかりません。

functions.php にどちらかの関数を書いておき、index.php や single.php に、

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

を挿入すれば複数カテゴリー対応の階層化パンくずリストが出力されます。get_the_ID は記事の ID を取得します。ループ外でも使えたと思います。

下のサイトが現在進行中の「ゼロから作るWordPressテーマ」のデモサイトです。このパンくずリストも導入されています。

  • https://june.imuza.com/

ということで、やや手間取りましたが、これが構造化データの作成に役立ちそうです。

Amazonギフトカード(Eメールタイプ) テキストメッセージにも送信可 - Adventure begins

Amazonギフトカード(Eメールタイプ) テキストメッセージにも送信可 – Adventure begins

5,000円(01/28 00:56時点)
Amazon
Lenovo Thinkpad E420の内蔵Wifiカード交換
レノボ Thinkpad E430の内蔵Wifiカード交換
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