WordPressでプラグインを使わずにパンくずリストを表示する方法

2015-12-07Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

プラグインって色々入れると管理が面倒ですよね。
今回はプラグインを使わずにパンくずリストを表示させる方法についての記事です。

テーマによっては元々実装されているものもありますが、このAdelleというテーマにはありませんでしたので組み込んでみました。

※このブログは2016年12月にパンくずリスト組み込み済みのテーマに変更しました

スポンサーリンク

参考にしたサイト

コードはこちらのサイトを参考にさせていただきました。

しかしそのままコピペすると階層ごとをdivタグで囲っているため、改行されて表示されてしまいます。
CSSでfloatするよりは元のコードを書き換えてしまった方が楽なので、ちょっと改変してみました。

改変版

変更点は4点です。

  • パンくずリストを横並びに
  • ホームの文字列の左にアイコンフォントを表示
  • 最後に > を追加
  • 最後に改行を挿入

コード(functions.php)

// ***********************************************************************************
//	パンくずリスト
// ***********************************************************************************

function breadcrumb(){
    global $post;
    $str ='';
    if(!is_home()&&!is_admin()){
        $str.= '<div id="breadcrumb" class="cf"><span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
        $str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title"><i class="fa fa-home"></i> ホーム</span></a> &gt; </span>';
 
        if(is_category()) {
            $cat = get_queried_object();
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> &gt; </span>';
                }
            }
        $str.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a> &gt; </span>';
        } elseif(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
                    $str.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a> &gt; </span>';
                }
            }
        } elseif(is_single()){
            $categories = get_the_category($post->ID);
            $cat = $categories[0];
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a> &gt; </span>';
                }
            }
            $str.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a> &gt; </span>';
        } else{
            $str.='<div>'. wp_title('', false) .'</div><br/>';
        }
        $str.='</div><br/>';
    }
    echo $str;
}

コード(single.php / page.php)

表示したい箇所に下記のコードを挿入します。
通常single.phpやpage.phpに入れますが、Adelleではcontent.phpをお勧めします。
私はcontent.phpの2行目に入れました。

<?php breadcrumb(); ?>

まとめ

コピペだけで簡単に出来ます。素晴らしいです。

メニュー下にパンくずリストを表示したことにより、タイトル下のカテゴリが要らない気がしてきました。
記事の更新日を表示するかどうするか・・・また考えて、変更する場合は改めて記事にしたいと思います。

こちらの記事もおすすめです