【concrete5-5.7】Bootstrapを使ってテンプレート制作（はまった事編） | Webクリエイターな備忘録

最近、私の地域（広島市）で話題になっているconcrete5を使ってみたので個人的な備忘録として掲載します。
concrete5は、かなり前に一度、メインCMSの選定の時に使ってみたことがあるくらいで、詳しくは知らない状態です。

今回は、新ヴァージョンの5.7とBootstrapを使用してテーマ等を作ってみたいと思います。

テーマの制作の準備

まずはconcrete5の公式サイトを参考に5.7のテーマを制作してみたいと思います。
公式サイトによると、下記構成ファイルを作り所定の場所に設置するとテーマファイルとして認識してくれるようです。

【構成ファイル一覧】
・description.txt（必須）
    管理画面用、テーマの説明テキストファイル
    UTF-8文字エンコーディングである必要
・thumbnail.png（必須）
    管理画面用、テーマの縮小画面
    120x90 のPNG形式
・default.php（必須）
    デフォルトのテーマファイル本体
・view.php（オプション）
    シングルページ用テーマファイル本体
    404やログインページのデザインをカスタマイズしたい場合は作成が必要
・page_theme.php（オプション (5.7のみ)）
    テーマのカスタマイズ関連の情報を格納した PHP ファイル
・CSS ファイル
    テーマに使われれる CSS ファイルの一覧
・画像ファイル
    テーマに埋め込む画像などを /images/ などのフォルダを作成して格納
・【ページタイプハンドル】.php（※ オプション）
    特定ページタイプ専用のテーマファイル

今回のテーマは、Bootstrapを使用して作成したいので、デフォルトでconcrete5の中に入っている「elemental」テーマを参考にさせもらいます。
また、トップページには、スライドショーを設置したいのでトップページのみ専用のテーマファイルを作成したいと思います。

で、できたのが下記構成ファイルの一覧です。

【構成ファイル一覧】

・description.txt
・thumbnail.png
・default.php
・view.php
・page_theme.php
・home.php
・cssフォルダ-main.css
	     -bootstrapフォルダ-bootstrap.css
	     -bootstrap-theme.css
・jsフォルダ-bootstrap.js
	    -jquery-1.11.1.min.js
	    -setting.js
・fontsフォルダ（Bootstrap）
・imagesフォルダ
・elementsフォルダ-header.php
		  -footer.php

上記を一つのフォルダに入れて、所定の場所

【concrete5ディレクトリー】/application/theme/【任意の半角英数字ディレクトリー】/

にアップロードすると管理画面から認識させることができます。

また以下の点に注意が必要です。
【注意点】
※ /concrete/themes/ ディレクトリー以下のテーマファイルは絶対に変更しない。
※ ディレクトリ名は、半角英数字のみが使用できます。(ハイフン (-) は使わない)

Bootstrapでテーマ制作

今回はテーマにBootstrap3を使用したいと思いますので下記サイトを参考にさせて頂き、テーマを制作していきます。

【参照URL】
・エリアでグリッドレイアウトを有効にする
・concrete5 5.7.0 Beta1に対応したテーマを作ってみた

まずは、page_theme.php ファイルを作成し、次のコードを記述します（【テーマのフォルダ名】 の部分はテーマによって異なります）。

【記述コード】

＜?php
namespace Application\Theme\【テーマのフォルダ名】;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme {
}

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

【記述コード】

protected $pThemeGridFrameworkHandle = 'bootstrap3';

注意しないといけないのは、Bootstrap3をテーマで使用する場合、Ver5.7ではコアでBootstrapを使用している為、テーマ内にBootstrapの記述をすると競合が発生しイロイロと不具合が発生するようです。
これを回避する為に、上記のコードに以下を追記します。

【参照URL】
・コアのJavascriptやCSSをテーマから上書きする

【記述コード】

public function registerAssets() {
	$this->providesAsset('javascript', 'bootstrap/*');
	$this->providesAsset('css', 'bootstrap/*');
}

上記の記述で、コア内のBootstrapのjsファイル及び、cssファイルを読込まないようになるので、テーマ内に各Bootstrap関連のjsやcssファイルの読込み記述を追記すると、正常動作するようです。

出来たファイルがこちら
【完成コード（page_theme.php）】

次回は…

今回は長くなりましたので、このへんで…
次回は、Bootstrapのドロップメニューを実装した事を備忘録として残したいと思います。