エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      2019/09/28

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

 

CakePHP3にはパンくずを指定する方法は 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
 

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

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

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

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

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

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

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

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

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

 
「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
 

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

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

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

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

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

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

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

上記のように、テンプレートファイルに「$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を利用してテンプレートごとに指定する方法を解説
 
 
これらは、レイアウトファイルに変数を指定しておき、そこに編集する値を各ページ用のテンプレートファイルで指定する、という仕組みです。
 
 

CakePHP3の関連記事

CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールする
CakePHP3でレコードを保存(追加、更新、Insert、Update)する複数の方法を紹介
CakePHP3でモデルなしフォームからCSVをアップロードしレコードを更新する方法解説
CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法
CakePHP3のInsert On Duplicate Key Update(upsert)構文を解説・バルク処理も
CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順
CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 3.x 4.x 5.x

GoogleAdwords

GoogleAdwords

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

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

  関連記事

CakePHP 2.3 ログイン、操作履歴、アクセスログ出力

CakePHPでログインや操作履歴などのアクセスログ出力処理を作成します。

CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説
CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説

CakePHP3で定数や共通で使う変数をまとめて設定し、プログラム内で読み込む方法を、bootstrap.phpに直接記述する方法と定数ファイルを分ける方法の3つの方法で解説。

CakePHP3のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法
CakePHP3のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法

CakePHP3のユーザ管理、ログイン認証プラグイン「CakeDC/Users」の権限管理を行う方法やアクセスできるコントローラー、アクションを設定、所有権を持つレコードのみ更新できる設定方法を解説。

CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2
CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2

CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその2でバリデーションなどの実用的なカスタマイズ方法を解説。

CakePHP5系で認証機能のAuthenticationプラグインをインストール・エラー発生注意
CakePHP5系で認証機能のAuthenticationプラグインをインストール・エラー発生注意

CakePHPのユーザ認証に使用するオフィシャルなプラグインAuthenticationだが、CakePHP5系では Authentication Ver.3系を使う必要があるが、公式ChiffonBookが間違えている。

CakePHP4、CakePHP5系の認証処理でログインの有無の確認、ユーザ情報の取得の方法
CakePHP4、CakePHP5系の認証処理でログインの有無の確認、ユーザ情報の取得の方法

CakePHP4系、5系のログイン認証の可否のチェック、および、ログインユーザの情報を取得する方法のまとめ。複数の方法があるが手続きが微妙に異なるためまとめてみた。

CakePHPで同一テーブル内の値を比較する条件でレコードを取得する方法
CakePHPで同一テーブル内の値を比較する条件でレコードを取得する方法

CakePHPの同一テーブルにある項目の値を比較し条件に合致するレコードを取得する方法を解説。[”項目名”=>”値”]ではなく[”項目名 = 項目名”]と書くところがポイント。

CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数
CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数

CakePHP3で特定フォルダのパスの定数を解説。root、DocumentRoot、app、config、webroot、tests、tmp、cache、vendor、コア、コアの srcが設定済み。realpath()関数を使うと柔軟なパス指定が可能。

CakePHP4のController内でViewテンプレート、レイアウトの変更設定を記述する方法
CakePHP4のController内でViewテンプレート、レイアウトの変更設定を記述する方法

CakePHP4でテンプレートやレイアウトファイルをデフォルトから変更する場合は「render()」を使用するが、記述場所はできるだけコントローラー内の最後の方に書く方がいい。

CakePHP4のCakeDC/Usersのログイン時のリダイレクトとユーザ権限管理の設定解説
CakePHP4のCakeDC/Usersのログイン時のリダイレクトとユーザ権限管理の設定解説

CakeDC謹製UsersプラグインのCakePHP4版の紹介。ログイン認証後にリダイレクトする先の設定方法についての解説と実運用するために必要なコツを解説。便利な仕組みも仕様の理解があって初めてうまく使いこなせる。