wp パンくずリスト

single.php

-----

<?php get_header(); ?>

<div class="sub-header">
<div class="bread">
<ol>
<li><a href="<?php echo home_url(); ?>">
<i class="fa fa-home"></i><span>TOP</span></a></li>
<li>
<?php if(has_category()): ?>
<?php $postcat=get_the_category(); ?>
<?php echo get_category_parents($postcat[0],true,'<li></li>'); ?>
<?php endif; ?>
<a><?php the_title(); ?></a>
</li>
</ol>
</div>

</div>

-------------

css

@media (min-width:1040px) {
.sub-header {width: 1000px; margin:0 auto;}
}

/* パンくずリスト */
.bread ol{margin: 0;padding: 0;list-style: none;}
.bread li a {display: inline-block;padding: 5px 5px; color:#000000; font-size: 12px; text-decoration: none;
}

.bread li a:hover{background-color:#eeeeee;}
.bread li a:after{content:""; display: block; clear: both;}
.bread li{float:left; width: auto;}

.bread li:after{content:'\003e';margin-left:2px;margin-right:2px;color:#888888;}
.bread li:last-child:after{content: none;}

.fa-home {font-size: 14px;color:#888888;}
.bread span{display: inline-block;text-indent: -9999px}