concrete5 でケーキ屋さんのサイトを作ろう! :: オートナビのカスタマイズ

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

今回で、『concrete5 でケーキ屋さんのサイトを作ろう!』シリーズ4回目の記事です。
サンプルサイト作成方法の解説としては、順序立てたシリーズ記事になっていないかも知れませんが、『concrete5 関西ユーザーグループの勉強会』の開催にあわせた記事の公開になったりしていますので、お許しくださいませ。
また、毎度の長文になると思いますがお付き合いを…(ほとんど画像とコードで記事を占めていると思う…)

で、今回は『オートナビ・ブロック』のカスタマイズについてですが、デザインのカスタマイズは難しくないと思います。
というのも『オートナビ・ブロック』のデフォルト・テンプレートを見るとわかると思うのですが、書き出される HTML のコードは <ul> タグを使ったリスト形式です。
以前解説した『ページリスト・ブロック』のデフォルト・テンプレート場合は、 <h3> や <div> タグを使っていましたので、 <ul> タグを使ったリスト形式にカスタマイズしましたが、『オートナビ・ブロック』はデフォルトが <ul> タグのリスト形式なので、カスタマイズも簡単ではないでしょうか。

どちらかというと、『オートナビ・ブロック』の場合は、デザイン・カスタマイズよりも『設定』がちょっと難しいかも知れません。
難しいというより『クセがある』、『ややこしい』という感じかな…
ということで、デフォルトの『オートナビ・ブロック』を見てみましょう。

オートナビ・ブロックとは?

その名の通り、自動でナビゲーションの表示ができるブロック。
『ページリスト』と似ていますが、両者の違いは『オートナビブロックの使い方 :: concrete5 Japan 日本語公式サイト』をご覧いただくとわかりやすいと思います。

一般的には、グルーバル・ナビゲーション(メインメニュー)やサイドカラムのナビゲーション(ローカル・ナビゲーション)に使用することが多いと思います。
設定で、『パンくず・ナビゲーション』にも使うことができます。

まず、『オートナビ』を選択して、設定を変更せずに『オートナビ・ブロック』を『Main エリア』に追加してみます。

オートナビ・ブロックを追加

オートナビ・ブロックを追加

オートナビ・ブロックの設定

オートナビ・ブロックの設定は何も変更しない

オートナビ・ブロックの表示

追加されたオートナビ・ブロック

次に『オートナビ』の設定のうち『表示する下層ページ』と『下層ページ』を『すべてを表示』に変更してみます。

オートナビの設定を編集

オートナビの設定を編集

すべてのページを表示

フルサイトマップと同じようにすべてのページを表示

フルサイトマップ

フルサイトマップと比べてみると…

このように『オートナビ』の設定を編集することによって、どの階層から表示するか、どの階層まで表示するか、などを変更できます。

設定項目は、

  • ページ表示順
  • 閲覧権限
  • 表示するページ
  • 表示する下層ページ
  • 下層ページ

です。

最初の『ページ表示順』は、『サイトマップ順』以外に日付の『新しい順』や『アルファベット順』などがありますが、ナビゲーションとして使用する場合は『サイトマップ順』の一択ではないかと…
新着情報などを表示する『ページリスト』の場合は、『日付の新しい順』も使うでしょうけど、ナビゲーションの場合は使う機会がないと思います。
『サイトマップ順』に設定しておくと、フルサイトマップでページの順番を入れ替えてもナビゲーションに反映されますしね :-)

次の『閲覧権限』は、通常のサイトではあまり使うことはないと思います。

残りの3つ、『表示するページ』『表示する下層ページ』『下層ページ』に関しては、ちょっと設定がわかりにくいですが、『concrete5オートナビブロックの使い方まとめ | notnil creation weblog』で詳しく解説されていますので、こちらの記事を是非お読みくださいませ。

オートナビのコードを見てみよう

ファイルは、これ。

 
インストールしたディレクトリ/concrete/blocks/autonav/view.php
 

カスタム・テンプレートを作成する場合は、このファイルを複製します。

<?php defined('C5_EXECUTE') or die(_("Access Denied."));

$navItems = $controller->getNavItems();

/**
 * The $navItems variable is an array of objects, each representing a nav menu item.
 * It is a "flattened" one-dimensional list of all nav items -- it is not hierarchical.
 * However, a nested nav menu can be constructed from this "flat" array by
 * looking at various properties of each item to determine its place in the hierarchy
 * (see below, for example $navItem->level, $navItem->subDepth, $navItem->hasSubmenu, etc.)
 *
 * Items in the array are ordered with the first top-level item first, followed by its sub-items, etc.
 *
 * Each nav item object contains the following information:
 *	$navItem->url        : URL to the page
 *	$navItem->name       : page title (already escaped for html output)
 *	$navItem->target     : link target (e.g. "_self" or "_blank")
 *	$navItem->level      : number of levels deep the current menu item is from the top (top-level nav items are 1, their sub-items are 2, etc.)
 *	$navItem->subDepth   : number of levels deep the current menu item is *compared to the next item in the list* (useful for determining how many <ul>'s to close in a nested list)
 *	$navItem->hasSubmenu : true/false -- if this item has one or more sub-items (sometimes useful for CSS styling)
 *	$navItem->isFirst    : true/false -- if this is the first nav item *in its level* (for example, the first sub-item of a top-level item is TRUE)
 *	$navItem->isLast     : true/false -- if this is the last nav item *in its level* (for example, the last sub-item of a top-level item is TRUE)
 *	$navItem->isCurrent  : true/false -- if this nav item represents the page currently being viewed
 *	$navItem->inPath     : true/false -- if this nav item represents a parent page of the page currently being viewed (also true for the page currently being viewed)
 *	$navItem->attrClass  : Value of the 'nav_item_class' custom page attribute (if it exists and is set)
 *	$navItem->isHome     : true/false -- if this nav item represents the home page
 *	$navItem->cID        : collection id of the page this nav item represents
 *	$navItem->cObj       : collection object of the page this nav item represents (use this if you need to access page properties and attributes that aren't already available in the $navItem object)
 */


/** For extra functionality, you can add the following page attributes to your site (via Dashboard > Pages & Themes > Attributes):
 *
 * 1) Handle: exclude_nav
 *    (This is the "Exclude From Nav" attribute that comes pre-installed with concrete5, so you do not need to add it yourself.)
 *    Functionality: If a page has this checked, it will not be included in the nav menu (and neither will its children / sub-pages).
 *
 * 2) Handle: exclude_subpages_from_nav
 *    Type: Checkbox
 *    Functionality: If a page has this checked, all of that pages children (sub-pages) will be excluded from the nav menu (but the page itself will be included).
 *
 * 3) Handle: replace_link_with_first_in_nav
 *    Type: Checkbox
 *    Functionality: If a page has this checked, clicking on it in the nav menu will go to its first child (sub-page) instead.
 *
 * 4) Handle: nav_item_class
 *    Type: Text
 *    Functionality: Whatever is entered into this textbox will be outputted as an additional CSS class for that page's nav item (NOTE: you must un-comment the "$ni->attrClass" code block in the CSS section below for this to work).
 */


/*** STEP 1 of 2: Determine all CSS classes (only 2 are enabled by default, but you can un-comment other ones or add your own) ***/
foreach ($navItems as $ni) {
	$classes = array();

	if ($ni->isCurrent) {
		//class for the page currently being viewed
		$classes[] = 'nav-selected';
	}

	if ($ni->inPath) {
		//class for parent items of the page currently being viewed
		$classes[] = 'nav-path-selected';
	}

	/*
	if ($ni->isFirst) {
		//class for the first item in each menu section (first top-level item, and first item of each dropdown sub-menu)
		$classes[] = 'nav-first';
	}
	*/

	/*
	if ($ni->isLast) {
		//class for the last item in each menu section (last top-level item, and last item of each dropdown sub-menu)
		$classes[] = 'nav-last';
	}
	*/

	/*
	if ($ni->hasSubmenu) {
		//class for items that have dropdown sub-menus
		$classes[] = 'nav-dropdown';
	}
	*/

	/*
	if (!empty($ni->attrClass)) {
		//class that can be set by end-user via the 'nav_item_class' custom page attribute
		$classes[] = $ni->attrClass;
	}
	*/

	/*
	if ($ni->isHome) {
		//home page
		$classes[] = 'nav-home';
	}
	*/

	/*
	//unique class for every single menu item
	$classes[] = 'nav-item-' . $ni->cID;
	*/

	//Put all classes together into one space-separated string
	$ni->classes = implode(" ", $classes);
}


//*** Step 2 of 2: Output menu HTML ***/

echo '<ul class="nav">'; //opens the top-level menu

foreach ($navItems as $ni) {

	echo '<li class="' . $ni->classes . '">'; //opens a nav item

	echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';

	if ($ni->hasSubmenu) {
		echo '<ul>'; //opens a dropdown sub-menu
	} else {
		echo '</li>'; //closes a nav item
		echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
	}
}

echo '</ul>'; //closes the top-level menu

129行ありますけど、ほとんどがコメント文なので、デザイナーさんも怖からずにカスタマイズしましょうね :-D
このコメント部分に『オートナビ』をカスタマイズする上でたいへん便利なことが書かれています。

5行目から29行目までは、配列について。
例えば、16行目の『$navItem->name』は、119行目のように記述して『ページのタイトル』を表示します。
それぞれの値についても説明が書かれていますので、英語ですが一応読んでみましょう。

32行目から49行目までは、ページ属性について。
Handle: exclude_nav
これは、前回解説した『ページ属性』の『ナビから除く』です。
残りの3つは、それぞれのハンドル名で『ページ属性』を作る必要があります。
Handle: exclude_subpages_from_nav
これは『子ページをナビから除く』という名前にするとわかりやすいかも。
設定したページの子ページをナビゲーションに表示しなくなります。
Handle: replace_link_with_first_in_nav
この『ページ属性』が設定されていると、そのページではなく『最初の子ページにリンク』されます。
Handle: nav_item_class
スタイルシートでメニューボタンの背景画像を設定したいときなどに、任意のクラスを <li> に付加してくれます。
ただし、88行目から91行目のコメントを外す必要があります。

52行目から108行目までが、HTML に書きだす祭に <li> に付加されるクラスについて。
例えば、67行目から70行目のコメントを外すと、リストの最初の <li> に『nav-first』というクラスが付加されます。

このあたりのことも先ほどの『concrete5オートナビブロックの使い方まとめ | notnil creation weblog』に書かれていますので是非。

グローバル・ナビゲーションを作ってみよう

サンプルサイトのグローバル・ナビゲーションは、『オートナビ』を使わずに『Manual Nav』というアドオンを使っています。
理由は、『la paletteのお菓子 : Gâteaux』、『最新情報 : Actualité』、『la paletteについて : About us』、『お問い合わせ : Contact』の4つだけをメニュー項目として使用しますので、ナビゲーションに表示して欲しくないページが多過ぎます。
それらのページすべてに『ページ属性』の『ナビから除く』を設定するのも面倒くさい。
また、『グローバルナビに含む』という『ページ属性』を作るのも「何だかな〜」という理由です。
この『Manual Nav』アドオンはとても便利ですので、別の機会に紹介します。

で、今回は一般的なグルーバル・ナビゲーションを『オートナビ・ブロック』を使って作成したいと思います。
まず、どの項目をメニューに表示するか決めます。
サンプルサイトと同じように『la paletteのお菓子』、『最新情報』、『la paletteについて』、『お問い合わせ』の4項目 + 『la paletteのお菓子』のひとつ下の階層をドロップダウンで表示するようにします。
上記のサイトマップ画像の

  • ケーキ
  • 焼き菓子
  • チョコレート
  • マカロン
  • ホールケーキ
  • ギフト

ですね。

希望するようなリスト形式になるように『オートナビ』の設定をしてみます。

オートナビの設定

希望するリストになるように設定

設定したらプレビューで確認してみます。

オートナビのプレビュー

プレビューで確認してみる

基本的にはこれで OK。
表示させないページは、ページ属性の『ナビから除く』を設定。

ナビから除くを設定

表示させないページに『ナビから除く』ページ属性を設定

もう一度プレビューで確認。

プレビューで確認

再度、プレビューで確認

このとき『最新情報』の子ページ(『白桃を使ったタルトの季節がやってきました。』など…)には『ナビから除く』ではなく、別の方法で表示しないように設定します。
というのも、『最新情報』の子ページは『最新情報』という性質上、これからの更新によってページが追加されていくはずです。
ページを追加する度に『ナビから除く』を設定するのも面倒くさいですよね。
そこで先ほどのオートナビのコードに書いてあったページ属性の『exclude_subpages_from_nav』を使います。

 * 2) Handle: exclude_subpages_from_nav
 *    Type: Checkbox
 *    Functionality: If a page has this checked, all of that pages children (sub-pages) will be excluded from the nav menu (but the page itself will be included).

ハンドル名が『exclude_subpages_from_nav』、タイプは『チェックボックス』となっていますので、それにあわせて『ページ属性』を作ります。

サブページをナビから除く

ページ属性『サブページをナビから除く』を作成

次に『最新情報』のページ設定で『サブページをナビから除く』を追加・設定します。

『サブページをナビから除く』を設定

ページ属性『サブページをナビから除く』を『最新情報』ページに設定

再度、プレビューを確認してみます。

プレビューを確認

プレビューを確認すると希望するリストになっています

グローバル・ナビゲーションに表示したいリストになりましたので、ここで『オートナビ・ブロック』の HTML ソースを確認してみます。

<ul class="nav">
	<li class=""><a href="/hogehoge/index.php/gateaux/" target="_self" class="">la paletteのお菓子</a>
		<ul>
			<li class=""><a href="/hogehoge/index.php/gateaux/gateau/" target="_self" class="">ケーキ</a></li>
			<li class=""><a href="/hogehoge/index.php/gateaux/gateau_sec/" target="_self" class="">焼き菓子</a></li>
			<li class=""><a href="/hogehoge/index.php/gateaux/chocolat/" target="_self" class="">チョコレート</a></li>
			<li class=""><a href="/hogehoge/index.php/gateaux/macaron/" target="_self" class="">マカロン</a></li>
			<li class=""><a href="/hogehoge/index.php/gateaux/entremets/" target="_self" class="">ホールケーキ</a></li>
			<li class=""><a href="/hogehoge/index.php/gateaux/cadeau/" target="_self" class="">ギフト</a></li>
		</ul>
	</li>
	<li class=""><a href="/hogehoge/index.php/actualite/" target="_self" class="">最新情報</a></li>
	<li class=""><a href="/hogehoge/index.php/about/" target="_self" class="">la paletteについて</a></li>
	<li class=""><a href="/hogehoge/index.php/contact/" target="_self" class="">お問い合わせ</a></li>
</ul>

最初の方で書きましたが、すでに <ul> のリスト形式になっていますので、このまま <ul class=”nav”> に対してスタイルを設定してもかまわないと思いますが、デザイン・カスタマイズということなので『カスタム・テンプレート』を作ってみましょう :-)

カスタム・テンプレートの作成方法のおさらい。

 
インストールしたディレクトリ/concrete/blocks/autonav/view.php
 

を下記のディレクトリに複製し、グローバル・ナビゲーション用の css ファイルも同じディレクトリに設置。

 
インストールしたディレクトリ/blocks/autonav/templates/global_navi/view.php
インストールしたディレクトリ/blocks/autonav/templates/global_navi/view.css
 

カスタム・テンプレートのコードは、

<?php defined('C5_EXECUTE') or die(_("Access Denied."));

$navItems = $controller->getNavItems();

foreach ($navItems as $ni) {
	$classes = array();

	if ($ni->isCurrent) {
		$classes[] = 'nav-selected';
	}

	if ($ni->inPath) {
		$classes[] = 'nav-path-selected';
	}

	$ni->classes = implode(" ", $classes);
}

echo '<ul class="g-nav clearfix">';

foreach ($navItems as $ni) {

	echo '<li class="' . $ni->classes . '">';

	echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';

	if ($ni->hasSubmenu) {
		echo '<ul>';
	} else {
		echo '</li>';
		echo str_repeat('</ul></li>', $ni->subDepth);
	}
}

echo '</ul>';

です。
コメント行をすべて削除しましたのでかなり行数が少なくなっていますが、元ファイルとの違いは19行目のクラス名だけです。
それ以外は何も変更・追記していません。
この <ul class=”g-nav clearfix”> のクラス名でスタイルを設定した css ファイルが、

.g-nav {
  	list-style-type: none;
  	width: 100%;
  	height: 40px;
  	margin: 30px auto;
  	padding: 0;
  	background-color: #dfb5b2;
  	border-bottom: 5px solid #d5a19d;
}

.g-nav li {
	float: left;
	width: 25%;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
}

.g-nav li a {
	display: block;
	margin: 0;
	padding: 15px 0;
	color: #fff;
	font-size: 1em;
	line-height: 1;
	text-decoration: none;
	border-left: solid 1px #fff;
}

.g-nav li:hover > a {
	background: #fff;
	color: #d5a19d;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.g-nav li ul {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 45px;
	left: 0;
}

.g-nav li:last-child ul {
  	left: -100%;
  	width: 100%
}

.g-nav li ul li {
	width: 100%;
	height: 0;
	color: #fff;
	overflow: hidden;
		-webkit-transition: .2s;
		-moz-transition: .2s;
	transition: .2s;
}

.g-nav li ul li a {
  	padding: 15px 10px 13px;
  	text-align: left;
  	font-size: .8em;
    background: #d5a19d;
    border: none;
}

.g-nav li:hover ul li {
	height: 35px;
    overflow: visible;
	border-top: 1px solid #fff;
}

.g-nav li:hover ul li:first-child {
	border-top: 1px solid #d5a19d;
}

このカスタム・テンプレートを『オートナビ・ブロック』に設定します。

オートナビ・ブロック

オートナビ・ブロック

カスタム・テンプレート

カスタム・テンプレートを設定

スタイルが適用

スタイルが適用されました

ドロップダウン

ドロップダウン・メニューも表示

これで『la paletteのお菓子』以下のサブページがドロップダウンで表示されるグローバル・ナビゲーションが完成です。

このようなグローバル・ナビゲーションの場合、カスタマイズといっても <ul> のクラス名を変更しただけです。
最初に書いた通り『オートナビ』のデザイン・カスタマイズは、全然難しくないというのを実感していただけたのではないかと思います。
あとは、カレントページ表示時のスタイルを css ファイルに記述するくらいかな。(カレントページには『nav-selected』というクラスが付加されます)
とりあえず、『オートナビ・ブロック』の基本的なカスタマイズは理解していただけたでしょうか?

サンプルサイトのオートナビ・ブロック

サンプルサイトで『オートナビ・ブロック』を使用しているところは3箇所です。

la paletteのお菓子ページ

la paletteのお菓子ページのナビゲーション

la paletteのお菓子』ページ中ほどのナビゲーション。

各お菓子のページ

パンくずナビとサイドナビゲーション

『la paletteのお菓子』ページのひとつ下の階層のサイドナビゲーションとパンくずナビが『オートナビ・ブロック』です。

それぞれ順番に解説していきますが、パンくずナビ以外は『ページ属性』を使ったカスタマイズになりますので、前回の記事を確認しながら読んでいただくとわかりやすいかも…

la paletteのお菓子ページのナビゲーション

まず、横一列に並んだメニュー。
これは前回の記事でも書きましたが『la paletteのお菓子メニューのオフ画像』という『ページ属性』をボタン画像として使用しています。
マウスオーバーで色が変化するのはスタイルシートで実現しています。

ページ属性でボタン画像を選択

ページ属性でボタン画像を選択

わかりづらいですが、『gâteau ケーキ』というボタン画像を選択しています。

表示するリスト(階層)

表示するリスト(階層)を指定

メニューに表示するリスト

メニューに表示するリストをプレビューで確認

先ほど解説したグローバル・ナビゲーションのドロップダウン部分を表示するように設定しています。
この『オートナビ・ブロック』にカスタムテンプレートを設定するとla paletteのお菓子ページのメニュー表示になります。

カスタムテンプレートのコードは、

<?php defined('C5_EXECUTE') or die(_("Access Denied."));

$navItems = $controller->getNavItems();

foreach ($navItems as $ni) {
	$classes = array();

	if ($ni->isCurrent) {
		$classes[] = 'nav-selected';
	}

	if ($ni->inPath) {
		$classes[] = 'nav-path-selected';
	}

	$ni->classes = implode(" ", $classes);
}

echo '<nav id="gateaux-navi" class="clearfix">';
echo '<ul>';

foreach ($navItems as $ni) {

	$navigationPicOff = $ni->cObj->getAttribute('navigation_pic_off');

	echo '<li class="' . $ni->classes . '">';
	echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">';
	echo '<img src="' . $navigationPicOff->getURL() .'" alt="' . $ni->name . '"/>';
	echo '</a>';

}

echo '</ul>';
echo '</nav>';

ポイントは、24行目で変数にボタン画像の『ページ属性 : navigation_pic_off』の値を代入、28行目で画像のパスを出力しています。
ただ、『ページ属性』の『画像/ファイル』を使った場合は、もし画像が選択されていないと『Fatal error』になってしまいます。

Fatal error

ページ属性で画像が選択されていないと『Fatal error』になる

ですので、『ページ属性』で『画像/ファイル』を使用する場合には、画像が選択されていない場合の処理を必ず書きましょう。
最初、これがわからなくて「アワワ」ってなりました :-D
というわけで、書き直したカスタムテンプレートは、

<?php defined('C5_EXECUTE') or die(_("Access Denied."));

$navItems = $controller->getNavItems();

foreach ($navItems as $ni) {
	$classes = array();

	if ($ni->isCurrent) {
		$classes[] = 'nav-selected';
	}

	if ($ni->inPath) {
		$classes[] = 'nav-path-selected';
	}

	$ni->classes = implode(" ", $classes);
}

echo '<nav id="gateaux-navi" class="clearfix">';
echo '<ul>';

foreach ($navItems as $ni) {

	$navigationPicOff = $ni->cObj->getAttribute('navigation_pic_off');

	echo '<li class="' . $ni->classes . '">';
	echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">';

	if($navigationPicOff) {
		echo '<img src="' . $navigationPicOff->getURL() .'" alt="' . $ni->name . '"/>';
	} else {
		echo $ni->name;
	}
	
	echo '</a>';

}

echo '</ul>';
echo '</nav>';

29行目から33行目に条件文を追加。

サイドカラムのナビゲーション

サイドカラムのナビゲーションに表示する項目は、先ほどの横並びメニューと同じです。
ただし、『オートナビ』の設定が若干違います。(先ほどと同じでも OK)
先ほどの一階層下のページのサイドカラムに表示しますので、『表示するページ』を『現在の階層から』に設定しています。

オートナビの設定

表示するページを『現在の階層から』に設定

サイドメニューの表示項目

サイドメニューの表示項目をプレビューで確認

設定は以上。
デザイン的な装飾は、スタイルシートで実現しています。
concrete5でのカスタマイズといえるのは、横並びメニューと同じで『ページ属性』を使用しているというところ。
サイドメニューでは、『ページの仏語名』という『ページ属性』を上記のプレビューで表示された各ページに設定しています。

ページの仏語名

ページ属性 : ページの仏語名

ページ属性 : ページの仏語名

ページの仏語名を記入します

この『ページの仏語名』を先ほどのプレビューで表示したメニューの各項目に追加で表示するようにカスタムテンプレートを作成します。

サイドメニューのカスタム・テンプレート

サイドメニューのカスタム・テンプレートを選択

サンプルサイトのサイドメニューでは、もうひとつカスタマイズしているところがあります。
サイドメニューのタイトルとして親ページ(la paletteのお菓子ページ)のタイトル(ページの仏語名 : Gâteaux)を表示するようにしています。

サイドメニュー

親ページの仏語名をナビゲーションのタイトル & 各ページの仏語名をメニュー項目に追加

カスタム・テンプレートのコードは、

<?php defined('C5_EXECUTE') or die(_("Access Denied."));

$navItems = $controller->getNavItems();

foreach ($navItems as $ni) {
	$classes = array();

	if ($ni->isCurrent) {
		$classes[] = 'nav-selected';
	}

	if ($ni->inPath) {
		$classes[] = 'nav-path-selected';
	}

	$ni->classes = implode(" ", $classes);
}

$parent = Page::getByID($this->controller->cParentID);
$parentURL = View::URL($parent->getCollectionPath());

echo '<nav id="side-navi">';
echo '<h3><a href="' .$parentURL. '">' .$parent->getAttribute('french_name'). '</a></h3>';
echo '<ul class="clearfix">';

foreach ($navItems as $ni) {

	$frenchName  = $ni->cObj->getAttribute('french_name');

	echo '<li class="' . $ni->classes . '">';

	echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '<span>' .$frenchName. '</span></a>';

	echo '</li>';

}

echo '</ul>';
echo '</nav>';

19行目で親ページの値、20行目で親ページの URL をそれぞれの変数に代入、23行目で親ページの URL と『ページ属性 : ページの仏語名』を <h3> として出力。
28行目で各ページ(オートナビのリスト項目ページ)の『ページ属性 : ページの仏語名』を変数に代入、32行目で出力。
上記が『ページ属性』を使ったカスタマイズです。
あと、22行目と39行目で先ほどの <h3>親ページのページの仏語名 </h3> と <ul> リストを <nav> タグでラップして、スタイルを設定しています。
今回は、親ページの『ページ属性』を表示するカスタマイズでしたが、親ページのタイトルを表示するカスタマイズを覚えておくと重宝すると思います。

上記23行目の

echo '<h3><a href="' .$parentURL. '">' .$parent->getAttribute('french_name'). '</a></h3>';

というコードを

echo '<h3><a href="' .$parentURL. '">' .$parent->getCollectionName(). '</a></h3>';

と変更すれば OK です。
サイドカラムのナビゲーション(ローカル・ナビゲーション)でよく使う気がします。

パンくずナビゲーション

最後に『パンくずナビ』の設定。

パンくずリスト形式に設定

パンくずリスト形式に設定

表示する下層ページの設定を『パンくずリスト形式で表示』にします。

カスタムテンプレート無しのパンくずリスト

カスタムテンプレート無しのパンくずリスト

先ほどグローバル・ナビゲーションを作成するときに『ホーム(トップページ)』に『ページ属性』の『ナビから除く』を設定したので、リストに『ホーム』が表示されていません。
これでは、パンくずナビゲーションとしては不十分ですよね。
そういうときのために標準で『パンくずナビ』の『カスタム・テンプレート』が用意されていますので、適用してみます。

標準のパンくずナビ

標準のパンくずナビゲーションのカスタムテンプレートを適用

これで『ホーム』も表示されました。
このカスタム・テンプレートのコードを見てみると、

<?php defined('C5_EXECUTE') or die(_("Access Denied."));
$navItems = $controller->getNavItems(true);

for ($i = 0; $i < count($navItems); $i++) {
	$ni = $navItems&#91;$i&#93;;
	if ($i > 0) {
		echo ' <span class="ccm-autonav-breadcrumb-sep">&gt;</span> ';
	}
	
	if ($ni->isCurrent) {
		echo $ni->name;
	} else {
		echo '<a href="' . $ni->url . '" target="' . $ni->target . '">' . $ni->name . '</a>';
	}
}

デフォルトの『オートナビ』ファイルと比べると HTML に書き出される部分が <ul> のリスト形式ではなかったりしますが、ポイントは2行目!

$controller->getNavItems(true)

この引数が『true』だと、『ナビから除く』という『ページ属性』を無視します。
よく考えられてますよね。
いや〜、簡単なことなんだけどスゴイ!

この標準で用意されているパンくず・ナビゲーションのカスタム・テンプレートに対してスタイルを設定してもいいのですが、やはりパンくず・ナビゲーションもカスタム・テンプレートを作ってみましょう。

ちょっと話が逸れますが、パンくず・ナビゲーションのマークアップってどうしてますか?
個人的な慣例で <ul> のリスト形式でマークアップしてますが、「<ol> にすべきだ!」、「いや、そもそもリスト形式を使うべきではない!」とか、色々な意見を聞いたりするのですが、実際はどうなんでしょう?
それとも、あまり気にすることでもないのかなぁ…

というわけで、リスト形式を使ったパンくず・ナビゲーションのカスタムテンプレート。

<?php defined('C5_EXECUTE') or die(_("Access Denied."));
$navItems = $controller->getNavItems(true);

echo '<nav id="bread-crumbs">';
echo '<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="clearfix">';

for ($i = 0; $i < count($navItems); $i++) {
	echo '<li>';
	$ni = $navItems[$i];

	if ($ni->isCurrent) {
		echo '<span itemprop="title">' .$ni->name. '</span>';
	} else {
		echo '<a href="' . $ni->url . '" target="' . $ni->target . '" itemprop="url"><span itemprop="title">' . $ni->name . '</span></a>';
	}
	echo '</li>';
}

echo '</ul>';
echo '</nav>';

これをパンくずリスト形式の『オートナビ・ブロック』に適用すると

パンくずナビにスタイルが適用

パンくずナビゲーションにスタイルが適用されました

どうでしたか?
最初に書いたように基本的な『オートナビ』のカスタマイズは、それほど難しくないでしょ。
サンプルサイトのような『ページ属性』を使ったカスタマイズでもカスタム・テンプレートにちょっと記述するだけで実現できます。
最初にグローバル・ナビゲーションの解説をしましたが、サンプルサイトを制作したときはこのようなナビゲーションを想定していませんでした。
今回の記事のためにカスタマイズしたわけですが、ほぼスタイルシートだけで実現しています。
また、グローバル・ナビゲーションとサイド・ナビゲーションではスタイルが全然違います。
でも『オートナビ』の設定はほぼ同じです。
このように『カスタム・テンプレート』を活用することで色々なスタイルをそれほど難しくなく、時間をかけずに実現できるのが concrete5の良いところだと思うし、デザイナーの私にはありがたいです。

というわけで、『オートナビ』のカスタマイズでした。
長文にお付き合いありがとうございました :-P

concrete5 公式活用ガイドブック (Web Designing BOOKS)

concrete5 公式活用ガイドブック (Web Designing BOOKS)

posted with amazlet at 14.05.06
猪上 博史 Katz Ueno 榊 友哉 佐々木 多生 中根 紳一 菱川 拓郎 吉川 智久
マイナビ (2010-08-05)
Amazon.co.jp で詳細を見る

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。