エリアを追加してみよう
concrete5ではこのエリアがキモになります。既存のテーマを使ってオリジナルのエリアを追加してみましょう。エリアは既存のテーマなどは配置箇所や数は違います。もちろん、独自でテーマを作る場合はこのエリアは自由に作ることができます。
エリア部分はどのようになっているのでしょうか。concrete5 5.7に最初から入っているデフォルトのテーマElementalを見てみましょう。
エリアを追加するためのコード
テーマはルートから以下の箇所に格納されています。
- ルート/concrete/themes/elemental
この中に「defaut.php」というファイルがあるのですがこれは基本の「ページタイプ」で主なコンテンツなどを表示する部分になります。「ページタイプ」については詳しくは次回説明します。
ファイルをエディタで見てみるとソースは以下のようになっています。
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<main>
<?php
$a = new Area('Main');
$a->enableGridContainer();
$a->display($c);
?>
<?php
$a = new Area('Page Footer');
$a->enableGridContainer();
$a->display($c);
?>
</main>
<?php $this->inc('elements/footer.php'); ?>
上記コードに2か所ある「$a = new Area('エリア名')」の部分がエリア部分を作りだしています。このソースを見ていただくと分かるように、Elementalではhtmlのコードがほとんどありません。エリアのレイアウトを編集してカラム数を変更したり、ブロックを配置するだけでページを構築することができます。
エリアを追加するための基本のコードは以下になります。
<?php
$a = new Area('エリア名');
$a->display($c);
?>
テーマElementalは、デザインのフレームワークにTwitter Bootstrap3が使われています。レイアウトの編集時の際もエリアに以下のとおり1行追記するだけで、Bootstrap3のグリッドシステムを使うことができます。
Twitter Bootstrap3でカラムを追加すると、containerクラスの<div>タグでラップされるようになります。左右に余白が付きセンタリングされるようになります。テーマのレイアウトについては後日説明します。
<?php
$a = new Area('エリア名');
$a->enableGridContainer();
$a->display($c);
?>
例えば、このdefault.phpにエリア名「SubArea」というエリアを追加したい場合、以下のように変更します。
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<main>
<?php
$a = new Area('Main');
$a->enableGridContainer();
$a->display($c);
?>
<?php
$a = new Area('SubArea');
$a->enableGridContainer();
$a->display($c);
?>
<?php
$a = new Area('Page Footer');
$a->enableGridContainer();
$a->display($c);
?>
</main>
<?php $this->inc('elements/footer.php'); ?>
編集モードで確認すると以下のように「SubArea」という空のエリアが表示されるようになります。
concrete5の構造で述べたように、エリアには2種類あります。ページ個々で使えるものと、全ページ共通の「グローバルエリア」があります。1個の「グローバルエリア」を編集するとすべてに反映され、作業効率もアップします。
似たようなものに「スタック」というものがあります。
グローバルエリアを設置したいときは次のように書き換えるだけです。
<?php
$a = new GlobalArea('グローバルエリア名'');
$a->display();
?>
//レイアウトのグリッドサポートを使えるようにしたい場合
<?php
$a = new GlobalArea('グローバルエリア名'');
$a->enableGridContainer();
$a->display();
?>
また、追加できるブロックの数も制限することができます。
<?php
$a = new Area('【エリア名】');
$a->setBlockLimit(n);//nは制限するカラム
$a->display($c);
?>
制限されたn個以上のブロックを追加できなくなります。
まとめ
今回はconcrete5の概要やデフォルトのテーマを使ってインストールと操作方法を解説しました。また、少しだけエリアのコード部分についても説明しました。concrete5はマウス操作で直感的にデザインやコンテンツを作り上げていけるということがお分かりいただけたかと思います。
次回はconcrete5のページの追加やサイトマップ、ページテンプレートについて学びます。
最後に、本記事の執筆にあたり、アドバイスをいただきましたコンクリートファイブジャパンの佐々木様、菱川様、Katz様に感謝いたします。
