WordPress

【WordPress】パンくず機能を追加するPrime Strategy Bread Crumb

February 11, 2017

Prime Strategy Bread Crumbはパンくずナビゲーションを機能を追加するためのプラグイン。

Prime Strategy Bread Crumbプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Prime Strategy Bread Crumbを検索
有効化にします。設定はありません。

Default

Template Tag

<?php if ( function_exists( 'bread_crumb' ) ) { bread_crumb(); } ?>

Output sample

<ul class="bread_crumb">
    <li class="level-1 top"><a href="http://www.example.com/">Home</a></li>
    <li class="level-2 sub"><a href="http://www.example.com/?post_type=seminar">Seminar</a></li>
    <li class="level-3 sub"><a href="http://www.example.com/?area=tokyo">Tokyo</a></li>
    <li class="level-4 sub tail current">WordBench Tokyo</li>
</ul>

String types

Template Tag

<?php if ( function_exists( 'bread_crumb' ) ) bread_crumb( 'type=string' ); ?>

Output Sample

<a href="http://www.example.com/">Home</a> > <a href="http://www.example.com/?post_type=seminar">Seminar</a> > <a href="http://www.example.com/?area=tokyo">Tokyo</a> > <strong class="current">WordBench Tokyo</strong>

パンくずを表示させたい箇所にテンプレートタグを追加します。

CSS Sample

.bread_crumb {
    margin:0;
    border-bottom:1px solid #eee;
    padding:0.8em 0 0.5em;
    clear: both;
    height: 20px;
    background: #f8f8f8;
}
.bread_crumb li {
    font-size:12px;
    color:rgb(180,180,180);
    float:left;
    /*margin-right:1em;*/
    list-style: none outside none;
}
.bread_crumb li:after {
    content : '>';
    padding-left:10px;
    margin-right:10px;
}
.bread_crumb li:last-child:after {
    content : '';
}
.bread_crumb li a {
    color:rgb(120,120,120);
}
.bread_crumb li.current {
}