concrete5で Manual Navを使う

      2016/12/09

中根さんのconcrete5 でケーキ屋さんのサイトを作ろう! :: オートナビのカスタマイズを拝見してたらconcrete5のグローバルナビゲーションで無料のManual Navを利用されていたので今やってる案件で使ってみるメモ。

Manual Navって何

ナビゲーションに表示したいページを個別に指定できるのが便利なアドオン。
通常のオートナビだとちょっと面倒だったりナビから除くと今度はサイトマップで全表示したいときに表示してくれないとか理想にもってくためには手間がかかるのでアドオンでさくさくっとやってしまおうという魂胆。

インストールしてね

concrete5 -- Manual Nav
Manual Navの配布ページはこちら

Manual Nav6

Manual Nav7
Manual Navをダウンロードし、解凍し、ルート上のpackagesにアップロード!
その後管理画面からインストールしてね。
詳細は既にDesigner Contentの時に紹介してるから省略!
いちいちダウンロードアップロードより管理画面からマーケットプレイスとつなげちゃったほうが早い。

管理画面での設定

Manual Nav8
現在は作ったページが全部表示される。
管理画面のスタックからグローバルエリア「Main Navigation」をつくり、ブロックを新規追加。

Manual Nav9
「Manual Nav」を選択する。

Manual Nav10
[Add Link To Menu...] をクリックする。

Manual Nav11
ページを選ぶ。

Manual Nav12
[Add Link To Menu...] をクリックしてどんどん増やす。決定したら「新規」をクリックする。

Manual Nav13
できた!カンタン!リンク文字も変更できるのがいいですね。
あとはCSSでデザインを修正して完成。
おしまい!!

ナビゲーションに画像使いたくね?

カスタムテンプレートでできました。
concrete5 でケーキ屋さんのサイトを作ろう! :: ページ属性(カスタム属性)を参考にしています。中根さんの記事は本当に丁寧で読みやすいです。

ページ属性の設定

navigation1
ページとテーマ内の「属性」をクリックし、「画像/ファイル」属性を新規作成する。

navigation2
ハンドル名は中根さんのnavigation_pic_offをそのままお借りしています。
そして上記記事の例に沿って、オフ画像を準備し、オン画像は無し。マウスオーバー時はCSS利用。

navigation3
属性できました。

Manual Nav15
ナビゲーションに追加するページの「ページ設定」で画像を追加しておきます。

カスタムテンプレートの準備

インストールしたディレクトリ/packages/manual_nav/blocks/manual_navフォルダ内からview.phpをコピーして作ります。
コピーしたファイルをmain_navi.phpとし(何でもいいけどね)中身は下記のようにした。

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<nav id="gateaux-navi">
<ul class="ccm-manual-nav">
<?php  foreach ($links as $link):
	$cssClasses = array();
	if ($link->isCurrent) {
		$cssClasses[] = 'nav-selected';
	}
	if ($link->inPath) {
		$cssClasses[] = 'nav-path-selected';
	}
	$cssClasses = implode(' ', $cssClasses);
	
	$navigationPicOff = $link->cObj->getAttribute('navigation_pic_off');

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

	if($navigationPicOff) {
		echo '<img src="' . $navigationPicOff->getURL() .'" alt="' . $link->name . '"/>';
	} else {
		echo $link->name;
	}
	echo '</a>';
	?>
<?php  endforeach; ?>
</ul>
</nav>

navigation_pic_offがハンドル名なので、変更した人はここも変えてね。

ポイントは、24行目で変数にボタン画像の『ページ属性 : navigation_pic_off』の値を代入、28行目で画像のパスを出力しています。
ただ、『ページ属性』の『画像/ファイル』を使った場合は、もし画像が選択されていないと『Fatal error』になってしまいます。
参考:concrete5 でケーキ屋さんのサイトを作ろう! :: ページ属性(カスタム属性)

画像は絶対いるそうです。

修正したmain_navi.phpを
インストールしたディレクトリ/blocks/manual_nav(フォルダ作成する)/templates(フォルダ作成する)内にアップロード。
インストールしたディレクトリ/blocks/manual_nav/templates/main_navi.phpとします。

カスタムテンプレートを選択する

Manual Nav14
うまくいけばカスタムテンプレートをえらぶところにMain Naviと表示されるのでそちらを選択する。

Manual Nav16
うまくいけばこんな感じに画像で表示されるはず。
あとはサイト側でCSSで微調整してください。

 - カスタマイズ ,