Breadcrumb NavXTでパンクズリストを作成

CMSサイトでは、自分がどのページを見ているかわかるように、パンクズリストを表示していることがあります。今回は、Breadcrumb NavXTでパンクズリストを作成する方法を紹介します。

 出典 : Breadcrumb NavXT

設定方法

ダッシュボードの設定>Breadcrumb NavXTをクリックし、設定画面を開きます。

一般>パンクズの区切りにspanタグを入力し、任意のクラスを付けます。投稿タイプ>投稿階層を親要素に設定します。

一般>パンクズの区切りにspanタグを入力し、任意のクラスを付ける。

投稿タイプ>投稿階層を親要素に設定

コード

CSSに、右矢印になるようにスタイルを作成します。

.allow{
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-bottom: 0.1em; 
	margin-right: 0.5em;
	margin-left: 0.1em;
	border-top: solid 1px #272727;
	border-right: solid 1px #272727;
	transform: rotate(45deg);
}

パンクズリストを挿入したい場所に下記コードを入力します。

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

確認

プレビューを確認します。

プレビューを確認

以上で今回の説明は終了です。区切りをHTMLタグにしておけば、矢印のデザインも色々変更できます。タグで囲んで、色の変更などもできます。

RECOMMEND

CONTACT

Webサイト作成は、是非
CXG DESIGNへご検討ください。