読者です 読者をやめる 読者になる 読者になる

FuelPHPのテーマクラスのサンプル

Fuelphpのテーマクラスのサンプルです。
『active』を変更する事により、テーマの切り替えが可能です。

サンプル

Config

app/config/theme.php
<?php
return array(
    'active'        => 'mytheme1',
    'fallback'      => 'default',
    'paths'         => array(APPPATH.'views'),
    'assets_folder' => 'themes',
    'view_ext'      => '.php'
);

あらかじめテーマ用のディレクトリを作成します。

$ mkdir app/views/mytheme1
$ mkdir app/views/default

Controller

app/classes/controller/sample.php
<?php
class Controller_Sample extends Controller
{
    public function before()
    {
        $this->theme = \Theme::instance();
    }

    public function action_index()
    {
        $this->theme->set_template('homepage')->set('title', 'sample');
        $this->theme->set_partial('header', 'header')->set('name', 'hoge');
        $this->theme->set_partial('footer', 'footer')->set(array(
            'foo' => 'val1',
            'bar' => 'val2'
        ));
    }

    public function after($response)
    {
        if (empty($response) or ! $response instanceof Response) {
            $response = \Response::forge($this->theme->render());
        }
        return parent::after($response);
    }
}

Template

app/views/mytheme1/homepage.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $title ?></title>
</head>
<body>

<?php echo $partials['header'] ?>
...
<?php echo \Theme::instance()->asset->img('myicon.png') ?>
...
<?php echo $partials['footer'] ?>

</body>
</html>
app/views/mytheme1/header.php
...
<?php echo $name ?>
...
app/views/mytheme1/footer.php
...
<?php echo $foo ?>
...
<?php echo $bar ?>
...

諸々の説明

Config

active アクティブなテーマ名
fallback アクティブなテーマが存在しない場合のテーマ
paths テーマ検索パス
assets_folder assetフォルダ名
view_ext テンプレートの拡張子
info_file_name
require_info_file
info_file_type

テンプレートのベースパスは、pathsで指定したディレクトリ内のactive名、fallback名のディレクトリになり、まずactive内でテンプレートを探し、ない場合にfallback内のテンプレートを表示します。

デフォルトでは『DOCROOT/themes/default』を参照するようになっている為、サンプルではapp/viewsに変更しています。

また、テーマクラスに関する設定は、設定ファイル(theme.php)以外に、instance()実行時またforge()実行時に指定が可能です。
例)

<?php
..
    function before()
    {
        ...
        $this->theme = \Theme::instance(
            'custom',
            array(
                'active'        => 'mytheme1',
                'fallback'      => 'default',
                'paths'         => array(APPPATH.'views'),
                'assets_folder' => 'themes',
                'view_ext'      => '.php'
            )
        );
        ...
    }

テンプレート/パーツの読み込み

『set_template('テンプレート')』を使用し、ベースとなるテンプレートを読み込みます。
テンプレートで使用する変数は『set』で渡します。

$this->theme->set_template('homepage')->set('title', 'sample');

ヘッダーやフッター等の共通パーツは『set_partial('セクション名', 'テンプレート')』を使用します。

$this->theme->set_partial('footer', 'footer')->set(array(
    'foo' => 'val1',
    'bar' => 'val2'
));

『set_partial()』で読み込んだパーツは、テンプレート側で以下のように出力が可能です。

<?php echo $partials['footer'] ?>

Asset

テーマクラスを使用した場合、Assetの呼び出しは以下のように行います。

<?php echo \Theme::instance()->asset->img('myicon.png') ?>

サンプルでは『'assets_folder' => 'themes'』を設定している為、『DOCROOT/themes/mytheme1』がベースになり、サンプルは以下のようなタグが出力されます。

<img src="http://hoge.com/themes/mytheme1/img/myicon.png" alt="" />

※通常のAsset同様、『img』『css』『js』の各ディレクトリ配下のファイルを呼び出し

よくわからない点

  • set_chrome()
  • info_file_name/require_info_file