concrete5のレイアウト機能を Zurb Foundation 4 に対応させる

concrete5には「レイアウト」機能があり、編集モード内で編集エリア内を分割することができます。

この機能は便利なんですが、divのstyle属性に直接幅などが出力されるので、レスポンシブ対応ができません。コアチームでもこの問題は把握していて、次のメジャーバージョンアップとなる5.7では、Twitter BootstrapやZurb Foundationといった主なCSSフレームワークのグリッドシステムに対応すると予告しています。ただ、待ちきれないので、5.6以下でFoundationに対応する方法をご紹介します。

まず、concrete5のオーバーライドシステムのおさらい。

concrete5のコアコードは全て /concrete フォルダに入っています。ルートの各フォルダはほぼ中身が空です。この空のフォルダに、concrete フォルダ内の任意のファイルをコピーし、改変することで、コアコードの挙動を上書きすることができます。これがオーバーライドの基本的なしくみです。

レイアウト機能は /concrete/models/layout.php が使われており、さらに /concrete/core/models/layout.php を継承しています。

  class Layout extends Concrete5_Model_Layout {}  

/concrete/models/layout.php がレイアウト機能のコアコード。ただし、コアクラスを継承しているだけで、処理は何も書かれていない

  class Concrete5_Model_Layout extends Object {    	public static $tableName='Layout';  ...

/concrete/code/models/layout.php にレイアウト機能のコードが書かれている

というわけで、concrete5はその挙動の一部を、単にファイルを追加するだけでかんたんにカスタマイズすることができるしくみが備わっているというわけです。さらに、実際の挙動はコアクラスから継承していて、モデルのメソッド単位でのカスタマイズが可能になっています。これは、コードの保守性が高い上にお手軽というたいへんありがたいしくみです。

レイアウトのマークアップを変更するために、今回は /models/layout.php に下記のファイルを置きました。Layout クラスの display() メソッドをオーバーライドし、挙動を変更すると共に、Layoutクラスに displayFoundationGrid() メソッドを追加しています。

いや〜ラクですね〜

注意

Foundationのグリッドシステムは各グリッドが等幅なのが前提になりますので、標準のレイアウト機能にあるドラッグ＆ドロップで幅を調整する機能は効かなくなりますので、その点ご注意ください。

---