ドキュメントdocument

テーマ

テーマの基本

エントリーのデータを表示する元となるテンプレートhtmlファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsで独自のサイトを作るためにはこのテーマをカスタマイズをする必要があります。



a-blog cmsのデータは、設定(コンフィグ>テーマ設定)で指定されたテーマファイルを通して表示されます。
a-blog cmsには標準のテーマとしてsite, blog など複数のテーマを同梱しています。これら同梱のテーマを使用してもよいですし、同梱のテーマを元にカスタマイズしたり、独自に制作することもできます。


テーマの設定

a-blog cms のデータを表示するテーマファイルは、管理ページから設定します。 カスタマイズ管理 > コンフィグ > ブログ > テーマ設定 にアクセスしてください。 この画面は、site2015テーマを使用しているブログのテーマ設定になります。


テーマディレクトリ名とテンプレート設定


テーマディレクトリ名には現在使用しているテーマ名が表示されており、a-blog cms 設置ディレクトリ/themes/ 以下にあるテーマディレクトリがプルダウンメニューで選択できます。 テーマディレクトリ内にtemplate.yaml がある場合、テンプレート設定のチェックをすることで、設定されたテンプレートを優先して読み込みます。

template.yaml ファイルは、テーマを使いまわす場合に毎回テンプレートファイルの設定をしなくて済むように、あらかじめテンプレートファイルの設定内容を記述しておくために設置します。 /themes/テーマディレクトリ/template.yaml にファイルを置くことで有効になります。


テンプレートファイル


テンプレートのコントロールについては、テンプレートの章で紹介します。トップページ・一覧ページ・詳細ページ・エラーページ・管理ページ・エントリー編集ページ・ユニット追加ページ・ログインページの8種類のテンプレートを指定します。 一般的には、詳細ページとエントリー編集ページ・ユニット追加ページのテンプレートは同じに設定しておくようにした方がいいでしょう。


テーマの継承

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

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

blog@site2014


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

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


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

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


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

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

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

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

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

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

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

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

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


/themes/ の構成

/themes/ の構成


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


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

表示テンプレートの確認

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


スクリーンショット:管理ボックス内に使用しているテンプレートが表示されている

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


スクリーンショット:開発者ツールから使用しているファイルのパスがHTMLコメントとして表示されている

テーマディレクトリ外のディレクトリのパスでファイルを表示する

テーマディレクトリ外のディレクトリのパスで静的なファイルを表示する方法

a-blog cms設置してあるサイトでは、表示するテーマ内のディレクトリは通常カテゴリーとして扱われます。テーマ内にカテゴリーと同名のディレクトリを設置することで、カテゴリー固有のテンプレートで表示ができます。
しかし、a-blog cms を介さず、テーマディレクトリ外の静的なファイルを表示したいケースもあります。ここではこのような場合の対応方法について解説します。

a-blog cms のテンプレート設定と基本的な動き

テーマの設定で各ページで使用するファイルの設定とファイル構成がこのような内容であった場合


ページで使用するファイルの設定例

ページで使用するファイルの設定例


a-blog cmsファイル構成図

a-blog cmsファイル構成図


前提として、special というカテゴリー、子ブログは無いものとします。
このような状態で
http://www.example.com/special/ を表示しようとした場合、a-blog cms はindex.html を表示せず、special というカテゴリーまたは子ブログを探して、Not Found を表示してしまいます。

config.system.yaml に設定を追加して対応

http://www.example.com/special/ というURLで /special/index.html を表示するために、config.system.yaml というファイルに設定を追加します。config.system.yaml はa-blog cms設置ディレクトリ内の /private/config.system.yaml にあります。

directory_index   : []

config.system.yaml 内の上記の部分を以下のように変更します。

directory_index   : [index.html]

こうすることで、テーマディレクトリ外のディレクトリを直接指定した場合に、index.html を表示する、という設定になります。

設定の応用

今回の例では index.html を追加しましたが、以下のようにカンマ区切りで複数記述することで、優先順位をつけて設定することができます。以下の例では、index.html が無かった場合index.htm を表示するものとなります。

directory_index   : [index.html,index.htm]