エリアでグリッドレイアウトを有効にする

concrete5 5.7では、Twitter Bootstrap 3のグリッドフレームワークをサポートしていますので、テーマをこのフレームワークに対応させる方法は非常に簡単です。

クラスファイルを追加

まず、テーマの PageTheme クラスを記述するファイルを作成します。このPHPのクラスは、テーマから使用可能な特殊な機能のための設定値などを記述するために使います。

application/themes/urbanic/page_theme.php ファイルを作成し、次のコードを記述してください（urbanic の部分はテーマによって異なります）。

<?php
namespace Application\Theme\Urbanic;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme
{
 
}

namespace はconcrete5の命名規則に従う必要があります。Application\Theme までは固定です。Urbanicは、テーマのフォルダ名 urbanic の先頭文字を大文字に置き換えたものです。テーマのフォルダ名が複数の単語に分かれている場合は、先頭が大文字のキャメルケースで表現します。例えば、フォルダ名がone_two_threeであればOneTwoThreeになります。クラス名は常に PageTheme で、\Concrete\Page\Theme\Theme クラスを継承する必要があります。

テーマを再インストールする

このクラスファイルを有効にするには、管理画面からいったんテーマをアンインストールしてから、インストールし直す必要があります。

クラスファイルにグリッドサポートを追加する

concrete5では、Bootstrap 3、Bootstrap 2、Foundation、960 gridの４つのグリッドフレームワークをサポートしています。どのグリッドフレームワークがインストールされているかは、次のディレクトリを見て確認することもできます。

src/Page/Theme/GridFramework/Type/

さらに他のグリッドフレームワークを追加する予定もありますし、開発者が自分で追加することもできるのですが、ここではテーマがBootstrap3のCSSを使用していると仮定して、Bootstrap3で説明を続けましょう。

クラスファイルに次の行を追加してください。

protected $pThemeGridFrameworkHandle = 'bootstrap3'

コンテナを追加する

エリアに自動的に container クラスを追加したい場合は、次の行をエリアに追加してください。

<?php
$a = new Area('Welcome');
$a->enableGridContainer(); // これ
$a->display($c);
?>

エリア全体が container クラスのdivで囲まれるわけではないことに注意してください。レイアウトの行ごとに囲まれます。グリッドフレームワークがそのような作りになっているためです。

コンテナを追加しない

エリアがすでに container クラスに囲まれていて、ブロックをcontainerで囲みたくない場合は、代わりに次の行を追加してください。

<?php
$a = new Area('Welcome');
$a->setAreaGridMaximumColumns(12); // これ
$a->display($c);
?>

12 は、このエリアで分割可能なカラム数の上限を意味します。

テストしてみましょう

ページを再読み込みしてみてください。エリアにコンテナが追加されたため、ページに追加したコンテンツが中央に寄っていると思います。次にレイアウトを追加してみましょう。Bootstrap 3がオプションとして表示され、Bootstrap3のグリッドフレームワークに沿った位置でエリアが分割できるようになりました。もちろん、このレイアウトは完全にレスポンシブです。

原文：Enabling Grid Support for Areas and Layouts