elementalのpage_theme.php

この記事はconcrete5 Japanアドベントカレンダー2015 に参加しています。

前日のmiz563さんのconcrete5と過ごした一年間。より引き継いで書きます。

concrete5 5.7系からテーマファイルに設定用に追加されたpage_theme.phpについて書きたいと思います。
デフォルトのテーマ「Elemental」のpage_theme.phpを解説します。ファイルの場所は
「concrete/themes/elemental/page_theme.php」です。
この記事はバージョン5.7.5.3を基に作成しています。

page_theme.phpとは?

・テーマを補足して、よりGUIでの編集をしやすくするためのものです。(具体的な内容は後ほど説明します)
・このファイルはなくてもテーマとして機能します
・インストール時のみ適用となるので、あとからこのファイルを作成した場合はテーマをインストールしなおさないといけない。(バージョン5.7.5.3現在)

各メソッドの概略
registerAssets()
concrete5で最初から用意されているcssやjavascriptを使用するかしないか
$pThemeGridFrameworkHandle
レイアウト機能を使う場合にどのCSSフレームワークを使うか
getThemeName()
テーマの名前
getThemeDescription()
テーマの概要
getThemeBlockClasses()
ブロックのカスタムクラスを設定
getThemeAreaClasses()
エリアのカスタムクラスを設定
getThemeDefaultBlockTemplates()
ブロックを設置した時に使用するカスタムテンプレートを設定
getThemeResponsiveImageMap()
レスポンシブ画像を切り替えるウィンドウ幅を設定
getThemeEditorClasses()
記事ブロックのカスタムクラスで使用できるクラスを設定
getThemeAreaLayoutPresets()
レイアウトを使用するときにカラムの割合を設定

具体的にメソッドの説明をしていきたいと思います。

registerAssets()

・concrete5で最初から用意されているcssやjavascriptを読み込むか設定する
$this->providesAsset() —- 通常使われるcssやjavascriptを使用しない
$this->requireAsset() —- concrete5のコアで用意されているcssやjavascriptを使用する

下記のコードの場合
5行目

concrete5のデフォルトの設定ではフォームブロックを設置した場合に通常読み込まれるview.cssを読み込まないように設定しています。

17行目

コアで用意されているfont-awesome.cssを読み込みしています。

18行目

コアで用意されているjqueryを読み込んでいます。テーマのdefault.phpなどテンプレートファイルで読み込むことも可能ですが、concrete5で用意されているものはconcrete5本体と親和性が高いので、jqueryを使う場合はここに設定したほうが無難です。
これ以外にもコアで用意されているものが多数あるのでconcrete/config/app.phpのassets配列を参照してください。
https://github.com/concrete5/concrete5/blob/release/5.7.5.3/web/concrete/config/app.php#L495

$pThemeGridFrameworkHandle

レイアウト機能を使うときのグリッドシステムをどのCSSフレームワークにするか設定します。
テーマで使うcssフレームワークに合わせておく必要があります。
bootstrap3以外にも「bootstrap2」「foundation」「960 Grid System」が用意されています。
https://github.com/concrete5/concrete5/tree/release/5.7.5.3/web/concrete/src/Page/Theme/GridFramework/Type

getThemename()

インストール時に使用されるテーマ名を指定します。新しくテーマを作るときはElementalと書かれている箇所を変更してください。
以前はdescription.txtの1行目に書かれていた内容です。現在でもdescription.txtがあれば、このメソッドは必要ありません。

getThemeDescription()

インストール時に使用されるテーマの概要を指定します。新しくテーマを作るときはElegant,spacious …. を変更してください。
以前はdescription.txtの2行目に書かれていた内容です。現在でもdescription.txtがあれば、このメソッドは必要ありません。

getThemeBlockClasses()

ブロックのカスタムクラス名をリストに追加します。カスタムクラスは入力もできますが、最初から設定しておくとわざわざ編集者が入力する必要がなく便利です。

2015-12-12custom_class

図はページリストブロックタイプのカスタムクラス

getThemeAreaClasses()

ここではエリアのカスタムクラス名をリストに追加します。カスタムクラスは入力もできますが、最初から設定しておくとわざわざ編集者が入力する必要がなく便利です。

2015-12-12custom_area_class

getthemeDefaultBlockTemplates()

ブロックタイプのデフォルトのテンプレートを指定します。ブロックを設置した時に自動的に設定されます。
編集者がカスタムテンプレートを設定する手間が省けます。

getthemeResponsiveImageMap()

[ 管理画面→システムと設定→ファイル→サムネイル]で設定した内容とセットでレスポンシブ画像を実装するようです。僕は詳しくないのでこちらにて確認ください。

 

getThemeEditorClasses()

記事ブロック用に設定することができます。記事ブロックの編集画面のカスタムスタイルで表示されます。

2015-12-12editor_class

getThemeAreaLayoutPresets()

concrete5でレイアウト機能を使ってレイアウトを作成するときに、例えば2カラムのレイアウトを作成した場合に横幅は均等に割り付けされますが、ここで指定しておけば、好みのサイズのレイアウトができます。上記設定項目はレイアウト機能を使用するときに[グリッドリストのプリセット]に表示されます。

2015-12-12layout

このように、コンテンツ編集をしやすくるためにpage_theme.phpはあります。特に設定しなくても、問題なくテーマは作成できますが、jqueryを使う場合はdefualt.phpなどに書いてもいいですが2重読み込みになる可能性があるで、こちら「registerAssets()」で指定するほうが無難です。

また、毎回ブロックのカスタムテンプレートを指定することなく使えることや、編集者が手入力することによる書き間違いなどを防げるので、非常に便利です。ぜひ活用してみてください。

次回のconcrete5 Japanアドベントカレンダー2015はjunirock78さんの「concrete5で会社を辞めました。」です。

elementalのpage_theme.php” への1件のコメント

  1. ピンバック: elementalテーマを複製してテーマのベースを作る(1) – ねこみみ隊長らしい。

コメントを残す