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

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

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

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

single.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>

style.cssに書き込むコード

下記内容をstyle.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;
}

表示例

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

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