テーマとテンプレートの構成

テーマの構成と動作の仕組み



テーマディレクトリ(themes)には、テーマ設定で指定するテーマディレクトリ以外に、system という a-blog cms のシステムで利用しているテーマが入っています。さらに system の中に admin というディレクトリがあり、ここに全ての管理ページのテンプレートファイルが格納されています。ですから a-blog cms の管理ページをカスタマイズする際には、admin の中のファイルを修正すればいい事になります。

テーマ設定で設定されているテーマ(site)と、system のテーマは継承関係にあり、テーマ設定で設定されているテーマに呼び出すファイルが存在しない時には、system のファイルをチェックし、存在していればそのファイルを表示させる事になります。例えば、login.html や 404.html は site のテーマの中には存在していませんが、表示される様になっています。

また、テーマ作成の作法として、system のファイルを直接修正するのではなく、テーマ設定で設定されているテーマにコピーして修正するようにしてください。システムのアップデートの際に system ディレクトリはアップデートされる事になり、カスタマイズ部分が消えてしまう事になります。

「テーマ設定」以外で表示テンプレートファイルを指定するには?

テーマ設定では、テンプレートファイルの項目でブログのトップページや一覧、詳細ページなどいくつかの条件で使用するテンプレートを指定できました。しかし、このままではブログごとにテーマを設定しないとコンテンツごとにデザインや表示内容が変えられません。
そこで、テーマ内のテンプレート構成をカスタマイズして、コンテンツごとに使用するテンプレートを分ける必要があります。

カテゴリーごとや、特定のエントリーに対してテンプレートを指定する

a-blog cmsでは、カテゴリー毎や特定のエントリーに対してテンプレートを設定できます。
カテゴリー毎に設定する場合は、テーマディレクトリ内にカテゴリーコードと同じ名前のフォルダと、その中に必要なテンプレートファイルを用意します。
特定のエントリーに設定する場合は、エントリーコードのファイル名を用意することで特定のエントリー専用のテンプレートが設定できます。

例:Siteテーマを使用したブログで、news カテゴリーにテンプレートファイルを指定する場合

ここではSiteテーマを元にカテゴリーごとに表示テンプレートを変える方法について説明します。


/themes/ の構成

/themes/ の構成


news というカテゴリーには、site/news/index.html(一覧)site/news/entry.html(詳細)のテンプレートが用意されています。この場合であれば、news のカテゴリーを表示する際には、これらのテンプレートファイルが使用されます。

もし、詳細ページのテンプレートを他のページと共用の設定にするのであれば、site/news/entry.html(詳細)のファイルを削除します。すると、テーマディレクトリの直下にあるファイルを参照するようになり site/entry.html(詳細)を利用するようになります。

表示テンプレートの確認

デバッグモード(config.server.php の DEBUG_MODE)が 1 の時のみ、下図のように現在表示しているテンプレートがどのファイルなのかを管理ボタン群部分に表示します。この機能で現在使用しているテンプレートファイルが確認できます。
この例では、 /themes/site/top.html が使われていることがわかります。



また、デバッグモードには他にも、開発者ツールやソースコードを表示すると、より詳しいパーツごとのインクルード先がHTMLコメントにとして表示され、使用しているテンプレートがわかります。


JSONを使って専用モジュールを作ってみよう

a-blog cms ではビルドインモジュール(Entry_BodyやCategory_List...)と呼ばれる最初から入っているモジュールを使って動的にコンテンツを出力していきます。一般的なサイトを作るうえでは、ビルドインモジュールがあればそこまで困らないのですが、a-blog cmsで管理していないデータを出力したり、特殊な絞り込みをしたい場合は、PHPを書いて専用モジュールを開発する必要がありました。

そこで、Ver. 2.7.0 から導入される新しいビルドインモジュール Json_2Tpl を使う事でPHPが得意でない人もJSONさえ用意できれば、PHPを1行も書かずに思い通りのモジュールを作る事ができるようになります。

また、JSONがインターフェイスとなるので外部サービスとの連携もしやすくなります。今までPHPで諦めていた人は是非チャレンジしてみてください。

基礎編

まずは、モジュールIDの作成を行います。 管理ページ > モジュールID の モジュールID作成ボタン を押してモジュールIDを新規作成します。ここでは以下のような設定にしましょう。

  • モジュール: Json_2Tpl
  • id: sampleJson2Tpl
  • 名前: Json_2Tplの練習

a-blog cms 2.0.x系のWYSIWYGエディタ(CKEditor)でフル機能を使えるようにする


2.0.x系でCKEditorの機能が少ない問題が発見されました。

以下のバージョンでCKEditorの使えない機能がある事が発見されました。 これは、CKEditorがフルパッケージではなく、スタンダードパッケージが入っている事が原因になります。

使えない機能として、フォントサイズや、フォントカラーなどがあります。

フル機能が使えないバージョン

  • 2.0.1
  • 2.0.0.3
  • 2.0.0.2
  • 2.0.0.1
  • 2.0.0

この問題はver.2.0.1より後に出たバージョンで解決予定です。

CKEditorをフルパッケージに更新する

次のバージョンが出るまで待つのは不便ですので、CKEditorをフルパッケージにする方法をお知らせ致します。

CKEditorのフルパッケージをダウンロード

CKEditor ダウンロードからCKEditorのフルパッケージをダウンロードして下さい。

テーマの継承

使用中のテーマに存在しないファイルは、system テーマ内のファイルを使用するようになっていますが、同様に子ブログ用のテーマを作る際に@による継承を利用したテーマディレクトリを作成する事で、system との関係のようにテーマを継承する事が可能です。
この継承の仕組みを利用することで、共通で使えるファイルは継承し、個別に必要なファイルのみを別テーマ内に用意することでカスタマイズ、メンテナンスが容易になります。

以下の例はテーマ「site」を元に子ブログ「blog」用のテーマを作る場合のものになります。

blog@site


例えば、blog@site/include に header.html が無い場合には、site/include/header.html を利用する事になります。また president@blog@site のように複数の @ を使ったテーマも作成できます。

複数のブログを1つのシステム内に設定してカスタマイズする、といったサイトの制作時には、このような方法でメンテナンス性の高いテーマを作成できます。

カスタムフィールドを動的化してみよう

通常カスタムフィールドを変更しようと思った場合にはテンプレートを修正する必要が出てきます。 ですがカスタムフィールドをカスタムフィールドで作るといったカスタムフィールドの動的化をすることによってテンプレートを触ることなくカスタムフィールドが変更できるようになります。

カスタマイズ

今回はsimple2016の物件情報の最寄り駅選択肢を動的化していきます。

カスタムフィールドのメタ情報の準備

まずは、選択肢を追加するためのカスタムフィールドを作っていきます。今回はブログのカスタムフィールドを利用してみたいと思います。 /themes/simple2016/admin/blog/field.html に以下のコードを追加します。