エス技研

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


CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説

      2019/09/28

CakePHP3でページごとに必要となる処理や変数などを編集する処理

 
前回の記事「CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定」では、あらかじめ用意されている HTMLヘルパーを利用して OGPを設定しました。
 
HTMLヘルパーは便利なのでこれを利用しない理由はありませんので、実際に実装する場合は HTMLヘルパーを利用する方法を使用してください。
ですが、今回の記事は、同じことを「fetch()」「assign()」を利用して実装することもできます、という実験的な内容の記事になります。
 
 
この方法は下記の記事で書いている「fetch()」「assign()」を利用する方法です。
CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法
 
この仕組は、下記の記事に書いている、JavaScriptや CSSを使用するページごとに指定する方法などにも活用することができます。
CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
 
いずれの処理も、レイアウトファイルに変数を指定しておき、各ページのテンプレートファイル側でそのレイアウトファイルの変数に埋め込む変数の値を指定する、という仕組みです。
 
 

CakePHP3で OGPを設定する具体的な設定方法

 
それでは、以下はサンプルソースを利用した具体的な設定方法を解説していきます。
 
 

レイアウトファイル default.ctpを編集

 
まず最初は、レイアウトファイル「default.ctp」を編集します。
 
パス付きのファイルは以下になります。
/src/Template/Layout/default.ctp
 

 
17行目の「$this->fetch('ogp')」を追記します。
追記した箇所に OGPのタグが編集されます。
 
 

各ページのテンプレートファイル view.ctpを編集

 
各テンプレート側では、OGPのタグとそのタグに編集する変数を指定します。
 
パス付きのファイル名は以下になります。
/src/Template/Topics/view.ctp
 
 
「fetch(‘ogp’)」で指定した箇所に編集する値は、「assign(“ogp”, “値”)」という形式で指定します。
ここではサンプルとして、URLだけを変数で指定しています。
 

 
 
ただ、上記の方法ではやや見にくいため、下記のように「assign」を使わず「start」~「end」で指定する方法もあります。
 

 
これで、ページごとの OGPを設定することができます。
 
 
ちなみに、サンプルソース中に出てくる「Topics」は、「お知らせ情報」が入っているテーブルで、テーブルレイアウトは「CakePHP3で保存前にバリデーション結果を取得する2つの方法」の記事にあるような内容を想定してください。
 
 

OGPの部分をエレメントとして別ファイルにする方法

 
先に解説した内容でも OGPとして機能はしますが、いくつものテンプレートに同じ内容を記述する必要があり、メンテナンス性が高くありませんので、OGPの部分はエレメント(パーツ)として別ファイルとして管理したほうが便利でしょう。
 
 

OGPのタグをエレメントファイル ogpElement.ctpとして編集

 
まず最初に、OGPとして記述する内容をエレメントとして取り出します。
 
生成するファイルのパス付きファイル名は以下になります。
/src/Template/Element/ogpElement.ctp
 
そこに下記の内容を記述します。
 

 
ここでは「og:title」「og:url」「og:description」を変数としていますが、実際に設定する場合は「og:type」「og:image」も変数として指定する必要があります。
 
 

テンプレートファイル view.ctpの変更

 
そして、各ページのテンプレート側は下記のように修正します。
 
パス付きのファイル名は以下になります。
/src/Template/Topics/view.ctp
 

 
先程作成したエレメントファイルを「$this->element()」で読み込みます。
 
1つ目のパラメーターが、エレメントのファイル名になります。
2つ目のパラメーターが、エレメントに渡す変数を指定箇所になります。配列で指定できますので、必要に応じていくつでも指定することができます。
 
 

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

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

CakePHP3の関連記事

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のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する
CakePHP3で環境変数を設定して本番環境と開発環境を分けて処理をする場合
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 2.x 3.x

GoogleAdwords

GoogleAdwords

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

Message

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

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

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

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

  関連記事

VirtualBoxにCakePHP3を設置。必要なCentOS、Apache、PHP、MySQL、Composerをインストールし設定する。
VirtualBoxにCakePHP3を設置。必要なCentOS、Apache、PHP、MySQL、Composerをインストールし設定する

VirtualBoxにCentOS、Apache、MySQL、PHPをインストールするところから初めてCakePHP3の開発環境を構築する手順を詳細解説。この記事1つで全ての設定が完了する。

CakePHP3のデバッグキット(DebugKit)を強制的に有効、無効に変更する方法
CakePHP3のデバッグキット(DebugKit)を強制的に有効、無効に変更する方法

CakePHP3に付属しているデバッグのためのツール、デバッグキットを強制的に有効化、無効化する方法を解説。初期設定では開発環境としてありそうなドメインの場合のみ有効になるように設定されている。

cakephp3 カスタムバリデーションを簡易的に実装する方法
cakephp3 カスタムバリデーションを簡易的に実装する方法

CakePHP3の独自のバリデーションをテーブルクラス内に簡単に記述する方法を解説。他のテーブルクラスでは使えないが、記述する量は少なく実装できるため、他で使わない処理を書くのには便利。

CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)
CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)

CakePHP3の英語のメッセージを日本語化(多言語化)する手順を解説。オリジナルのメッセージを作成する方法やプログラムで文言を追加する場合の対応なども解説。

CakePHP 2.3 テーブルの項目を演算した結果を条件として抽出する方法

アソシエーション(連携)している先のテーブルの項目で演算をする場合の考え方と注意点をサンプルソースを用いて説明しています。分かってしまえば簡単です。

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

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

CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定

CakePHP3でOGPを設定する方法を解説。metaタグを編集するHTMLヘルパーを利用してOGPのタグを編集する。また、エレメントとして分割することでメンテナンス性も向上させる。

URL短縮サービス「TTTオンライン(https://ttt.onl)」公開
URL短縮サービス「TTTオンライン(https://ttt.onl)」公開

URL短縮サービス「TTTオンライン(https://ttt.onl)」を公開。メールやSNSでは使いにくい長いURLを短いURLに変換するサービス。QRコードも。Google URL Shortenerが2019年3月にサービス終了。

CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法
CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法

CakePHP3でtitleタグ、h1タグのテキストをデフォルトから変更する方法を解説。テンプレートファイルに「$this->assign()」でテキストを指定して「/Layout/defult.ctp」で受け取る。

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

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