WordPress プラグインなしでパンくずリストを配置

WordPress でパンくずリスト(パンくずナビ)をプラグインなしで配置する方法を紹介します。

カスタム投稿タイプやカスタム タクソノミーにも対応していて、ほとんどのケースにおいてそのまま使用できると思います。

出力される HTML は、Bootstrap3 や Foundation5/6 の Breadcrumbs スタイルに準拠した形式となっています。

functions.php

まずは、functions.php などに下記のコードを記述します。

<?php

/**
 * パンくずリストの配列を取得します。
 */
function get_breadcrumbs_items( $top, $exclude_categorys ) {
    global $wp_query;
    global $post;

    $breadcrumbs = array();

    if ( $top ) {
        $breadcrumbs[] = array( 'title' => $top, 'link' => home_url( '/' ) );
    }
    if ( is_category() ) {
        // カテゴリー
        $cat = get_queried_object();
        if ( $cat->parent != 0 ) {
            $ancestors = array_reverse( get_ancestors( $cat->cat_ID, 'category' ) );
            foreach ( $ancestors as $ancestor ) {
                if ( !in_array( $ancestor, $exclude_categorys ) ) {
                    $breadcrumbs[] = array( 'title' => get_cat_name( $ancestor ), 'link' => get_category_link( $ancestor ) );
                }
            }
        }
        $breadcrumbs[] = array( 'title' => $cat->cat_name, 'link' => false );
    } else if ( is_tag() ) {
        // タグ
        $tag_id = get_query_var( 'tag_id' );
        $tag_properties = get_tag( $tag_id );
        if ( $tag_properties ) {
            $breadcrumbs[] = array( 'title' => $tag_properties->name, 'link' => get_tag_link( $tag_id ) );
        } else {
            $breadcrumbs[] = array( 'title' => __( 'Tagname is empty' ), 'link' => false );
        }
    } elseif ( is_tax() ) {
        // タクソノミー
        $query_obj = get_queried_object();
        $post_types = get_taxonomy( $query_obj->taxonomy )->object_type;
        $cpt = $post_types[0];
        $breadcrumbs[] = array( 'title' => get_post_type_object( $cpt )->label, 'link' => get_post_type_archive_link( $cpt ) );
        $taxonomy = get_query_var( 'taxonomy' );
        $term = get_term_by( 'slug', get_query_var( 'term' ), $taxonomy );
        if ( is_taxonomy_hierarchical( $taxonomy ) && $term->parent != 0 ) {
            $ancestors = array_reverse( get_ancestors( $term->term_id, $taxonomy ) );
            foreach ( $ancestors as $ancestor_id ) {
                $ancestor = get_term( $ancestor_id, $taxonomy );
                $breadcrumbs[] = array( 'title' => $ancestor->name, 'link' => get_term_link( $ancestor, $term->slug ) );
            }
        }
        $breadcrumbs[] = array( 'title' => $term->name, 'link' => false );
    } elseif ( is_post_type_archive() ) {
        // カスタム投稿タイプのアーカイブ
        $cpt = get_query_var( 'post_type' );
        $breadcrumbs[] = array( 'title' => get_post_type_object( $cpt )->label, 'link' => false );
    } elseif ( is_archive() ) {
        // アーカイブ
        $breadcrumbs[] = array( 'title' => get_the_time( __( 'F, Y' ) ), 'link' => false );
    } elseif ( is_single() ) {
        // 投稿ページ
        $post_type = get_post_type( $post->ID );
        if ( $post_type == 'post' ) {
            $categories = get_the_category( $post->ID );
            $category = $categories[0];
            if ( $category -> parent != 0 ) {
                $ancestors = array_reverse(get_ancestors( $category -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $breadcrumbs[] = array( 'title' => get_cat_name($ancestor), 'link' => get_category_link($ancestor) );
                }
            }
        } else {
            // カスタム投稿タイプ
            $post_type_object = get_post_type_object( $post->post_type );
            if ( $post_type_object->has_archive !== false ) {
                $breadcrumbs[] = array( 'title' => $post_type_object->labels->name, 'link' => get_post_type_archive_link( get_post_type() ) );
            }
        }
        $strtitle = the_title( '', '', false );
        if ( !isset( $strtitle ) || $strtitle == '' )
            $strtitle = $post->ID;
        $breadcrumbs[] = array( 'title' => $strtitle, 'link' => false );
    } elseif ( is_page() && !is_front_page() ) {
        // 固定ページ
        $post = $wp_query->get_queried_object();
        if ( $post->post_parent == 0 ) {
            $breadcrumbs[] = array( 'title' => get_the_title( '', '', true ), 'link' => false );
        } else {
            $ancestors = array_reverse( get_post_ancestors( $post->ID ) );
            array_push( $ancestors, $post->ID );
            foreach ( $ancestors as $ancestor ) {
                $strtitle = get_the_title( $ancestor );
                if ( !isset( $strtitle ) || $strtitle == '' ) {
                    $strtitle = $post->ID;
                }
                if ( $ancestor != end( $ancestors ) ) {
                    $breadcrumbs[] = array( 'title' => strip_tags( apply_filters( 'single_post_title', $strtitle ) ), 'link' => get_permalink( $ancestor ) );
                } else {
                    $breadcrumbs[] = array( 'title' => strip_tags( apply_filters( 'single_post_title', $strtitle ) ), 'link' => false );
                }
            }
        }
    } elseif ( is_search() ) {
        // 検索結果
        $breadcrumbs[] = array( 'title' => __( 'Search Results' ), 'link' => false );
    } elseif ( is_404() ) {
        // 404
        $breadcrumbs[] = array( 'title' => __( '404' ), 'link' => false );
    } else {
        // その他
        $breadcrumbs[] = array( 'title' => wp_title( '', false ), 'link' => false );
    }

    return $breadcrumbs;
}

/**
 * パンくずリストを取得します。
 */
function get_breadcrumbs( $args = array() ) {
    $defaults = array(
        'before' => '<nav role="navigation">',
        'after' => '</nav>',
        'top' => 'TOP',
        'exclude_categorys' => array()
    );
    $args = wp_parse_args( $args, $defaults );

    $items = get_breadcrumbs_items( $args['top'], $args['exclude_categorys'] );

    $html = $args['before'];
    $html .= '<ul class="breadcrumbs">';
    foreach ( $items as $item ) {
        if ( $item['link'] ) {
            $html .= '<li><a href="' . $item['link'] . '">' . $item['title'] . '</a></li>';
        } else {
            $html .= '<li>' . $item['title'] . '</li>';
        }
    }
    $html .= '</ul>';
    $html = $args['after'] . "\n";
    return $html;
}

/**
 * パンくずリストを表示します。
 */
function breadcrumbs( $args ) {
    echo get_breadcrumb( $args );
}

テンプレート ファイル

あとは、表示したい場所に下記のコードを記述します。

<?php breadcrumbs(); ?>

breadcrumbs はパラメータで条件を指定できます。使い方は下記のとおりです。

breadcrumbs の使い方

<?php breadcrumbs( $args ); ?>

パラメータ

$args に指定された条件に基づいてパンくずリストを表示します。 以下に示す引数のリストを $args に入れるとデフォルトを上書きできます。

引数 デフォルト 説明
before ‘<nav role=”navigation”>’ 全体の前のテキスト
after ‘</nav>’ 全体の後のテキスト
top ‘TOP’ トップページのテキスト
exclude_categorys array() カテゴリーから除外するカテゴリー IDの配列

CSS

Bootstrap や Foundation のスタイルを使用しない場合の CSS の例です。

ul.breadcrumbs {
    list-style: none;
    margin: .25rem 0 .5rem;
    font-size: 0.95rem;
}
ul.breadcrumbs li {
    display: inline-block;
}
ul.breadcrumbs li:not(:last-child)::after {
    color: #cacaca;
    content: ">";
    margin: 0 .25rem;
}

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。