WordPressのカスタムメニューのパンくず

2015/07/20

WordPressのカスタムメニューのパンくず

WordPress…使い始めたばかりですが、こないだ階層のあるナビにカスタムメニューを使ってみて、なかなか便利だなーと思ってたんですが、

ぱんくずどうしよ(￣ー￣?)…

と行き詰りました。

Breadcrumb NavXTプラグインも、ホームの次に階層の一番下をいきなり表示してしまって、ちょっとまだカスタマイズの方法もよくわからなかったのでプラグインはあきらめまして。

いろいろググッてみるも、これぞ！というものがなかったので（もしくは理解できなかったので（泣）、

結局jQueryで作ることに。

jQuery(function( $ ) {
$(function(){
    var $piece = [];
    $('.current-menu-ancestor>a, .current-menu-item>a').each(function(i){
        $piece[i] = $(this).html();
    });
    var breadcrumb = $piece.join('　＞　');
    $('.pankuzu').html(breadcrumb);
});
});

jQuery(function( $ ) {

$(function(){

var $piece = [];

$('.current-menu-ancestor>a, .current-menu-item>a').each(function(i){

$piece[i] = $(this).html();

});

var breadcrumb = $piece.join('　＞　');

$('.pankuzu').html(breadcrumb);

});

テストページ

↑テストページはすごく簡単につくったやつですスイマセン。。リンク先とかダミーです。
現在の居場所が「b階層4-3」であることを前提としてます。

今回、パンくずにあたる部分がそのカテゴリの最初の記事だったので、パンくずにリンクはつけてません。
以下、長いですが、カスタムメニューを普通につくると大量のクラスがついてこんな感じになります。とりあえず消したりせずそのまま表示した場合。

<body>
<div class="pankuzu"></div>

<ul id="menu-nav" class="menu">
    <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-21"><a href="/url/">a階層1</a>
        <ul class="sub-menu">
            <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="/url/?p=1">a階層2-1</a></li>
            <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="/url/?p=36">a階層2-2</a></li>
        </ul>
    </li>
    <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor menu-item-has-children menu-item-22"><a href="/url/">b階層1</a>
        <ul class="sub-menu">
            <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor menu-item-has-children menu-item-13"><a href="/url/?p=38">b階層2-1</a>
                <ul class="sub-menu">
                    <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-14"><a href="/url/?p=38">b階層3-1</a>
                        <ul class="sub-menu">
                            <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="/url/?p=38">b階層4-1</a></li>
                            <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="/url/?p=40">b階層4-2</a></li>
                            <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-17"><a href="/url/?p=42">b階層4-3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>

<body>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

ちなみにjQueryと自分のjsをWordPressで使うには、
function.phpに

function my_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/○○.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

function my_scripts() {

wp_enqueue_script( 'jquery' );

wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/○○.js', array( 'jquery' ) );

}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

↑「○○」はファイル名入れてください。
例は、自分のjsファイルを「ルートフォルダ/js/○○.js」に置いた場合です。
jQueryの読み込みに関して、以下のサイトを参考にさせていただきました！ありがとうございます。
WordPress で jQuery を使う時の注意点

WordPressとかphpでできたらなんかもっとスマートなんかなぁ…。
jQuery使うとなんだか負けた気になってしまった・・・(￣￣;) うーん
いい方法あったら教えてください。

予定日