このコンテンツをご覧になるには、Adobe Flash Playerをインストールする必要があります

テーマの作り方 & クイックリファレンス

concrete5 テーマの作り方の超基礎を、動画を使って紹介します。これは 2010/7/9 に京都で開催された、オープンソースカンファレンス 2010 Kansai @ Kyoto での30分セミナーをそのまま載せたものです。

concrete5 オリジナルテーマ作成で知らなきゃいけないのは、HTML+CSSと、簡単なルールだけ。最小構成で concrete5 オリジナルテーマを作るためのクイックリファレンスです。テーマ作成を詳しく知りたい方はテーマのつくり方を御覧ください。

この講座は 5.4.0.5 を基本に作成されました。内容は、2010年7月現在のものです。5.4.2.1 でも基本構造は変わりません。

ファイル保存場所

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

＊ /concrete/themes/ ディレクトリー以下のテーマファイルは絶対に変更しないでください。詳しくはテーマのつくり方を御覧ください。

動画で紹介したコードの一覧です。

＊サンプルコードを読みやすくするために色を変えていますが、.phpファイルは普通のテキストファイルです。

＊日本語は使用される場合は、特に、文字エンコーディングが「UTF-8」であることを確認してください。

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>

concrete5で使われるテーマ用PHPテキストファイル全ての一番最初に記述

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

ここで、画面上部のツールバーや、ページタイトルなどの情報を読み込みます。

<?php
$a = new Area('【エリアの名前】');
$a->display($c);
?>

【エリアの名前】の部分を半角英数字のエリアの名前に変更して配置してください。「Main」「Header Nav」「Header」「Sidebar」をなるべく使うようにしてください。

グローバルエリア。サイト内で全て共通するコンテンツ、ロゴや、ヘッダー、フッターで使用する用。※グローバルエリアはバージョン5.5から追加された機能です。

<?php
$a = new GlobalArea('【エリアの名前】');
$a->display();
?>

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

管理画面 - サイト全体の設定中にある「アクセス解析」コードをこのコードの部分で出力します。

<?php
print $innerContent;
?>

default.php で「Main（メイン）」エリアに該当する部分にこれを入れてください。あとは default.php と同じようにデザインしてください。

このファイルに適用させるためには「シングルページのデザイン&カスタマイズ方法」に掲載された、「/config/site_theme_paths.php」の内容を変更する必要があります。

2010年8月〜11月にかけて5回行った、Ustream生勉強会の録画一覧です。