複雑なカスタムレイアウトプリセットをテーマに追加する

対象:concrete5 バージョン7.5以降

concrete5 バージョン7.5から、テーマレベルで複雑なカスタムレイアウトプリセットを定義できるようになりました。テーマの page_theme.php クラスで指定でき、ユーザーインターフェースからカスタムレイアウトプリセットを選ぶことができるようになります。例えば、次のBootstrapのグリッドを考えてみましょう。

<div class="row">
    <div class="col-md-6 col-lg-3">Column A</div>
    <div class="col-md-6 col-lg-3">Column B</div>
    <div class="col-md-6 col-lg-3">Column C</div>
    <div class="col-md-6 col-lg-3">Column D</div>
</div>

この例では、このグリッドは画面の小さいデバイスでは1カラムになり、中サイズのデバイスでは2カラムになり、大きいデバイスでは4カラムになります。このような指定は、レイアウトの設定画面からではできません。しかし、カスタムレイアウトプリセットを使えば可能になります。

まず、PageThemeクラスを開きましょう。場所はおそらく application/themes/あなたのテーマフォルダ/page_theme.php または packages/テーマパッケージ/themes/テーマフォルダ/page_theme.php にあります。カスタムテーマスタイルやカスタムレスポンシブ画像タイプを指定するときのように、カスタムレイアウトプリセットを追加するには、オプションのメソッドをクラスに追加する必要があります。

public function getThemeAreaLayoutPresets()
{
}

このメソッドはHTMLでコンテナ、行、カラムのそれぞれを配列で返します。もし、上記のようなカスタムグリッドを「Medium Two Large Four」という名前でプリセットに登録したい場合は、次のように記述します。

public function getThemeAreaLayoutPresets()
{
    $presets = array(
        array(
            'handle' => 'medium_two_large_four',
            'name' => 'Medium Two Large Four',
            'container' => '<div class="row"></div>',
            'columns' => array(
                '<div class="col-md-6 col-lg-3"></div>',
                '<div class="col-md-6 col-lg-3"></div>',
                '<div class="col-md-6 col-lg-3"></div>',
                '<div class="col-md-6 col-lg-3"></div>'
            ),
        )
    );
    return $presets;
}

以上です!これでレイアウトのドロップダウンメニューにカスタムプリセットが表示され、選べるようになります。

Bootstrapのためだけではありません

このサンプルではBootstrapを使いましたが、Bootstrapベースのテーマだけでなく、concrete5のグリッドフレームワークに含まれていないような独自のグリッドを使いたい場合でも使えます。例えば、左サイドばーのプリセットを、"one-third" と "two-thirds" というクラスで指定したい場合、concrete5のグリッドフレームワークシステムとして実現することはできませんが、プリセットを使えば次のように登録できます。

public function getThemeAreaLayoutPresets()
{
    $presets = array(
        array(
            'handle' => 'left_sidebar',
            'name' => 'Left Sidebar',
            'container' => '<div></div>',
            'columns' => array(
                '<div class="one-third"></div>',
                '<div class="two-thirds"></div>'
            ),
        )
    );
    return $presets;
}