wordpress Twenty Fourteenにパンクズ

相変わらずのwebネタです。というか、今やっている作業があるからメモを兼ねた更新が盛んでスイマセン。
今回は都市伝説的にSEOに効くと言われるパンくずを入れてみました。今、構築中のサイトで入れたので、ウチはその試し。

パンくず設置はプラグイン

パンくずの設定自体は面倒だったのでプラグインで済ませました。
使ったプラグインはBreadcrumb NavXTです。

コチラの設定方法はマークアップの記述までしていただいているサイト様を参考にさせて頂きました。
SEOモード

Breadcrumb NavXTはパンくずを設置したい場所に

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

の記述を入れるワケですが、デフォルトのテーマTwenty Fourteenでヘッダーphpの下部に入れると、ウチみたいにグリッドデザインを使ってたりスライダー入れてると、きっと変なスペースが出来てせっかくのスタイルが崩れるので、色々いじくりました。

まず、コードの記述を加えたのは、content-page.php、single.php、アーカイブ、カテゴリーテンプレート、
taxonomy-post_format.phpです。
他にも加えて良かったんだけど、ほとんど使って無いのは外してます。

挿入箇所は

<div id="content" class="site-content" role="main">

のすぐ下。
上のコードじゃないphpもあるけど、大体似たような位置。
でもcssを修正しないとかなり微妙なので、cssで調整。
Breadcrumb NavXT自体の調整はこんな感じにしてみました。

.breadcrumbs {
		font-size: 12px;
		margin: -20px 0px 10px 10px;
	}

@media screen and (max-width: 400px) {
	.breadcrumbs {
		margin: 0px;
	}
}

レスポンシブなんで、スマホ用の調整もやってます。
通常時がmargin: -20pxなんで、スマホで見た時にいなくなってしまうようでしたのでマージン0。あとはシングルページの時もいなくなる事があったので

.singular .site-content .hentry.has-post-thumbnail {
	margin-top: 0px;
}

です。

他にもあったかも知れないけど、大体こんな感じでウチの位置にいます。

レスポンシブって本当に面倒ですね。お陰で大変勉強になります。
phpがもう少し分かれば、もっと簡単に設置出来る気がするんですが、完全自己流なのでスイマセン。

おすすめのコンテンツ