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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<head> <?= $this->Html->charset() ?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> <?= $cakeDescription ?>: <?= $this->fetch('title') ?> </title> <?= $this->Html->meta('icon') ?> <?= $this->Html->css('base.css') ?> <?= $this->Html->css('style.css') ?> <?= $this->fetch('meta') ?> <?= $this->fetch('css') ?> <?= $this->fetch('script') ?> <?= $this->fetch('ogp') ?> </head> |
17行目の「$this->fetch('ogp')
」を追記します。
追記した箇所に OGPのタグが編集されます。
各ページのテンプレートファイル view.ctpを編集
各テンプレート側では、OGPのタグとそのタグに編集する変数を指定します。
パス付きのファイル名は以下になります。
/src/Template/Topics/view.ctp
「fetch(‘ogp’)」で指定した箇所に編集する値は、「assign(“ogp”, “値”)」という形式で指定します。
ここではサンプルとして、URLだけを変数で指定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php $url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; $ogpHtml = '<meta property="og:site_name" content="サイト名" />'; $ogpHtml .= '<meta property="og:title" content="タイトル" />'; $ogpHtml .= '<meta property="og:type" content="トップページは website、個別ページは article" />'; $ogpHtml .= '<meta property="og:url" content="' . $url . '" />'; $ogpHtml .= '<meta property="og:image" content="サムネイル画像の URL" />'; $ogpHtml .= '<meta property="og:description" content="記事の description(記事概要)"/>'; $ogpHtml .= '<meta property="fb:app_id" content="FacebookのアプリID" />'; $ogpHtml .= '<meta property="og:locale" content="ja_JP" />'; $this->assign("ogp", $ogpHtml); ?> |
ただ、上記の方法ではやや見にくいため、下記のように「assign」を使わず「start」~「end」で指定する方法もあります。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php $url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; $this->start("ogp"); echo '<meta property="og:site_name" content="サイト名" />'; echo '<meta property="og:title" content="タイトル" />'; echo '<meta property="og:type" content="トップページは website、個別ページは article" />'; echo '<meta property="og:url" content="' . $url . '" />'; echo '<meta property="og:image" content="サムネイル画像の URL" />'; echo '<meta property="og:description" content="記事の description(記事概要)"/>'; echo '<meta property="fb:app_id" content="FacebookのアプリID" />'; echo '<meta property="og:locale" content="ja_JP" />'; $this->end(); ?> |
これで、ページごとの OGPを設定することができます。
ちなみに、サンプルソース中に出てくる「Topics」は、「お知らせ情報」が入っているテーブルで、テーブルレイアウトは「CakePHP3で保存前にバリデーション結果を取得する2つの方法」の記事にあるような内容を想定してください。
OGPの部分をエレメントとして別ファイルにする方法
先に解説した内容でも OGPとして機能はしますが、いくつものテンプレートに同じ内容を記述する必要があり、メンテナンス性が高くありませんので、OGPの部分はエレメント(パーツ)として別ファイルとして管理したほうが便利でしょう。
OGPのタグをエレメントファイル ogpElement.ctpとして編集
まず最初に、OGPとして記述する内容をエレメントとして取り出します。
生成するファイルのパス付きファイル名は以下になります。
/src/Template/Element/ogpElement.ctp
そこに下記の内容を記述します。
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $this->start("ogp"); echo '<meta property="og:site_name" content="サイト名" />'; echo '<meta property="og:title" content="' . $ogpTitle . '" />'; echo '<meta property="og:type" content="トップページは website、個別ページは article" />'; echo '<meta property="og:url" content="' . $ogpUrl . '" />'; echo '<meta property="og:image" content="サムネイル画像の URL" />'; echo '<meta property="og:description" content="' . $ogpDescription . '"/>'; echo '<meta property="fb:app_id" content="FacebookのアプリID" />'; echo '<meta property="og:locale" content="ja_JP" />'; $this->end(); ?> |
ここでは「og:title」「og:url」「og:description」を変数としていますが、実際に設定する場合は「og:type」「og:image」も変数として指定する必要があります。
テンプレートファイル view.ctpの変更
そして、各ページのテンプレート側は下記のように修正します。
パス付きのファイル名は以下になります。
/src/Template/Topics/view.ctp
1 2 3 4 5 6 7 |
<?php $url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; $title = "タイトル1"; $description = "記事の description(記事概要)1"; echo $this->element("ogpElement",["ogpUrl"=>$url,"ogpTitle"=>$title,"ogpDescription"=>$description]); ?> |
先程作成したエレメントファイルを「$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の関連記事
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」に関する記事一覧
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
CakePHP 2.3 ID以外のカラムでアソシエーション(連携)をさせる場合
ID以外のカラムでアソシエーション(連携)させるための考え方とサンプルソースを用いての説明を行っています。
-
CakePHP4 のコマンドプログラムからコンポーネントを読み込む方法解説
CakePHP4でコマンドプログラムからコンポーネントを呼び出す方法を解説。コントローラーから呼び出すときと大差はないが、use句でコンポーネントを指定する事がポイント。
-
CakePHP3でテーブルにカラム(項目)を追加したときに変更するポイントのまとめ
CakePHP3でシステム開発をする際、途中でカラムを追加した場合に何を変更すればいいかを確認。カラムを追加する前後で Bakeした結果を比較し、変更になった点をリストアップした。
-
CakePHP3でデータを保存する save()で発生するエラーを確認する方法を解説
CakePHP3でデータ保存処理のログを取得する方法。save()では true、falseの戻り値しか取得できないが、saveOrFail()と try…catch文を使いエラーログ、エンティティを取得し、不具合の解析を行う。
-
CakePHP3でシェルを作成しコマンドラインから実行・CakePHP2との違い
CakePHP3のシェルスクリプトを作成し、コマンドラインから実行する方法を解説。複数単語をつなげる場合の対応方法がCakePHP2より制限が厳しくなったのでCakePHP3の命名規則の確認が必要だ。
-
CakePHP4でロギングスコープやログレベルを使用してログを出し分ける方法を解説
CakePHPのログ出力方法の解説。app.phpにログ設定をし、スコープやレベルを指定してログ出力を振り分ける方法、CakePHP4で配列出力にはvar_exportが必要なことなどを解説。
-
CakePHP 2.3 Search Pluginで検索処理 その2表示件数を動的に変える方法
CakePHPの検索プラグイン Search Pluginの検索処理の中で動的に表示件数を変える方法です。
-
CakePHP4の数値項目は「like %10%」の部分一致検索(find select)はできない
CakePHP4でテーブルの数値項目に対してlike句を使用した部分一致検索を実行するとエラーが発生する。クリエービルダーの不具合だと思われ対処方法が分からない。
-
CakePHP 2.3 Model、Controllerの見たい変数の中身をログ出力
CakePHPの Modelや Controllerの変数の中身をログとして出力して見る方法を提供します。
-
CakePHP3でPHPExcelを使ってエクセルファイルを生成、出力する方法
CakePHP3でPHPExcelを利用してエクセルを編集、出力するサンプルソース+解説。PHPExcelのインストール方法の解説からファイル保存とダウンロードの方法なども解説。