WordPressでGood：パンくずリストの設置方法

パンくずリストはブログなどの記事で、「どの階層で、どのカテゴリに属するページを閲覧しているか」を示す優れたナビゲーションです。

記事タイトルの上部にある「ホーム > 大カテゴリ名 > 中カテゴリ名」などで示されているアレです。

WordPressを利用している方であれば、初めからテーマに組み込まれていることが多いでが、「コードがよくわからなく、カスタマイズを躊躇していた方」の参考にもなればと思います。

single.phpに書き込むコード

下記内容をパンくずリストを設置したい場所に追記してください。

[php]
<!–パンくずリストの設置–>
<div class=”pankuzu”>
<ol>
<li>
<a href=”<?php echo home_url(); ?>”>
ホーム
</a></li>
<li>
<?php if(has_category()): ?>
<?php $postcat=get_the_category(); ?>
<?php echo get_category_parents($postcat[0],true,'</li><li>’); ?>
<?php endif; ?>
</li>
</ol>
</div>
</div>
[/php]

style.cssに書き込むコード

下記内容をstyle.cssに追記してください。

[css]
/*パンくずリストの設定*/
.pankuzu ol {
margin:0;
padding:0;
list-style:none;
}

.pankuzu li a {
display:inline-block;
padding:5px 5px;
color:#F00;
font-size:14px;
text-decoration::none;
}

.pankuzu li a[href]:hover {
background-color:#F00;
}

.pankuzu ol:after {
content:””;
display:block;
clear:both;
}

.pankuzu li {
float:left;
width:auto;
}

.pankuzu li:after {
content:” \003e “;
margin-left:0px;
margin-right:0px;
color:#F00;
}

.pankuzu li:last-child:after{
content:none;
margin-left:0px;
}
[/css]

表示例

色などを変更して楽しんでいただければ。

あなたの快適なブログ生活の役に立ちますように。