Blog

Designer Content Proで作るナビゲーションブロック

Posted by admin at 9:24 日時 2014/04/30

繰り返し要素を入力することができるブロックタイプを、マウス操作でかんたんに作成・管理できるDesigner Content Proアドオンを使えば、定型フォーマットを繰り返し入力させるブロックや、画像スライドショーなどの開発がものすごく楽になりますが、ナビゲーションを作る用途にも使えます。concrete5にはサイトマップから自動的にナビゲーションを出力してくれる便利な「オートナビ」ブロックがありますが、時にはサイトマップとは切り離して、任意にページを並べたナビゲーションが作りたい場合もあります。

下記は、”link” というハンドル名の「リンク」フィールドでリンクを指定、”css_class” というハンドル名の「テキスト」フィールドでCSSクラス属性値を指定する、というカスタムブロックをDesigner Content Proで作成した場合の、ビューテンプレートの作例です。

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php /* This block was made with Designer Content Pro. Visit http://theblockery.com/dcp for documentation. */ ?>
<?php
/**
* link: Link Field
* css_class: Textbox field
*/
// Get current page path
$current_path = Page::getCurrentPage()->getCollectionPath();
// Get repeating items
$items = $controller->getRepeatingItems();
// Check if items exist
if (count($items) > 0) : ?>
<nav class="dcp-manual-nav" role="navigation">
<ul>
<?php foreach ($items as $item):
// Get field values
$title = $item->link->getText();
$url = $item->link->getHref();
// Determine CSS classes
$classes = array();
// Check if the link is c5 Page
if ($item->link->isPageLink()){
$page = $item->link->getPageObj(); // to get page object, you need DCP 1.2+
$target = ($page->getCollectionPointerExternalLink() != '' && $page->openCollectionPointerExternalLinkInNewWindow()) ? '_blank' : $page->getAttribute('nav_target');
$target = empty($target) ? '_self' : $target;
// get the nav menu item's path (for comparison to the current page path)
$item_path = $item->link->getPageObj()->getCollectionPath();
if ($item_path == $current_path) {
// class for the page currently being viewed
$classes[] = 'nav-selected';
}
if (!empty($item_path) && (strpos($current_path, $item_path) === 0)) {
// class for parent items of the page currently being viewed (except the home page)
$classes[] = 'nav-path-selected';
}
} else {
// the link is external link
$target = '_blank';
}
if ($item->css_class->getText()) {
// class from the item field
$classes[] = $item->css_class->getText();
}
// Put all classes together into one space-separated string
$class = implode(" ", $classes);
?>
<li><a href="<?php echo $url?>" class="<?php echo $class?>" target="<?php echo $target?>"><?php echo $title?></a></li>
<?php endforeach; ?>
</ul>
</nav>
<?php endif;
view raw view.php hosted with ❤ by GitHub

Manual Navというアドオンでも、ページを任意に指定し、任意に並び替えることができるナビゲーションを作成できますが、Designer Content Proのリンクフィールドで「コンボ」を指定すると、外部リンクでもサイトマップ内のページでもどちらでも選べるので汎用性が増します。

また、現在表示しているページの場合は “nav-selected” 現在表示しているページの祖先ページの場合は “nav-path-selected” クラス属性値が入るようになっています。

もちろん、このようなナビゲーションは記事ブロックに直接書いても近いことはできますが、開発者が提供するアドオンを使用することで、よりデザインカスタマイズの自由度が増し、かつ運用しやすいサイトを作ることができると思います。

上記のビューテンプレートの作例は、アドオン作者のJordanに添削してもらいました。Thanks Jordan!

concrete5.org :: Forum :: View template example – Manual Nav with Combo link field


Share this entry