[baserCMS]パンくずリストの使い方

今回はホームページ制作でよく利用するbaserCMSの「パンくずリスト」の設定方法、使い方、カスタマイズについてご紹介したいと思います。

実行環境

• baserCMS 3.0.6.1
• Vagrantを使った仮想環境（公式リポジトリからダウンロードできます）

パンくずリストってなに？

パンくずリストというのは、現在見ているページからTOPページまでの階層を示すナビゲーションで、多くのホームページで採用されています（下図）。

baserCMSでは標準でこのパンくずリストを生成する機能があり、手動で階層を設定する方法と、自動で階層を判定・出力してくれる方法とがあります。一般的には自動でやってしまうのが良さそうですが、何かしらの事情によって、表示させたい階層と内部的な構造が異なる場合などは、手動でリストを好きなように設定する方法を重宝します。

手動で階層を設定し、リストを出力させる

まず手動で階層を設定し、リストを出力する方法からご紹介します。baserCMSの歴史としてはこちらの方法のほうが古く、多くのサイトで利用されているからです。

この方法のポイントは「２段構え」です。「１．まず、階層に表示させたい内容をセット」してから「２．セットした内容を出力させる」というイメージです。

階層に表示させたい内容（カテゴリ名やページ名など）は、固定ページ管理の「コード」にbaserCMS関数を使ってセットします。

例えば、「ホーム ＞ カテゴリ名 ＞ ページ名」というリスト階層を表示させたい場合、 ここで「カテゴリ名」と「ページ名」をセットします（最上位階層の「ホーム」は、最終的にリストを出力する際に設定します）。

セットする際に用いる関数は

$this->BcBaser->addCrumb()

パンくずリストの要素を追加する関数。追加するだけで出力はしない。リストを出力するには後述の関数を別途使用する。

です。第１引数にリンク文字、第２引数にURLをとります。今回の例（ホーム ＞ カテゴリ名 ＞ ページ名）であれば、以下のようにセットします。

  <?php $this->BcBaser->addCrumb('カテゴリ名','/category/index') ?>

<?php $this->BcBaser->addCrumb('ページ名') ?>

これで階層のセットはOKです。あとはセットした内容を表示させる必要があります。セットした名用を表示するには、次のbaserCMS関数を使用します。

$this->BcBaser->crumbs()

パンくずリストを出力する。事前にセットされた要素を考慮してくれる。

この関数は、第１引数に区切り文字（表示の際に階層と階層の間を区切る文字）、第２引数に最上位階層（つまりトップページ）を表すテキストをとります。出力用の関数ですので、レイアウトテンプレートに予め記述しておくことが多いように思います。 今回の例ですと、以下のようにして使う事になります。

  
    <?php $this->BcBaser->crumbs('>' , 'ホーム') ?>
  

これで区切り文字が「＞」となり、トップページを表すテキストは「ホーム」になります。結果的に、パンくずリストは以下のように出力されます。

  ホーム ＞ カテゴリ名 ＞ ページ名

自動で階層を判断しリストを出力させる

次は自動で階層を判断し、リスト出力する方法をご紹介します。使用する関数は、

$this->BcBaser->crumbsList()

パンくずリストを出力します。出力されるHTMLはElementsフォルダ内に設置されたエレメントファイル「crumbs.php」で調整できます（後述）。

です（ちなみに、よく似た名前でCakePHPの関数「getCrumbsList()」がありますが中身は別物です）。この関数をテンプレートで使用すると、カレントページ（見ているページ）までの階層を出力してくれます。

この関数は出力する際にエレメントファイル「crumbs.php」を利用します。このエレメントファイルを調整することで、出力されるHTMLを多少変更する事ができ、例えば（後述するように）パンくずリストをliタグを使って出力させることなどができます。

出力されるHTMLをカスタマイズする

さて実際の制作現場では、前述の自動で階層を判断してくれる「$this->BcBaser->crumbsList()」を使用する事が多いと思います。簡単でとても良いのですが、デフォルト状態のままだと気になる事が１点あります。それは「パンくず”リスト”」という名前にも関わらず、リストタグで出力してくれない事です。

些細なことかもしれませんが、デザイナーさんやコーダーさんから上がってきたHTMLファイルをテーマ化する際、パンくずリストにliタグが使われていることも多く、CSSもそうしたコーディングに適した形で組まれているため、このままliタグを使わないという事になると、新たにスタイルシートを追加することにもなり少し面倒です。ですがご安心ください。ちゃんと解決策が用意されています。

この「$this->BcBaser->crumbsList()」という関数は、下記のエレメントファイルに書かれた処理結果を出力するようになっています。

  /lib/Baser/Elements/crumbs.php

これを以下の場所にコピーします。

  /app/webroot/theme/（お使いのテーマ）/Elements/crumbs.php

コピーを行うのは、appフォルダ以下に移すことによって、将来のバージョンアップ時などに発生する、無用な書き換えを回避するためです。

なお、barketなどで入手したテーマをお使いの場合、すでにこの「crumbs.php」が存在している事があります。その場合は、下記の内容を参考にして必要箇所だけを書き換えてください（ここでは１からデザインを起こし、コーディングしていることを前提で記述しています）。

さて、デフォルト状態で「crumbs.php」の処理部分は以下のように書かれています。

  
if ($this->BcBaser->isHome()) {
     echo '<strong>ホーム</strong>';
} else {
     $crumbs = $this->BcBaser->getCrumbs();
     if (!empty($crumbs)) {
          foreach ($crumbs as $key => $crumb) {
               if ($this->BcArray->last($crumbs, $key + 1)) {
                    if ($crumbs[$key + 1]['name'] == $crumb['name']) {
                         continue;
                    }
               }
               if ($this->BcArray->last($crumbs, $key)) {
                    if ($this->viewPath != 'home' && $crumb['name']) {
                         $this->BcBaser->addCrumb('<strong>' . $crumb['name'] . '</strong>');
                    }
               } else {
                    $this->BcBaser->addCrumb($crumb['name'], $crumb['url']);
               }
          }
     }
     elseif (empty($crumbs)) {
          if ($this->name == 'CakeError') {
               $this->BcBaser->addCrumb('<strong>404 NOT FOUND</strong>');
          }
     }
     $this->BcBaser->crumbs(' &gt; ', 'ホーム');
}
  

詳しい処理内容の説明は省きますが、ここにリストタグを追記していきます。結果的に以下のようになるはずです。

  
echo '<ul>';
if ($this->BcBaser->isHome()) {
     echo '<li>'ホーム'</li>';
} else {
     $crumbs = $this->BcBaser->getCrumbs();
     echo '<li>'. $this->BcBaser->getlink('ホーム', '/') .'</li>';

     if (!empty($crumbs)) {
          foreach ($crumbs as $key => $crumb) {
               if ($this->BcArray->last($crumbs, $key + 1)) {
                    if ($crumbs[$key + 1]['name'] == $crumb['name']) {
                         continue;
                    }
               }
               if ($this->BcArray->last($crumbs, $key)) {
                    if ($this->viewPath != 'home' && $crumb['name']) {
                         echo '<li>'. $crumb['name'] .'</li>';
                    }
               } else {
                    echo '<li>'. $this->BcBaser->getlink($crumb['name'], $crumb['url']) .'</li>';
               }
          }
     }

     elseif (empty($crumbs)) {
          if ($this->name == 'CakeError') {
               echo '<li>404 Not Found</li>';
          }
     }
}
echo '</ul>';
  

ここでは行っていませんが、必要に応じてタグにclassをつけるなども出来るでしょう。また、リストタグ以外のタグを用いることも可能だと思います。状況に応じて、適時カスタマイズしてみてください。

いかがだったでしょうか。パンくずリストはよく使われているナビゲーションです。この記事が、皆さまの参考になれば幸いです。