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

対象：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>

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

まず、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;
}

カスタムレイアウトプリセットの指定の際、column には自由なHTMLを指定できるように見えますが、div の入れ子は無視されますので、ご注意ください。

原文：Adding Complex Custom Layout Presets in Your Theme