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

concrete5 テーマの作り方の超基礎を、動画を使って紹介します。2015年8月に収録した Ustream 勉強会 concrete5.7 でのテーマ作成方法の動画です。

※ concrete5.6.x 以前のクイックリファレンスはこちらをご覧ください

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

動画中で紹介した資料へのダウンロード & リンク

■ テーマ作成ワークショップサンプルデータ
https://github.com/concrete5japan/c57_ustream_theme_workshop

■ テーマスニペット集
http://ja.katzueno.com/2015/08/3492/

上記の講座は 5.7.5 を基本に作成されました。内容は 2015年9月時点のものです。

ファイル保存場所

concrete5.7 の場合

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

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

＊マーケットプレイスのテーマを変更する場合は【concrete5ディレクトリー】/packages/【パッケージハンドル】/themes/【テーマディレクトリー】/ 以下にファイルが保存されています。

※ ディレクトリ名は、半角英小文字数字のみが使用できます。(全角文字、英大文字、ハイフン (-) は使わないようにしてください)

構成ファイル一覧

description.txt
- 必須 (page_theme.php で宣言していれば不要)
- 管理画面用、テーマの説明テキストファイル
- UTF-8文字エンコーディングである必要（Windownsユーザーさん注意）
thumbnail.png
- 必須
- 管理画面用、テーマの縮小画面
- 360x270 のPNG形式
default.php
- 必須
- デフォルトのテーマファイル本体
view.php
- 必須
- シングルページ用テーマファイル本体
- 404やログインページのデザインをカスタマイズしたい場合は作成が必要
page_theme.php

オプション (ほぼ必須)
テーマのカスタマイズ関連の情報を格納した PHP ファイル

CSS ファイル
- テーマに使われれる CSS ファイルの一覧
- 多くは main.css などと名付けて作成
- CSS
画像ファイル

テーマに埋め込む画像などを /images/ などのフォルダを作成して格納。

【ページテンプレートハンドル】.php（※ オプション）
- 特定ページテンプレート専用のテーマファイル

PHPコード一覧

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

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

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

1. セキュリティー対策用 PHP

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

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

2. テーマパスを追加

<?php echo $this->getThemePath(); ?>

このコードが、テーマファイルのパスを出力します。テーマファイルに直接 CSS ファイルや JS ファイル、画像ファイルの URL を埋め込む場合、テーマフォルダ内にそれらのファイルを格納します。上記コードを使わず、絶対パスを入れてもいいのですが、このコードを入れると、URLを移動した時も書き換えが必要ありません。

CSS ファイルや JS ファイルの指定に使ってください。

2. headタグ

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

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

4a. エリアを指定する PHP

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

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

4b. グローバルエリアを指定する PHP

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

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

5. フッター

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

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

6. view.php のメインエリア

<?php
Loader::element('system_errors', array('format' => 'block', 'error' => $error, 'success' => $success, 'message' => $message));
print $innerContent;
?>

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

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

7. page_theme.php

<?php
namespace Application\Theme\【テーマハンドル】;
class PageTheme extends \Concrete\Core\Page\Theme\Theme {
設定を入れる
}

concrete5.7.x 以降はオプションなファイルです。5.6.x 以下は設置しないでください。また下記機能が必要なければ設置不要です。

テーマハンドルは、半角英数字のテーマのハンドルで、最初の文字は大文字である必要があります。（例：テーマのフォルダ名が「elemental」の場合「namespace Concrete\Theme\Elemental;」となります。)

下記の設定などを指定します。

特定の CSS や JS を読み込ませる設定 (テーマに直接書き込むのではなく、page_theme.php を解すことで重複の読み込みを防ぎます)
テーマが使用している CSS フレームワーク (Bootstrap3 か Foundation) の指定。(レイアウト機能で使用するため。)
ブロックのデザインで使用できるプリセット CSS クラスの設定
エリアのデザインで使用できるプリセット CSS クラスの設定
ブロックでデフォルトで使用するテンプレートの設定
レスポンシブ用に画像のリサイズを行う際のサイズの種類の登録
テーマエディタでカスタマイズする際に設定できるクラスの指定

参考ブログ記事：Elemental の page_theme.php

日本ユーザーグループメンバーの acliss さんが書かれた解説記事です。

オンライン勉強会第5シーズン (2017年)

2017年、バージョン 8 に対応したオンライン勉強会の録画一覧です。現在、毎週木曜日に順次生放送＆収録中です。 YouTube のプレイリストはこちら

Ustream 勉強会第4シーズン (2015年)

2015年、バージョン 5.7.4.x に対応した Ustream 勉強会の録画一覧です。この動画を見れば、大幅アップグレードした cocnrete5 を使えるようになります！YouTube のプレイリストはこちら。

Ustream 勉強会第3シーズン (2014年)

2014年、バージョン 5.6.3 に対応した Ustream 勉強会の録画一覧です。この動画を見れば concrete5 を使えるようになります。YouTube のプレイリストはこちら。

Ustream 勉強会第2シーズン (2012年)

2012年に行ったUstream 勉強会の録画一覧です。最新バージョン 5.5.x のインターフェースにサポートしています。

第0回：テーマの作り方・超基礎編 (OSC 2010 Kansai@Kyoto セミナー)
第1回：入門 & インストール
第2回：基本ブロックと基本操作
第3回：ページタイプ・スタック・グローバルエリア

Ustream 勉強会第1シーズン (2010年)

2010年8月〜11月にかけて5回行った、Ustream生勉強会の録画一覧です。concret5.4.x 以前の古いインターフェースで作成しています。