テーマ

HTMLを生成するためのテンプレートやCSS・画像などのアセットをテーマという単位にまとめて管理しています。

テーマファイルの配置

テーマファイルは public/themes/ ディレクトリで管理されます。 public/themes/ ディレクトリ直下のディレクトリそれぞれが1つのテーマになります。

ディレクトリ名 説明
admin 管理画面テンプレート・アセット
cms 管理画面テンプレート
core 管理画面テンプレート
install 管理画面テンプレート
sample 公開サイトサンプルテーマ(アセット・テンプレート)

admin, cms, core, install は主に管理画面用のアセット(画像・CSS・JS等)とテンプレートを保管しています。このシステムの内部ではパッケージという単位でプログラムをまとめて管理しているため、4つのディレクトリに別れています。

sample は公開サイト用のサンプルテーマが入っています。 public/themes 下に任意の名前のディレクトリを作成するとテーマとして利用することができます。 sampleはあくまでも見本用という位置づけなので、実際の運用時には必ず独自のテーマを用意してください。 sampleディレクトリはプログラム本体側のソースという位置づけのため、アップグレード時には上書きされます。

サンプルテーマを元に独自に手を加えてテーマを制作する場合は、sample ディレクトリを複製して独自の名前を付けます。ここでは site という名前つけたとします。 system/config/cms.php の theme 項目に site を指定すると、それ以後は public/themes/site が公開サイトのテーマとして利用されるようになります。
※本ドキュメントでは、"site"という独自テーマを用意する想定で説明しています。

フィールド用テンプレート

フィールドはフォーム部品を持つ入力用テンプレートと公開サイト側に表示される出力用テンプレートがあります。 CMSにデフォルトで用意される入出力テンプレートはそれぞれ次の場所に保存されています。
public/themes/cms/views/inputs/
public/themes/cms/views/outputs/

独自にフィールドを追加した場合には、サイト用テーマディレクトリ内の入出力テンプレートを用意します。
public/themes/site/views/inputs/
public/themes/site/views/outputs/
※ フィールドの設定によっては、入力画面はデフォルトフィールドのテンプレートを使い、出力テンプレートだけ独自に用意するという使い方もできます。

デフォルトで用意される入出力テンプレートと同じファイル名のテンプレートをサイトテーマ下に用意するとサイトテーマ側のテンプレートが優先して利用されるようになります。

管理画面テンプレートの上書き

public/themes 下のテンプレートは system/app/themes 下に対応したファイルを置くことで上書き(優先)して利用することができます。 たとえば、ログイン画面用テンプレートを上書きしたいとします。 通常では、
public/themes/adimin/views/auth/login.twig が利用されます。 これをオリジナルデザインを適用したhtmlに書き換えたい場合には、
system/app/themes/adimin/views/auth/login.twig にテンプレートを作成します。

注意事項:

  • public/themes 内の管理画面テンプレートは直接編集しないでください。製品アップデート時に置き換えられてしまうことが理由です。
  • 製品をアップデートするとプログラムの処理内容が変わることがあるため、テンプレートファイルの再調整が必要になる場合があります。
  • テンプレートを上書きする場合には、元のテンプレートにあるコピーライト表示は残すようにしてください。
  • 管理画面テンプレートの上書き方法はテクニカルサポートの対象外です。

テンプレートの名前空間

Twig でテンプレートを読み込む場合に、@ で名前空間を指定することができます。 公開サイト用テーマは @site を指定します。 たとえば、CMS設定ファイル(cms.php)の theme 項目に mysite を指定している場合は、public/themes/mysite/views ディレクトリを @site で指定することができます。 具体的には、public/themes/mysite/views/page/home.twig を参照したい場合は、@site/page/home.twig と指定することができます。

公開サイトテンプレートを @site で呼び出すと、テーマディレクトリ名が変わった場合でも、記述を変更しなくて良いというメリットがあります。

名前空間:

名前空間 パス
(なし) system/app/themes
(なし) public/themes
app system/app/resources
site public/themes/{theme設定値}/views

※ {theme設定値} は cms.php 設定ファイルの theme 項目の値が指定されます。
※ 名前空間を指定しない(パスの先頭が @ ではない)場合は、system/app/themes 内を探索します。そこでファイルが見つからなければ、public/themes を探索するという挙動になります。

テーマの切り替えについて

このCMSではコンテンツの大部分がカスタムフィールドで定義されるため、テーマを切り替える場合にはカスタムフィールドとコンテンツタイプの設定もそれに合わせて切り替える必要があります。 コンテンツタイプの定義により保存されるデータの構造が変わるため、異なる構造のコンテンツタイプが設定されているテーマに切り替えることができません。 コンテンツの内容が同じでデザインをアップデートしたいという場合に、版管理をする目的でテーマを切り替えることはできます。