テーマの仕組み

提供: Baked Wiki
移動: 案内検索

目次

構造

テーマシステムはCakePHPのプラグイン機能によって実現しています。テーマフォルダそのものがCakePHPのプラグインになっています。テーマフォルダの設置先は「app/Plugin」ディレクトリで、ディレクトリ名は「Theme」の接頭辞が必要です。

テーマの実体はPHPファイルです。Bakedはサイトにアクセスがあると、表示するページの情報の変数(ページ名やコンテンツ)を、テーマファイル(PHP)に渡します。 テーマファイルはそれらの変数をいい感じにレイアウトし、Webページを作ります。

下記はテーマフォルダのツリー構造です。.ctp拡張子はCakePHP専用の拡張子ですが、.phpと読み替えて問題ありません。

  • ThemeName テーマフォルダ
    • Config 設定フォルダ
      • bootstrap.php 設定ファイル
    • View ビューフォルダ
      • Display メインビューフォルダ
        • 404.ctp Not Foundエラー用のビュー
        • blog.ctp ブログ用のビュー
        • entry.ctp エントリ用のビュー
        • show.ctp 通常ページのビュー
      • Elements 部品ビューのフォルダ
        • entry.ctp ブログエントリの部品ビュー
      • Layouts レイアウトフォルダ
        • default.ctp レイアウトファイル
    • webroot テーマルートフォルダ
      • _meta メタフォルダ
        • screen.png スクリーンショット画像
      • css CSSフォルダ
        • style.css メインCSSファイル
      • images 画像フォルダ
      • js JSフォルダ


カスタマイズ用テーマ

0.0.4から、カスタマイズに適したThemeCustomというテーマが同梱されています。ThemeCustomは極力装飾を無くしているので、テーマの構造が分かりやすくなっています。初めのうちは、このテーマをコピーしてカスタマイズするのが良いでしょう。cssファイルにはコメントが多く付いているので、テーマ用cssの編集方法が学べます。


変数

テーマのビューには以下の変数が渡されます。これらを適当に表示し、ページを作ってください。

変数名 説明
$menuList 全てのページ情報の配列
$currentMenu 現在表示しているページ情報の配列


定数

テーマではいくつかの定数が使えます。

定数名 説明
BK_SITE_NAME サイトタイトル
URL トップページのURL
CURRENT_URL 現在のページのURL
EDITTING 編集中かどうか(boolean)


シート

Bakedはブロックを積み上げてサイトを作りますが、そのブロックの受け皿がシートです。シートは複数のブロックを保持します。シートはいくつでも作れますが、通常は1ページに2〜5つのシートを用意します。

下の画像は標準テーマのスクリーンショットです。このページには3つのシートがあります。

Theme-tutorial-sheets.png

「visual」シートは、ページのメインビジュアル用のシートです。「main」シートは、メインコンテンツのためのシートで、「sub」はサブコンテンツのためのシートです。

シートの名前は自由に付ける事ができますが、ユーザーがテーマを変更してもサイトのコンテンツが変わってしまわないよう、一定の規範があります。それぞれのシートの目的に従い、下記の表の名前を極力使うようにしてください。

シート名 説明
main メインコンテンツのためのシート
sub サブコンテンツのためのシート
visual メインビジュアルのためのシート
blog-header ブログコンテンツの上に表示するシート
blog-footer ブログコンテンツの下に表示するシート


シートを作るには、下記のコードを書きます。

<?php
echo $this->element('Baked/sheet', array(
  'sheet' => 'シート名', // 'main'や'sub'など
));


メソッド

テーマのビューからコールできるオブジェクトメソッドは下記の通りです。適宜良い感じで呼び出してください。

必ずコールするメソッド

<html>
<head>
~
<?php
echo $this->element('Baked/head'); // 動作に必要な<meta>タグなどを出力します。
echo $this->element('Baked/css'); // 動作に必要な<link>タグなどを出力します。
echo $this->element('Baked/js'); // 動作に必要な<script>タグなどを出力します。
?>
~
</head>
<body>
<?php
echo $this->Element('Baked/html'); // 動作に必要なタグを出力します。
?>
~
</body>
</html>

使えるメソッド

<?php
// シートを出力します。
echo $this->element('Baked/sheet', array(
  'sheet' => 'main', // シート名
));
?>


ダイナミック属性

動的に編集されるブロックの表示は $this->element('Baked', array('sheet' => 'シート名')) メソッドに任せます。一方、ナビゲーションやパンクズリストの表示は、テーマのビューファイルが担当します。動的にページのタイトルなどが変更されたとき、ナビゲーションやパンクズリストの表示も即座に更新しておきたいはずです。 それを実現するのがdata-bk-dynamic属性です。以下のコードの様に、変更があったときに自動で更新させたいタグに属性を付けます。

<!-- ナビゲーションを出力 -->
<ul data-bk-dynamic="primary-navigation">
  ~
</ul>

ページ情報に変更があったとき、Bakedはdata-bk-dynamic属性のついたタグを探して、最新の状態に更新します。data-bk-dynamicの値は、一意になるようにしてください。