パンくずリストはブログなどの記事で、「どの階層で、どのカテゴリに属するページを閲覧しているか」を示す優れたナビゲーションです。
記事タイトルの上部にある「ホーム > 大カテゴリ名 > 中カテゴリ名」などで示されているアレです。
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]
表示例
色などを変更して楽しんでいただければ。
あなたの快適なブログ生活の役に立ちますように。
Amazon audibleの登録の紹介
プライム会員限定で2024年7月22日まで3か月無料体験キャンペーン開催中です。無料体験後は月額1,500円で聞き放題です。なお、聞き放題対象外の本はAudible会員であれば非会員価格の３０％引きで購入することが可能です。
Amazon audibleはプロのナレーターが朗読した本をアプリで聞くことができるサービスで、オフライン再生も可能です。通勤や作業のお供にAmazon audibleのご登録はいかがでしょうか。
・AmazonのAudible
