WordPressでもconcrete5でもそうですが、テーマを作るぜ！という話をした時に尻込みしてしまう方が結構います。（特にデザイナーさんに多いような）
理由は、「プログラム言語を怖い。PHP怖い。」という答えが私の周りには多かったです。
安心してください。
concrete5はWordPressよりもテーマの作り方が簡単です。
最初はおまじないだと思っておいて後から少しずつ理解していけばOK。
デザイナーさんでも怖がることが無いように、最低限必要なファイルだけでサクッとテーマを作って行こうと思います。
Contents
最低限必要なファイルとは
以下の3ファイルだけです。
しかもdescription.txtとthumbnail.pngはただのテキストファイルと画像です。
デザイナーさんでもこれなら触れますね。
3のdefault.phpだけはプログラムですが、基本HTMLファイルですので気を楽にしてください。
1 description.txt
テーマの説明テキストファイル。
2 thumbnail.png
テーマの画面キャプチャ。360×270のPNG形式。
3 default.php
デフォルトのテーマファイル本体
たった3つでテーマができる！素敵concrete5！
それでは、順を追ってテーマを作っていきます。
前提：静的HTMLを作る
まずはconcrete5云々の前に、HTML+CSS+JS等を使って静的なサイトを作ります。
作ってない方で、テーマ学習をしたい方は適当なHTMLテンプレートをググッて探しておきましょう。
1: テーマを格納するフォルダを用意しよう
application/themes フォルダの中に、適当なフォルダを作りましょう。
例： application/themes/sample-theme
2: description.txtを作る
空のdescription.txtを作成した後、以下の2行を追加します。
1行目はテーマ名。2行目はテーマの説明です。
必ずUTF-8で保存しましょう。
description.txtの内容
テーマ名
このテーマの説明を書きます。
補足
concrete5 5.7以降は、page_theme.phpファイルを作って getThemeName() と getThemeDescription() というメソッドにテーマ名やテーマの説明を記述できるようになりました。
今回はできるだけ簡単に済ませたいので、上記の方法を採ります。
3: thumbnail.pngを作る
360px×270pxのPNG画像を作ります。テーマをひと目で認識できるようなキャプチャ画像が良いでしょう。
以下の画像を右クリックして保存頂いてもOKです。
4: HTMLファイルをdefault.phpにリネームする
前提として作ってあるHTMLファイルをリネームして「default.php」にします。
5: おまじないをHTMLファイルにおまじないを書く。
・default.phpの一行目
<?php defined(‘C5_EXECUTE’) or die(_(“Access Denied.”)); ?>
直接テーマファイルをコールさせないためのおまじないで、今後新たにテンプレートファイルを追加するときなどは必ず上記を書くようにしましょう。
・スタイルシートや画像の読み込みの部分
1 | <?php echo $this->getThemePath(); ?> |
各ファイルへのパスを出力してくれるおまじないです。以下のように記述します。
1 2 | <link href="<?php echo $this->getThemePath(); ?>/style.css" rel="stylesheet"> <img src="<?php echo $this->getThemePath(); ?>/images/common/logo.png" alt="logo"> |
・head開始タグ内
1 | <?php Loader::element('header_required'); ?> |
タイトル・文字セット等を自動的に出力してくれます。
なので、<title>タグ・<meta charset=”utf-8″>は削除してOKです。
・body終了タグの直前
1 | <?php Loader::element('footer_required'); ?> |
管理バーやJSの出力をしてくれます。
・body開始タグ直後、Loader::element(‘footer_required’)の直前
bodyの開始タグ直後と終了タグ直前に以下を記載します。
divの閉じタグはLoader::element(‘footer_required’)よりも下に記載します。
1 2 3 4 5 6 | <body> <div class="<?php echo $c->getPageWrapperClass()?>"> ・・・ </div> <?php Loader::element('footer_required'); ?> </body> |
この記述をすることで、concrete5が適切なCSSクラスを出力できるようになり、concrete5のインターフェースが正しく動作するようになります。
例えばconcrete5にはコンポーザーという機能が有りますが、上記を記述しておかないとコンポーザーが表示されない等の問題が発生します。
案外見落としがちなので要チェックです！
かくいう私もコンポーザーが動作しなくて、プログラムとずっとにらめっこしていた経験が有ります。
・エリアを指定する
concrete5はエリアにブロックを配置してサイトを作っています。
テーマファイルには難しいプログラムを書く必要は無く、エリアの場所だけを指定してあげます。
各ページのコンテンツを書くエリアを定義するために以下のコードを書きます。
1 2 3 4 | <?php $a = new Area('【エリアの名前】'); $a->display($c); ?> |
・グローバルエリアを指定する
ページ共通のグローバルエリアを設置するために以下のコードを書きます。
1 2 3 4 | <?php $a = new GlobalArea('【エリアの名前】'); $a->display(); ?> |
まとめ
テーマ作成、簡単でしたでしょうか？
ちょっと文章ばかりでは理解しづらい。という方、以下にテーマの作り方が動画と一緒に上がっていますので参考にしてください。
http://concrete5-japan.org/help/5-7/tutorials/theme-design-basic-seminar/
また、テーマ制作で陥りやすい落とし穴というページも参考になります。
蛇足
先日のコンなご（concrete5名古屋ユーザーグループ）でKatzさんがconcrete5のコーディングガイドラインを紹介していました。
このコーディングガイドラインには、concrete5におけるコーディングで●●をしてはいけない。といったの禁止事項なども書かれています。
ぜひ参考にしてみてくださいね。
https://github.com/katzueno/concrete5-Coding-Guideline/tree/japanese
あと、このツイートで紹介してくれている仕様書テンプレートも参考になりましたので紹介します。
#concrete5 仕様書テンプレートhttps://t.co/lfjlYjcJxN (for 名古屋勉強会) 明日までにで詳細の説明を書いたスライドを別途上げます。
— Katz Ueno 🇯🇵 (@katzueno) February 20, 2016
concrete5_仕様書テンプレート_一般公開
https://drive.google.com/folderview?id=0BzWUde-u-vKvbDhGSUY3TDliak0&usp=drive_web#list
