Full Widthのカスタム投稿用テンプレートにパンくずリストを表示

カスタム投稿のfull widthテンプレートにパンくずリストを表示させる。

カスタム投稿のfull widthテンプレートを作成できるようになったので、そこにパンくずリストを追加する。

パンくずリストの表示には、Breadcrumb NavXTプラグインを使用する。


カスタム投稿のfull widthテンプレートの表示させたい部分に以下のコードを挿入。

[php]

[/php]

このままでは、左寄りの表示なってしまうので、CSSで表示場所の指定を行う。


上段が、PCなどでのブラウザで表示時のCSS。
中段が、スマホなどでの表示時のCSS。
下段がウイジッド内などでの表示時のCSS。

[php]
/*
bleadcrumbs full width top
*/

.breadcrumbs-fulltop {
margin: -20px 20px 10px 40px;
}

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

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

以下のように表示される。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です