HTMLテンプレートをconcrete5テーマに変換する

このページは、下記の動画の解説をもとにしています。動画は英語です（日本語字幕をつけるか日本語で採録するかは検討中です）。

要約

まず最初に、管理画面からすべてのキャッシュをオフにしてください。

お好きなHTMLテンプレートを探してください - または、自分で作っても構いません。

テーマのためのディレクトリを ドキュメントルート/application/themes/ に作成してください。（追記：テーマのディレクトリ名は半角英小文字か数字のみを使用してください。大文字を使用するとエラーになります。）

テーマのディレクトリ (例. ドキュメントルート/application/themes/urbanic/)に thumbnail.png ファイル (120x90) を作成してください。管理画面で表示されるテーマのサムネイル画像です。次に、description.txt ファイルを作成してください。最初の行にテーマの名前を、次の行に説明を書きます。

［管理画面 > ページとテーマ > テーマ］にアクセスすると、いま作成したテーマがインストール待ちで表示されています。

テーマをインストールしましょう。まずページテンプレートを作成する必要があります。

管理画面のテーマのページから、作成したテーマを有効化します。そして、別ウィンドウでサイトにアクセスしてみてください。何も表示されませんね。これは、まだ何のテンプレートも作成していないからです。

すべてのテーマで必須となるテンプレートファイルは default.php です。このテンプレートファイルは、管理画面から設定されたページテンプレートのハンドルと名前が一致するファイルがない場合に使われるものです。HTMLファイルを作成しているテーマのディレクトリ内にコピーし、名前をdefault.phpに変更して、何が起こるか見てみましょう。

サイトを再読み込みしてみましょう。HTMLと同じコンテンツが表示されるようになりましたが、画像やCSSは読み込まれていません。これは、まだそれらを読み込んでいないからです。

すべてのJavascript、CSS、フォント、画像をテーマのディレクトリにコピーしてください。そして、それらを正しく読み込むように default.php を修正してみましょう。

例えば

src="js/file.js"

は

src="<?php echo $view->getThemePath()?>/js/file.js"

のように変更します。

次に、ページのヘッダーとフッターに必須のPHPコードを追加します。

こちらを

<?php Loader::element('header_required')?>

headタグ内に追加します（そして、titleやmetaタグはconcrete5自身がこの位置に出力するので、headタグ内から削除してください）。

こちらを

<?php Loader::element('footer_required')?>

bodyの閉じタグの直前に追加します。

ページを再読み込みしてみましょう。concrete5のツールバーが表示されるようになりましたね。

次に、ページ全体を囲むdivタグを追加します。これは、concrete5の編集モードで正しくパネルが開閉するために必要になります。

ページのコンテンツを囲むようにdivタグを追加してください（bodyの開始タグとfooter_requiredの間に入れるのが良いでしょう）。divのclassには次のPHPコードを挿入します。

<div class="<?php echo $c->getPageWrapperClass()?>">

その他に、テーマに使用するHTMLで使用しているCSSが、concrete5のインターフェースとコンフリクトする場合がありますので、その際はCSSを修正する必要があります。

では、次にエリアを設定して行きましょう。

default.phpのなかから編集可能にしたいコンテンツを削除し、代わりに以下のPHPコードを挿入します。 

<?php
    $a = new Area('Area Name');
    $a->display($c);
?>

これだけで、コードを挿入した領域に、編集モードでブロックが追加可能になります。エリア名は通常英語でしていします。MainやSidebarなど、よく使われる名前についてはデフォルトでインストールされているElementalテーマを参考にしてください。

原文：Converting an HTML Template to a Concrete5 Theme