concrete5のテーマ作成に挑戦してみた(チュートリアルを見ながら)


※最初、この記事のタイトルを「concrete5のテーマ作成に挑戦してみた(チュートリアル)」としていましたが、この記事自体はチュートリアルではありませんので、誤解を生まないためにタイトルを変更しました。
先日の土曜日、最近話題のconcrete5の勉強会に参加して来ました。
正確には、「EC-CUBE & concrete5 合同勉強会」ということで、なかなかおもしろい話が聞けました。
・・・今回、そのレポートってわけじゃありません。残念ながら。悪しからず。
今後のことも考えて、concrete5でもサイト制作の仕方も身につけておいたほうがいいかなと思い、知り合いからのお誘いもあり参加してきました。

そういうキッカケがあって、ようやくconcrete5でのテーマ作成にチャレンジしてみることに。
今回は、concrete5Japan公式サイトで紹介されているチュートリアル(concrete5 オリジナルテーマのつくり方)を見ながら、ひとまずチュートリアル通りのテーマを作ってみたので、そこで自分が理解した内容をここに書いてみよう思います。
なお、作り方はチュートリアルサイトを御覧ください。ここはあくまでも、「私が理解した内容を書いてあるだけ」です。
また、触り始めてまだ数時間程度なので理解不足や間違ってる部分があるかもしれませんが、その場合はご指摘いただければ幸いです。

(1) 既存テンプレートを分解する

まず、上記チュートリアルのページで紹介されているHTMLテンプレートをダウンロードします。
これを、「ヘッダ」「コンテンツ部分」「フッタ」に分解し、UTF-8エンコーディングで保存します。分解したあとのファイル拡張子は.phpで。
それぞれファイル名は

ヘッダ:header.php
コンテンツ部分:default.php
フッタ:footer.php
となり、ブログの個別ページ(WordPressでいうsingle.php)はview.phpです。
その他:view.php(システムが吐き出すページ、たとえばエラーページなどの出力用です)

PHP部分は、この4つが必須ファイル。このへんは、WordPressと似ていますね。
ただし、header.phpfooter.phpは「elementsディレクトリ」に入れるのが基本のようです(必須ではない)。
画像は「imagesディレクトリ」に入れておきましょう。

(2) 分解したファイルにPHPを埋め込む

まだ分解してPHPファイルにしただけで、中身はHTMLファイルのままですので、PHPスクリプトを書いていきます。
記述するPHPスクリプトはチュートリアルサイトを見ていただくとして、私が気になったところが1つあるので書いておきます。

各エリアに
$a = new Area('*******');
$a->display($c);
って記述があるけど、この2行目はなんぞや? という…。
いやまあ、1行目で指定したものを表示するためのおまじないなのはパッと見でわかるけど、WordPressだとこういうのは1行目みたいな記述だけでできるよなぁ、と思ったので。ここら辺は、それぞれのCMSの違いによるものですね。

(3) 完成したテーマをthemesディレクトリへ

・elements ディレクトリ(中身:header.php、footer.php)
・images(テーマ内で使用する画像)
・default.php(メインコンテンツ表示部分)
・description.txt(管理画面のテーマ選択の説明で表示されるコメント)
・main.css(テーマ用のCSS)
・typography.css(記事を書くときのTinyMCE用CSS / 配布されてる完成版からコピペしました)
・thumbnail.png(管理画面のテーマ選択で表示されるサムネイル)
・view.php(個別記事用のPHP)(システムが吐き出すページ(404とか)用のPHP)

以上が用意できたら、サーバにアップロードします。
アップロード先はconcrete5をインストールしたルートにある「themes」ディレクトリ。
チュートリアルサイトでは説明が省かれていたのだけれど、「typography.css」を入れずにウェブサイトを表示させると、リンクの色がブラウザのデフォルトになっていました。
TityMCE用ということだけど、デザインのちょっとしたところにも影響してくる模様?

(4) メニュー部分を設定

実は今回ここがわりと気になったのですが、メニューブロックでは各ページにメニューを設定する必要があるようです。
WordPressのカスタムメニューは、1回設定すれば各ページに同じグローバルナビが表示されるのでその感覚でいたのですが、各ページでそれぞれ「オートナビ」を設定する必要があるみたい。
これ、1回でできるものじゃないのかな?

【上記設定については、下記のように解決出来ました】
チュートリアルサイトでは
$a = new Area('Header Nav');
$a->display($c);

となっていた部分を、
$a = new GlobalArea('Header Nav');
$a->display($c);

に変更。
2つの違いは、「サイト全体で共通かどうか」のようです。
全体で共通の場合は、new GlobalArea('hoge');
になるわけですね。
なお、GlobalAreaは、concrete5 5.5から追加された機能のようです。
詳しくは簡単なテーマの作り方・クイックリファレンス(動画付き)参照。
※しかし、これで万事解決かと思ったら新たな謎が。詳しくは(6)で。
↑解決することができたので、(6)の下の方に緑色で解決方法を明記します。

(5) まとめ

concrete5のテーマ作成って、チュートリアルで作ったようなごくごく基本的でシンプルなものであれば、WordPressのテーマを作るよりも簡単かもしれない、と思いました。
今回はここまで。

(6) concrete5の挙動で気になったところ(追加)

新しくブログ記事を追加すると、そのページ(個別記事)ではオートナビを使用したナビゲーションが表示されません(ページを追加した場合は問題なく表示されます)。
しかしなぜか、view.phpの同じ場所に同じPHPスクリプトを入れると、個別記事でナビゲーションが表示されるようになります。
concrete5に深く関わってる人曰く、「それはおかしい。謎…」とのことで、謎です。。。


【解決しました】(04/16/2013)
ブログ記事のページにもメニューを表示させたい場合は、concrete5の管理画面から「ページタイプ」を選び、名前の項目に「ブログ記事」と書かれている部分の「デフォルト」ボタンをクリックします。
するとブログページの画面になるので、編集モードで「オートナビ」ブロックを追加します。これで、次のブログ更新から指定の場所にメニューが表示されるようになりました。
記事編集画面の”This is my first blog post.”という文字を消したいときも、同じ要領で該当箇所からテキストだけ削除すればOK。
WordPressに慣れていて、concrete5の仕組みを理解していないとハマってしまうモノのようです。


今回、Takuro Hishikawaさんに、こういった初歩的な部分をご指導いただきました。ありがとうございました。

WordPressはテーマ側で挙動を全てコントロールしますがconcrete5はページごとに設定できる。これが大きな違いですね。

師匠、覚えておきます!


  • http://twitter.com/tao_s 佐々木 多生

    “ブログの個別ページ(WordPressでいうsingle.php)はview.phpです。”
    は違いますよー。エラーページとかログインページ用のテンプレートですよー

    • mokeco

      あ、そうでした。消し忘れてました。ご指摘ありがとうございます!

  • mokeco

    すみませんコメントに気づきませんでした…。
    アドバイスありがとうございます。そうですね、「グローバルエリア」だと1回の作業で簡単にナビゲーションを置けました。