テーマ

テーマは、ページ要素のうち、ヘッダー、フッター、ナビゲーションなど、サイト全体を通して共通の規則にしたがって生成されるべき部分を一元管理する概念。コンテンツ領域以外のHTMLソースを自動的に生成します。

テーマの格納ディレクトリ

テーマは、次のディレクトリに格納されます。

./_PX/themes/{$テーマ名}/

複数のテーマの管理と切り替え

Pickles Framework では、1サイトに複数のテーマを定義することができます。テーマにはそれぞれ名前を付けます。デフォルトのテーマのテーマ名は "default" です。

テーマは、URLパラメータに ?THEME={$テーマ名} と付加して切り替えることができます。

例: http://xxxxxxxxx/?THEME={$テーマ名}

レイアウト

テーマは、複数のテンプレートを定義することができます。これはレイアウトと呼ばれ、サイトマップの layout 列にレイアウト名を指定することによって切り替えることができます。デフォルトのレイアウトは default です。

./_PX/themes/{$テーマ名}/{$レイアウト名}.html

初期状態では、default(標準レイアウト)、top(トップページ用レイアウト)、plain(<body>の直下にコンテンツエリアを配したレイアウト)、popup(ポップアップウィンドウ用レイアウト)、naked(コンテンツエリアのみが出力されるレイアウト)が定義されていますが、任意に増やすことができます。

テンプレートの記述

テーマは、コンテンツ領域のソースを変数として受け取り、HTML全体を補完して完成させます。テーマのテンプレートは、DOCTYPE宣言、htmlタグ、headセクション、bodyセクションを出力し、ヘッダー、フッターナビゲーション構造などを生成するのもテーマの役割です。

まず、デフォルトレイアウト default.html に、最低限の基本的なHTMLのセットを用意します。

<!doctype html>
<html>
<head>
<title>sample</title>
</head>
<body>
</body>
</html>

ここに、順を追って必要な動的要素を追加していきます。

コンテンツを出力する

コンテンツは、コンテンツ領域にあたる部分に出力します。関数 $px->theme()->pull_content() で出力でします。
コンテンツ領域は、必ず class="contents" の要素で囲われるようにしなければなりません。

<!doctype html>
<html>
<head>
<title>sample</title>
</head>
<body>
<div class="contents">
<?php
    //↓コンテンツから受け取った
    //  コンテンツエリアのソースを出力しています。
    print $px->theme()->pull_content();
?>
</div>
</body>
</html>

コンテンツが定義したCSSやJavaScriptを出力する

コンテンツは、そのコンテンツ独自のJavaScript機能やCSSを定義しているかも知れません。CSSやJavaScriptの定義は、headセクション内に出力したいところですが、コンテンツのコードにはheadセクションを含まないので、コンテンツの制作者は関数 $px->theme()->send_content('HTMLコード', head') を使って、テーマにHTMLを託します。

こうして受け取ったコードは、次の例のように、関数 $px->theme()->pull_content('head') で出力します。

<!doctype html>
<html>
<head>
<title>sample</title>
<?php
    //↓コンテンツから受け取った
    //  headセクション内用のソースを出力しています。
    print $px->theme()->pull_content('head');
?>
</head>
<body>
<div class="contents">
<?php
    //↓コンテンツから受け取った
    //  コンテンツエリアのソースを出力しています。
    print $px->theme()->pull_content();
?>
</div>
</body>
</html>

コンテンツの環境構築

コンテンツのHTMLコードが本来の意図通りにレイアウトされるためには、それに必要なCSSなどの環境をテーマから提供する必要があります。しかし、コンテンツ向けのCSS環境はプロジェクトによって一定とは限りません。

そこで「プロジェクトは、コンテンツ向けに提供する環境設定を /common/contents_manifesto.nopublish.inc.php に置く」という約束が設けられました。すべてのテーマがこのファイルをインクルードすれば、テーマを取り替えたときにもコンテンツの表示を保証できるようになります。

<!doctype html>
<html>
<head>
<title>sample</title>
<?php
    // ↓コンテンツの環境構築を読み込みます。
    @include( $_SERVER['DOCUMENT_ROOT'].$px->theme()->href('/common/contents_manifesto.nopublish.inc.php') );
?>
<?php
    //↓コンテンツから受け取った
    //  headセクション内用のソースを出力しています。
    print $px->theme()->pull_content('head');
?>
</head>
<body>
<div class="contents">
<?php
    //↓コンテンツから受け取った
    //  コンテンツエリアのソースを出力しています。
    print $px->theme()->pull_content();
?>
</div>
</body>
</html>

ページの情報を出力する

カレントページの情報は、サイトマップCSVに定義されており、$this->px->site()->get_current_page_info() から取得することができます。

テーマテンプレートには、複数の箇所でページ情報を参照しますので、先頭で $page_info に連想配列に格納して使いまわせるように準備します。

<?php
    //↓ $page_info にページの情報を格納しています。
    //   test::var_dump( $page_info ); で、変数の内容を確認できます。
    $page_info = $this->px->site()->get_current_page_info();
?><!doctype html>
<html>
<head>
<title>sample</title>
<?php
    // ↓コンテンツの環境構築を読み込みます。
    @include( $_SERVER['DOCUMENT_ROOT'].$px->theme()->href('/common/contents_manifesto.nopublish.inc.php') );
?>
<?php
    //↓コンテンツから受け取った
    //  headセクション内用のソースを出力しています。
    print $px->theme()->pull_content('head');
?>
</head>
<body>
<div class="contents">
<?php
    //↓コンテンツから受け取った
    //  コンテンツエリアのソースを出力しています。
    print $px->theme()->pull_content();
?>
</div>
</body>
</html>

ここで用意した $page_info から、出力する情報を選んで出力します。幾つか例を示します。

ページ名を出力する

ページ名には、HTMLの特殊文字が含まれている可能性があります。t::h() を通して、エスケープするようにします。

<title><?php print t::h($page_info['title']); ?> | サイト名</title>

メタタグ descriptionを出力する

<meta name="description" content="<?php print t::h($page_info['description']); ?>" />

メタタグkeywordsを出力する

<meta name="keywords" content="<?php print t::h($page_info['keywords']); ?>" />

ページ名(h1用)を出力する

h1見出しには、HTML特殊文字に加え、改行が含まれている場合がありますので、t::h() の代わりに t::text2html() を使用しています。t::text2html() は、HTML特殊文字のエスケープに加えて、改行コードを改行タグ <br /> に変換します。

<h1><?php print t::text2html( $page_info['title_h1'] ); ?></h1>

この他にも、サイトマップに定義されたすべての項目にアクセスすることができます。

その他の機能から出力する

コンフィグに設定されたサイト名を出力する

<title><?php print t::h($px->get_conf('project.name')); ?></title>

パン屑を出力する

<div class="breadcrumb"><?php print $px->theme()->mk_breadcrumb(); ?></div>

コンテンツソースのDOM置換加工

HTMLのDOM構造を出力の前に変換する必要のある場合が想定されています。例えば、既存のHTMLに手を加えずデザインを変更したいが、新しいデザインを反映するには、入れ子要素が1階層足りない、などの場合のことを指します。

この問題に対しては、finalizer の finalize_contents() メソッドを編集することで解決します。

finalizer には、共通加工用とテーマ個別加工用の2種類があり、それぞれ次の場所に置かれています。

共通加工用
./_PX/_FW/styles/finalizer.php
テーマ個別加工用
./_PX/themes/{$theme_id}/_FW/styles/finalizer.php

このメソッドは、加工前のHTMLソースを第1引数に受け取り、加工後のHTMLソースを返します。先にテーマ個別加工用、次いで共通加工用の順で実行されます。

変換の具体的な実装は、任意のライブラリ等を使って行うことができます。例として、 ./_PX/libs/PxXMLDomParser/PxXMLDomParser.php を使用したサンプルコードをコメントアウトしてありますので、参考にしてください。

<前へ | 次へ>

次期バージョン Pickles 2 を公開しました。もっと詳しく