CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説

2019/09/24 2019/09/28

CakePHP3でパンくずをヘルパーを使って編集する

CakePHP３にはパンくずを指定する方法は 2つある

　
CakePHP3では、パンくずを指定する方法は、下記の 2つ用意されています。
　
　
Cookbook　Html　HtmlHelper でパンくずリストを作成
https://book.cakephp.org/3.0/ja/views/helpers/html.html#id11
　
Cookbook　Breadcrumbs (パンくず)
https://book.cakephp.org/3.0/ja/views/helpers/breadcrumbs.html
　
　
後者の方は、CakePHP 3.3.6で追加された、パンくずを生成するためのヘルパーで、より柔軟なパンくずを設定することができるようになっています。
　
ですが、パンくずの表現方法にこだわりがあまりない場合は、前者の HTMLヘルパーを使って構築するほうが簡単に生成できます。
　
　
というわけで、今回の記事では全社の HTMLヘルパーを使った簡単な生成方法を解説します。
　
　
ちなみに、リンクを設定する HTMLヘルパーについては下記の記事にまとめていますので参考にしてください。
CakePHP3のHtmlHelperのLink設定のまとめ。mailto、URL、Root／Homeのリンクなども
　
　

パンくずを生成する基本形

　
HTMLヘルパーを使ったパンくずの生成は非常に簡単です。
　
まず、レイアウトファイルにパンくずのベースとなる処理を記述します。
　
パス付きのレイアウトファイルは以下になります。
/src/Template/Layout/default.ctp
　

<div>
    <?php echo $this->Html->getCrumbs(' > ', array(
        'text' => 'Home',
        'url' => '/',
        'escape' => false,
    )); ?>
</div>

<div>

<?php echo $this->Html->getCrumbs(' > ', array(

'text' => 'Home',

'url' => '/',

'escape' => false,

)); ?>

</div>

　
これを記述した場所にベースとなる「Home」の部分が出力されます。
　
　
続いて、テンプレートファイルごとに「$this->Html->addCrumb()」を使ってページごとのパンくずを指定します。
　
パス付きのテンプレートファイルは以下になります。
/src/Template/Topics/view.ctp
　

$this->Html->addCrumb('Topics', '/Topics/');
$this->Html->addCrumb('View',   '/Topics/view/1');

1 2	$this->Html->addCrumb('Topics', '/Topics/'); $this->Html->addCrumb('View', '/Topics/view/1');

　
　
レイアウトファイルに記述した「$this->Html->getCrumbs()」の場所に「$this->Html->addCrumb()」で指定した順番にパンくずが出力されていきます。
「addCrumb()」はいくつでも設定が可能です。
　
　

HTMLヘルパーを使って指定するパンくずは指定の順番が大切

　
また、「getCrumbs()」と「addCrumb()」を同一のテンプレートファイル内に記述する場合は記述する順番が大切です。
　

<?php
$this->Html->addCrumb('Topics', '/Topics/');
$this->Html->addCrumb('View',   '/Topics/view/1');
?>
<div>
    <?php echo $this->Html->getCrumbs(' > ', array(
        'text' => 'Home',
        'url' => '/',
        'escape' => false,
    )); ?>
</div>

<?php

$this->Html->addCrumb('Topics', '/Topics/');

$this->Html->addCrumb('View', '/Topics/view/1');

<div>

<?php echo $this->Html->getCrumbs(' > ', array(

'text' => 'Home',

'url' => '/',

'escape' => false,

)); ?>

</div>

　
上記のサンプルのように「addCrumb()」を記述した後に「getCrumbs()」を記述します。
　
「getCrumbs()」でパンくずを出力した後に「addCrumb()」でページの情報を追加しても追加出力はされません。
　
　

Bootstrap対応の場合は「`$this->Html->getCrumbList()`」を使う

　
ここで解説した「getCrumbs()」を使うと、下記のような HTMLが出力されます。
　

<div>
<a href="/">Home</a> > <a href="/Topics/">Topics</a> > <a href="/Topics/view/1">View</a>
</div>

<div>

<a href="/">Home</a> > <a href="/Topics/">Topics</a> > <a href="/Topics/view/1">View</a>

</div>

　
これは見た通りの HTMLですので、これで問題ない場合も多々あるでしょう。
　
　
ですが、Bootstrapのパンくずは liタグで項目を指定する想定になっていますので、それに合わせたい、という場合は下記のように「getCrumbList()」が用意されています。
　

<div>
    <?php echo $this->Html->getCrumbList(
        [
            'firstClass' => false,
            'lastClass' => 'active',
            'class' => 'breadcrumb'
        ],
        'Home'
    ); ?>
</div>

<div>

<?php echo $this->Html->getCrumbList(

[

'firstClass' => false,

'lastClass' => 'active',

'class' => 'breadcrumb'

'Home'

); ?>

</div>

　
設定内容の
「firstClass」は、liタグの最初の項目に設定するクラスを指定します。
「lastClass」は、liタグの最後の項目に設定するクラスを指定します。
「class」は、パンくず全体の ulタグに設定するクラスを指定します。
　
上記のように「getCrumbs()」を設定する箇所を「getCrumbList()」の設定に置き換えると、下記のように liタグで処理された HTMLが出力されます。
　

<div>
<ul class="breadcrumb"><li><a href="/">Home</a></li><li><a href="/Topics/">Topics</a></li><li class="active"><a href="/Topics/view/1">View</a></li></ul>
</div>

<div>

<ul class="breadcrumb"><li><a href="/">Home</a></li><li><a href="/Topics/">Topics</a></li><li class="active"><a href="/Topics/view/1">View</a></li></ul>

</div>

　
「addCrumb()」の処理は、「getCrumbs()」「getCrumbList()」はどちらも同じ様に動作しますので、出力したい HTMLに合わせて選択してください。
　
　

パンくず生成の応用編・パンくずの HTMLをテンプレート化する

　
パンくずのベースとなる「$this->Html->getCrumbs()」を記述する場所が、前項と同じ様にレイアウトファイル 1箇所の場合は前項のように処理をしても問題ありません。
　
　
ですが、パンくずを編集する場所がレイアウトファイルではなく、テンプレートファイル上にある場合は、パンくずを編集するレイアウトファイルの全てに「$this->Html->getCrumbs()」を記述する必要があります。
　
万一「$this->Html->getCrumbs()」の内容を修正する必要が発生したときなどは大変です。
　
というわけで、パンくずの設置処理に少し柔軟性をもたせるために、パンくずの「$this->Html->getCrumbs()」をエレメント化（パーツ化）する方法を解説します。
　
　
まず、「$this->Html->getCrumbs()」をエレメント化します。
　
下記のファイルを生成し、コードの内容を保存します。
/src/Template/Element/crumbsElement.ctp
　

<div>
    <?php echo $this->Html->getCrumbs(' > ', array(
        'text' => 'Home',
        'url' => '/',
        'escape' => false,
    )); ?>
</div>

<div>

<?php echo $this->Html->getCrumbs(' > ', array(

'text' => 'Home',

'url' => '/',

'escape' => false,

)); ?>

</div>

　
　
続けて、テンプレートファイル「/src/Template/Topics/view.ctp」のパンくずを編集する場所に下記の内容を追記します。
　

<?= $this->element("crumbsElement"); ?>

1	<?= $this->element("crumbsElement"); ?>

　
　
また、テンプレートファイル「/src/Template/Topics/view.ctp」に記述する下記の処理は特に変更ありません。
　

$this->Html->addCrumb('Topics', '/Topics/');
$this->Html->addCrumb('View',   '/Topics/view/1');

1 2	$this->Html->addCrumb('Topics', '/Topics/'); $this->Html->addCrumb('View', '/Topics/view/1');

　
ただし、上記の内容は「$this->Html->getCrumbs()」より前に記述しておく必要がありますので、「element("crumbsElement"); ?>」より前に記述しておく必要があります。
　
　

パンくず生成の応用編・パンくずの HTMLをテンプレート化し、ブロック化する

　
CakePHP3のデフォルトのデザインを使用する場合、パンくずを編集する場所はテンプレートファイルになりますので、前項のエレメント化までで問題ないでしょう。
　
ですが、独自のデザインを作成しているときなどで共通のエレメント（テンプレート）などにパンくずを指定する場合に問題が発生する場合があります。
　
それは、「$this->Html->getCrumbs()」を記述すると当然のごとく、必要がないページにもパンくずの「Home」が表示されてしまうのです。
　
そのため、表示するかしないかの分岐処理が必要になりますが、そういう場合は「fetch()」でブロック化することで、表示、非表示の処理をフレームワークに任せてしまうことができるようになります。
　
　
今回は、サンプルのため「fetch()」はレイアウトファイルに設置をして試します。
　
パス付きのレイアウトファイルは以下になります。
/src/Template/Layout/default.ctp
　
レイアウトファイルにパンくずを編集する場所に下記の処理を記述します。
　

<?= $this->fetch('crumbs') ?>

1	<?= $this->fetch('crumbs') ?>

　
　
エレメントファイル「/src/Template/Element/crumbsElement.ctp」は、前項の内容と同一です。
　

<div>
    <?php echo $this->Html->getCrumbs(' > ', array(
        'text' => 'Home',
        'url' => '/',
        'escape' => false,
    )); ?>
</div>

<div>

<?php echo $this->Html->getCrumbs(' > ', array(

'text' => 'Home',

'url' => '/',

'escape' => false,

)); ?>

</div>

　
　
続いて、各ページごとのテンプレートファイル（/src/Template/Topics/view.ctp）には以下のように記述します。
　

$this->start("crumbs");
$this->Html->addCrumb('Topics', '/Topics/');
$this->Html->addCrumb('View',   '/Topics/view/1');
echo $this->element("crumbsElement");
$this->end();

$this->start("crumbs");

$this->Html->addCrumb('Topics', '/Topics/');

$this->Html->addCrumb('View', '/Topics/view/1');

echo $this->element("crumbsElement");

$this->end();

上記のように、テンプレートファイルに「$this->start("crumbs");」があるページが呼びされれば、「fetch(‘crumbs’)」の場所にパンくずを出力をします。
なければ何も処理されませんので、記述する内容はシンプルになります。

また、もう一つのポイントは、「$this->Html->addCrumb()」と「$this->element()」の順番です。

「$this->Html->addCrumb()」を先に記述して、その後に「$this->element()」を記述します。
逆だと「addCrumb()」で追加した部分は表示されません。
　
　

サイト全体に共通する処理をページごとに切り替える処理

　
今回は、サイト全体に共通して指定をする必要はあるものの、ページごとにそれぞれ違うテキストを切り替えて編集していく必要があるパンくずを指定する方法を解説しました。
　
　
同じような考え方をする仕組みとして、下記の記事で書いている titleタグ、h1タグの値を指定する方法や、使用する JavaScriptや CSSをページごとに設定する方法、metaタグの「keywords」「description」を指定する方法、OGPタグの一種である OGPを指定する方法などにも活用することができます。
CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法
 CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
 CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する
 CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
 CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
　
　
これらは、レイアウトファイルに変数を指定しておき、そこに編集する値を各ページ用のテンプレートファイルで指定する、という仕組みです。
　
　

- CakePHP 3.x 4.x CakePHP3

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP 2.3　ID以外のカラムでアソシエーション（連携）をさせる場合の詳細ページの注意点

ID以外のカラムでアソシエーション（連携）させて詳細ページを表示させる際の考え方と注意点をサンプルソースを用いて解説しています。

: CakePHP3のユーザ管理・ログイン認証プラグインCakeDC/Usersのインストール解説・3.6以降対応

CakePHP3のユーザ管理プラグイン Usersは、ユーザ登録、メール認証、ログイン認証、ユーザ管理、権限管理、reCAPTCHAなど会員制のサイトを簡単に実現可能。その導入方法、カスタマイズ方法を解説。

: CakePHP3のプラグイン「CakeDC/Users」を日本語化・翻訳ファイルもダウンロード可

CakePHP3のユーザ管理、ログイン認証プラグインである「CakeDC/Users」のメッセージを日本語にする手順の解説とともに、日本語の翻訳ファイルを提供。ファイルを設置すれば日本語になる！

: CakePHP2の検索Plugin CakeDC/Searchで重複を省くgroup by（distinct）の実装方法

CakePHP2の検索プラグイン「CakeDC/Search」で、重複レコードを省くgroup by、distinctを使う方法についての解説。設定する場所はpaginatorの条件とするので、find()関数と同じ。

: CakePHP3のForm Helperの使い方のまとめ

CakePHP3になりフォームヘルパーの使い方も大きく変わりましたので、使い方をまとめました。基本的な使い方からプラスアルファの便利な使い方まで紹介。

: CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１

CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその1で基本的な導入方法の解説で読みながら簡単に導入が可能。

: CakePHP3でQRコードを作成、表示するライブラリ「cakePHP-QR-Code-Helper」

CakePHPでQRコードを生成するライブラリ「cakePHP-QR-Code-Helper」の紹介。GDライブラリのインストールも必要ないHelperとして提供されているため、ファイルを設置すればすぐに使用可能。

: CakePHP 2.3　Search Pluginで検索処理　その４前方一致検索、後方一致検索、不等号による検索、between句による範囲検索

CakePHPの検索プラグイン Search Pluginの検索処理の中で前方一致検索、後方一致検索、不等号による検索、between句による範囲検索の解説です。

: CakePHP3のInsert On Duplicate Key Update（upsert）構文を解説・バルク処理も

CakePHP3で Insert … On Duplicate Key Update構文（upsert）を実行する方法を解説。バルク処理の方法も用意されているため大量処理の場合も対応可能。

: CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法

CakePHP3のツリービヘイビアを使ったツリーカテゴリーの子階層も含めての検索を検索プラグイン「friendsofcake/search」を使って実現する方法を解説しました。

PREV: CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
NEXT: CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説

CakePHP3でパンくずをヘルパーを使って編集する

CakePHP３にはパンくずを指定する方法は 2つある

パンくずを生成する基本形

HTMLヘルパーを使って指定するパンくずは指定の順番が大切

Bootstrap対応の場合は「`$this->Html->getCrumbList()`」を使う

パンくず生成の応用編・パンくずの HTMLをテンプレート化する

パンくず生成の応用編・パンくずの HTMLをテンプレート化し、ブロック化する

サイト全体に共通する処理をページごとに切り替える処理

CakePHP3の関連記事

GoogleAdwords

GoogleAdwords

Message コメントをキャンセル

関連記事

CakePHP 2.3　ID以外のカラムでアソシエーション（連携）をさせる場合の詳細ページの注意点

CakePHP3のユーザ管理・ログイン認証プラグインCakeDC/Usersのインストール解説・3.6以降対応

CakePHP3のプラグイン「CakeDC/Users」を日本語化・翻訳ファイルもダウンロード可

CakePHP2の検索Plugin CakeDC/Searchで重複を省くgroup by（distinct）の実装方法

CakePHP3のForm Helperの使い方のまとめ

CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その１

CakePHP3でQRコードを作成、表示するライブラリ「cakePHP-QR-Code-Helper」

CakePHP 2.3　Search Pluginで検索処理　その４前方一致検索、後方一致検索、不等号による検索、between句による範囲検索

CakePHP3のInsert On Duplicate Key Update（upsert）構文を解説・バルク処理も

CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法

WordPress投稿にPHPを記述するショートコードの使い方add_shortcode

コピーコンテンツ対策.htaccessで直リンク禁止しリダイレクトで対応

評価点投票プラグイン10個を比較！WordPressで口コミサイトを構築

BackWPupでバックアップ・リストア（復元）の具体的手順

コンパクトキーボード・KEK-EA9AU・FKB1420の魅力

CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説

CakePHP3でパンくずをヘルパーを使って編集する

CakePHP３にはパンくずを指定する方法は 2つある

パンくずを生成する基本形

HTMLヘルパーを使って指定するパンくずは指定の順番が大切

Bootstrap対応の場合は「$this->Html->getCrumbList()」を使う

パンくず生成の応用編・パンくずの HTMLをテンプレート化する

パンくず生成の応用編・パンくずの HTMLをテンプレート化し、ブロック化する

サイト全体に共通する処理をページごとに切り替える処理

CakePHP3の関連記事

GoogleAdwords

GoogleAdwords

Message コメントをキャンセル

関連記事

Bootstrap対応の場合は「`$this->Html->getCrumbList()`」を使う