このコンテンツをご覧になるには、Adobe Flash Playerをインストールする必要があります。

ブロック修正の仕方とカスタムテンプレートの仕組み

concrete5 には、優秀なファイルのローダー機能が備わっており、サイト運営者は、コアファイルを変更する事なく、ブロックのカスタマイズを行う事が出来ます。

このページは、FTP、CSS、HTMLの知識が分かる方向けに作成致しました。

また、PHP初級者の方も、ブロックを理解する為の第一歩の教材としてお読みいただければと思います。

ここでは、concrete5 の MVC (モデル・ビュー・コントローラー) のフレームワークのうち、view.php （ビュー）の部分のみの解説と、カスタムテンプレート機能についての解説を行います。

 このチュートリアルは concrete5.6.x と 5.7.x 共通です。

 

第4回 concrete5 Ustream 勉強会 - カスタムテンプレート & 基本ブロック紹介

ページ上部の「動画デモ ここをクリック」の画像バナーをクリックしていただくと、Ustreamで行ったカスタムテンプレート説明生放送の録画ビデオをご覧になれます。

 

 

ブロック・カスタマイズの基本

例えば、「ページリスト」ブロックを例にとります。ページリストブロックは、

/concrete/blocks/page_list/

フォルダー内に

add.php
auto.js
controller.php
db.xml
edit.php
icon.png
page_list_form.php
rss.png
templates/
tools/
view.php

というファイル・フォルダーが存在します。これらのファイルが、データを処理し、HTMLコードに出力しています。

殆どの方は、「view.php」を変更するだけで、新しいCSSのクラス属性を加えたり、表示方法を変更したりする事が出来ます。

 

 

concrete5 のファイルシステムの仕組み

まずは、concrete5 のファイルのシステムの説明をさせていただきます。

詳しくは、「concrete5 システムの基本構造」を参照下さい。

concrete5 を最初にインストールされた際、トップに空のフォルダーが存在する事に気がつかれた方もいらっしゃると思います。

concrete5 では、システム、パッケージ、ユーザー領域が完全に別れた構造になっており、ブロックのファイル群に対しては、

ユーザー領域 > パッケージ（packages）領域 > システム（コア）領域

の順にファイルを探して行きます。

 

ブロックをサイト全体で変更する場合

つまり、

/concrete/blocks/[ブロックハンドル]/view.php もしくは

/packages/[パッケージハンドル]/blocks/[ブロックハンドル]/view.php

のファイルをカスタマイズされたい場合

5.6.x 以前の場合
/blocks/[ブロックハンドル]/view.php

5.7.x 以降の場合
/application/blocks/[ブロックハンドル]/view.php 

にファイルをコピーし変更を行う事により、元のシステムファイルを上書きする事なく、サイト全体で使用するブロックの出力を変更出来る様になります。

またこれにより、concrete5 をアップグレードする際、当サイトの「アップグレード方法」ページの方法を用いてアップグレードする事により、変更したものを上書きせずに、アップグレードする事が出来ます。（view.phpに大幅な変更があった場合を除く）

 

ブロック特有のCSSファイル、jsファイルを読み込ませる

concrete5 のシステムでは、使用されたブロックに

view.css (CSSファイル）

view.js (Javascriptファイル）

を作成し、保存すると、そのブロックが使われているページだけ、自動的に読み込まれる構造になっています。

また、view.phpをユーザー領域に作成しなくても、「view.css」「view.js」ファイルのみを読み込ませる事も可能です。

例えば、

/concrete/blocks/[デフォルトブロック]/

等の、concrete5 のデフォルトでインストールされているブロックに、カスタマイズしたCSSファイルやjsファイルだけを読み込ませたい場合、

[5.6.x 以前] /blocks/[デフォルトブロック]/view.css
or
[5.7.x 以降] /application/blocks/[デフォルトブロック]/view.css

[5.6.x 以前] /blocks/[デフォルトブロック]/view.js
or
[5.7.x 以降] /application/blocks/[デフォルトブロック]/view.js

のファイルを作成するだけで、そのブロックが使われているページだけ、これらのファイルが読み込まれる様になります。

 

 

「カスタムテンプレート」とは

concrete5 でブロックを編集される際「カスタムテンプレート」というオプションがメニューにある事に気がつかれた方もいらっしゃると思います。

カスタムテンプレートとは「view.php」を改変したファイルです。concrete5 のブロックを、サイト全体ではなく、一部のブロックに適用させたい場合に使います。

例えば、「オートナビ」ブロックには「Header Menu（ヘッダーメニュー）」と「Breadcrumb（パンくず）」のカスタムテンプレートがデフォルトで存在します。

これらは、

/concrete/blocks/autonav/view.php

のファイルを改変し、Header Menuは、「header-nav」をはじめとするCSSのクラスを与えるように。Breadcrumb は、リスト(li)タグの出力を省いて表示するようにカスタマイズしたものです。

ブロック全体ではなく、サイトのブロックの一部にこのような変更を与えたい場合に有効です。

 

カスタムテンプレートの作り方

カスタムテンプレートの作り方は、view.phpを改変したものを、

/blocks/[ブロック名]/templates/カスタムテンプレート名.php

として保存するだけで、次回から、編集モードのブロック・メニューから「カスタムテンプレート」を選択するとその選択肢が出て来ます。

名前は、半角英数小文字のみで空白は許可されていません。空白は下線 (_) を使用して下さい。concrete5 が下線を自動的に空白に変換し、カスタムテンプレートの名前として表示されます。

例えば、「header_menu.php」とした名前を作成すると、カスタムテンプレートのメニューでは「Header Menu」という表示になります。

 

特有のjavascriptや、cssを取り入れたい場合には・・・

/blocks/[ブロック名]/templates/[カスタムテンプレート名]/view.php
/blocks/[ブロック名]/templates/[カスタムテンプレート名]/view.css
/blocks/[ブロック名]/templates/[カスタムテンプレート名]/view.js 

と保存して下さい。

 

以上の手順を踏みファイルを作成、そして編集モードでカスタムテンプレート指定を行う事によって、

/blocks/[ブロック名]/view.php
/concrete/blocks/[ブロック名]/view.php
/packages/[パッケージ名]/blocks/[ブロック名]/view.php 

上記のファイルを無視し、カスタムテンプレートのファイル、もしくはファイル群が読み込まれるようになります。

 

カスタムテンプレート制作例

それでは、実際に、「ページリスト」ブロックを使ってカスタムテンプレートをカスタマイズする方法を紹介します。これは、v5.3.2のファイルを基本としています。

 

例：「ページリスト」ブロック・CSSクラスのカスタマイズ

ページリストには、

.ccm-page-list
.ccm-page-list-title
.ccm-page-list-description

というCSS属性が使われています。しかしページによっては、違うCSS属性を与え、フォントのサイズ等を新しいCSSクラスを使って指定出来る様にされたい場合があります。

 

例えば、「お知らせ」ページ用に

.ccm-page-list-news
.ccm-page-list-news-title
.ccm-page-list-news-description

のCSSクラスを作成したいとします。お知らせのページのみにこの変更を与えたいので、カスタムテンプレートとして

/concrete/block/page_list/view.php

のファイルを

/blocks/page_list/templates/news.php

と名前を変えて保存し、そのファイルを開きます（もちろん、半角英小文字であれば、これ以外の名前でも可）。

9行目 (v5.3.2時点）辺りの

<div class="ccm-page-list">

のクラスを、「ccm-page-list-news」に変更。

そして、16行目 (v5.3.2時点）辺りの

<h3 class="ccm-page-list-title"><a href="<?php echo $nh->getLinkToCollection($cobj)?>"><?php echo $title?></a></h3>

の、classの値「ccm-page-list-news-title」に変更。

そして、17行目(v5.3.2時点）辺りの

<div class="ccm-page-list-description">

を「ccm-page-list-news-description」に変更。

そして変更したファイルを保存し、concrete5 にアップロードします。

そして、concrete5 のページに行き、

  • 編集モード
  • 既存の該当ページリストブロックをクリック
  • メニューから「カスタムテンプレート」をクリック
  • 「News」というカスタムテンプレートが現れ、それを選択。

そうすることにより、該当ブロックでは、上記のCSS属性が定義されたHTMLコードが出力されます。

 

例：ページリストブロックに日付を加える

今まで、ユーザーさんに多かったリクエストで、ページリストに日時を加えられたいリクエストが多くありました。

ということで、ページリストに公開日時の日付を加える方法です。

/concrete/blocks/page_list/view.php

のファイルを

/blocks/page_list/templates/dates.php

と名前を変えて保存し、そのファイルを開きます（これ以外の名前でも可）

concrete5 のページでは、「設定」で設定する「公開日時」。「最終更新日」の2つ等を使う事が出来ます。

「公開日時」は、更新者が自由自在に変更が出来、「最終更新日」はユーザーがページを変更した日が自動的に表示されます。

開発元のAPIドキュメントによると。「公開日時」は「getCollectionDatePublic ('Y年m月d日')」。「最終更新日」は「getCollectionDateLastModified ('Y年m月d日');」のどちらかを、ページタイトルと、ページ説明の間である、16〜17行目の間（v5.3.2時点）に、「ccm-page-date」のCSSクラスを与えたdivタグをはさんで挿入します。

「公開日」の場合

＊公開日の場合、後で任意に日付の変更が出来ますが、毎回、手動で更新しなくては行けません

<div class="ccm-page-list-date"><?php echo $cobj->getCollectionDatePublic ('Y年m月d日'); ?></div>

「更新日」の場合

＊更新日の場合は、ページの変更が保存された日が自動的に表示される様になりますが、任意の日付を指定出来ません

ただし、[管理画面] -  [サイト全体の設定] -  [デバッグ] でキャッシュを有効にされている方は、既存のページ設定情報がキャッシュされている可能性があるので、一度キャッシュを削除。そして、一度だけ各ページの公開日時を変更する処理をして下さい。

<div class="ccm-page-list-date"><?php echo $cobj->getCollectionDateLastModified ('Y年m月d日'); ?></div>

＊また、この他にも、「('Y年m月d日')」の部分を変更する事により、様々なフォーマットで日付を表示する事が出来ます。例えば、時刻も表示させたい場合は「('Y年m月d日 H:m')」とする事により、「2009年9月11日 18:25」などという表示がされるようになります。詳しくは、PHPサイトにある「date」のページを参照して下さい。

＊5.3.3.1 日本語版において「公開日 （getCollectionDatePublic()）」の、バグが見つかりました。修正パッチをページ下で配布しています。

 

以下に、「公開日」を表示出来る様にしたサンプルコード全文を掲載しておきます。これをコピーし、

/blocks/page_list/templates/dates.php

というテキストファイルを作成し、concrete5 サイトにアップロード。次に、「編集モード」に行き - ページリリストブロックをクリック - 「カスタムテンプレート」をクリック、そして「Dates」を選択する事によって、「公開日時」で指定された日付が表示される様になります。

以下のコードは、

/concrete/blocks/page_list/view.php

の17行目に上記のコードを挿入したものです。

日付表示の部分に「ccm-page-list-date」というCSSクラスを<div>で囲っていますので、テーマの.cssファイルでフォントスタイルの指定を忘れない様にして下さい。

 

＊以下のコードをコピーするには、エリア右上に表示される、書類2枚が重なったアイコンをクリックする事により、コードがご自分のパソコンのメモリにコピーされます。

5.3.3.1 日本語版 getCollectionDatePublic() 修正パッチ

5.3.3.1 日本語版において、getCollectionDatePublic() において、日付フォーマットが指定出来なくなるというバグが発生しました。以下に修正パッチを掲載しています。

この修正パッチは、バージョン5.3.3.1を使用し、 getCollectionDatePublic() 関数を使ったカスタムテンプレートを使用されていて、任意の日付フォーマットを指定されたい方のみ当てる必要があります。

使い方：

  • 以下のファイルをダウンロード
  • 解凍
  • ファイル「page.php」を /concrete/models/ ディレクトリー内の同名ファイルを上書き保存
  • サーバーにアップロード

ダウンロード

page.php.zip (14KB)