SOY CMS2でのパンくずリストを表示するためのテンプレートタグ

  • 投稿日:
  • by
  • カテゴリ:

SOY CMS2には、『パンくずプラグイン』というのがあるようです。SOY CMS2のサイトにあるその他のテンプレートタグというドキュメントページに記載があります。

しかし、テンプレートタグリストのコメントには、『使用法はプラグインの画面参照』と書かれており、書かれているとおりに、プラグインの画面参照をしようと管理画面を確認したのですが、 パンくずんpプラグインの画面がどこにあるのかが分からず、どこを参照すれがよいのか分からずにいました。

しかし、SOY CMS2でサイト作成をするときに、『標準テンプレート』を選択していれば、『標準テンプレート 記事詳細』に、パンくずリスト用のテンプレートタグが記述されています。

また、1月に開催されたSOY CMS2勉強会で、配布された『テンプレートタグまとめ』のドキュメントにも記述されていました。

パンくずリストのテンプレートタグ

『テンプレートタグまとめ』のドキュメントには、下記のように記述されていました。

<!-- cms:id="bread_crumbs" -->
<a cms:id="page_link"><!-- cms:id="page_name" /--></a>
<!-- cms:id="tree_child" --> > <!-- cms:id="tree" -->[繰り返し]<!-- /cms:id="tree" --><!-- /cms:id="tree_child" -->
<!-- /cms:id="bread_crumbs" -->

cms:id="bread_crumbs"は、その他のテンプレートタグにも記載されていますが、その他にもcms:id="tree_child"cms:id="tree"を用いる必要があります。

マークアップ

パンくずリストのマークアップの仕方ですが、p要素でやるのが良いのか、ul要素でやるのが良いのか、などいろんな意見があるかと思います。色んなサイトのパンくずリストのマークアップを見てみると、やはりp要素やul要素でマークアップしていることが多いです。

なので、参考までに、パンくずリストのテンプレートタグを用いたコード例を下記に示します。

p要素でのマークアップ

上記のテンプレートタグをp要素で囲むだけです。SOY CMS2の標準テンプレートはp要素で書かれています。

<p id="topicpath">
<!-- cms:id="bread_crumbs" --><a cms:id="page_link"><!-- cms:id="page_name" /--></a>
<!-- cms:id="tree_child" --> &gt; <!-- cms:id="tree" --><!-- /cms:id="tree" --><!-- /cms:id="tree_child" --><!-- /cms:id="bread_crumbs" -->
</p>

ul要素でのマークアップ

>のようなアローの表示は、CSSで行うと以下のようになります。

<ul id="topicpath">
<!-- cms:id="bread_crumbs" -->
<li><a cms:id="page_link"><!-- cms:id="page_name" /--></a></li>
<!-- cms:id="tree_child" --><!-- cms:id="tree" --> <!-- /cms:id="tree" --><!-- /cms:id="tree_child" -->
<!-- /cms:id="bread_crumbs" -->
</ul>

>のようなアローも同時に出力する場合は以下のようになります。(アローもli要素で囲まれてしまいますが・・・)

<ul id="topicpath">
<!-- cms:id="bread_crumbs" -->
<li><a cms:id="page_link"><!-- cms:id="page_name" /--></a></li>
<!-- cms:id="tree_child" -->
<li> &gt; </li>
<!-- cms:id="tree" --> <!-- /cms:id="tree" -->
<!-- /cms:id="tree_child" -->
<!-- /cms:id="bread_crumbs" -->
</ul>

ちなみに僕は下記のようにしています。僕はp要素を使ってマークアップをしており、アローは画像にしています。

<p id="topicpath">現在位置:<!-- cms:id="bread_crumbs" --><a cms:id="page_link"><!-- cms:id="page_name" /--></a>
<!-- cms:id="tree_child" --> <img src="/files/common/arrow.png" alt="の中の" width="16" height="16" /> <!-- cms:id="tree" --><!-- /cms:id="tree" --><!-- /cms:id="tree_child" --><!-- /cms:id="bread_crumbs" --></p>

何かのご参考になれば幸いです。また、もっと良い方法があればコメントをください。