concrete5 勉強会 20150117_テーマ作成

第１回多摩con活
テーマ作成
「concrete5 は PortlandLabs および、
コンクリートファイブジャパン株式会社の登録商標です」

基本的には公式ガイドブックの手順を踏襲します。
（４章オリジナルサイトのデザインを作る）
この他、日本語公式サイトに掲載されている
「テーマの仕組みとデザインの仕方」
http://concrete5-japan.org/help/design/
には、動画などを用いて、
テーマ作成手順などが掲載されています。
テーマ作成の流れ

concrete5の管理画面
->システムと設定
->キャッシュとスピード設定
と遷移し、 
キャッシュをオフにします。
テーマ作成の準備（1/4）

作業用ディレクトリを用意します。
generation
┣ css
┣ elements
┣ images
┗ js

作業用ディレクトリを用意します。
generation
┣ css
┣ elements
┣ images
┗ js
テーマ作成後、
concrete5の設置ディレクトリ直下にある
themesディレクトリ配下にコピーしますので、
この段階では、どこに作成しても大丈夫です。

テーマに必要なファイルを用意します。
cssとjsファイルを用意します。
今回は、公式ガイドブックのサンプルサイトデータを借用します。
generation
┣ css
┣ elements
┣ images
┣ is
┣ main.css
┗ main.js
https://github.com/concrete5japan/concrete5_japanese_book

管理画面で必要となるファイルを用意します。
generation
┣ css
┣ elements
┣ images
┣ is
┣ main.css
┣ main.js
┣ description.txt
┗ thumbnail.png

generation
┣ css
┣ elements
┣ images
┣ is
┣ main.css
┣ main.js
┣ description.txt
┗ thumbnail.png
description.txt
１行目：テーマ名
２行目：テーマの説明文
文字コードはUTF−8
改行はLF
で保存

generation
┣ css
┣ elements
┣ images
┣ is
┣ main.css
┣ main.js
┣ description.txt
┗ thumbnail.png
テーマ作成の準備（4/4） thumbnail.png
横120px
縦90px

テーマ作成はじめの一歩
対象とするサイトのデザインを確認

concrete5のテーマはページタイプが基本

ページタイプとは・・・
ページのレイアウト構造

ヘッダーエリア

メインエリア

フッターエリア

ヘッダーエリア

メインエリア

全部一緒

メインエリア
メインエリア
メインエリア
メインエリア
home.php default.php

ヘッダーエリアヘッダーエリアヘッダーエリアヘッダーエリア

共通部品

element(s)

テーマ作成共通部品（header.php）
部品となるheader.phpを元のhtmlから作ります。

index.html
header.php
先頭に
<?php deﬁned('C5_EXECUTE') or die("Access Denied."); ?>
を記述する。

index.html
header.php
<html>に
lang="<?php echo LANGUAGE?>”>
を追記する。

index.html
header.php
metaタグやtitleタグなど、head部の主要タグを削除し、
<?php Loader::element('header_required'); ?> 
を追記する。

index.html
header.php
スタイルシートの参照パスに
<?php echo $this->getThemePath(); ?>
を追記する。

index.html
header.php
元のhtmlが参照していた、外部スタイルシートファイルは、
作業ディレクトリ内に配置しておきます。

header.php
サイト名称やナビゲーション部分を書き換える。
共通部品なので、
<?php
$a = new GlobalArea('Site Name');
$a->display();
?>

テーマ作成共通部品（header.php）
部品の名称をheader.phpとして
elementsディレクトリに保存します。

テーマ作成共通部品（footer.php）
部品となるfooter.phpを元のhtmlから作ります。

footer.php
先頭に
を記述する。

footer.php
フッター部分を書き換える。
共通部品なので、
<?php
$a = new GlobalArea('Footer');
$a->display();
?>

footer.php
</body>の直前に
<?php Loader::element('footer_required'); ?>
を記述する。

テーマ作成共通部品（footer.php）
部品の名称をfooter.phpとして
elementsディレクトリに保存します。

テーマ作成テーマ本体（default.php）
default.phpとは、
ページタイプに一致するハンドルが見つからない
場合に使用される、標準テンプレート

default.php
先頭に
を記述する。

default.php
先ほど、作成した部品が呼び出されています。

default.php
メインエリアに成りそうな記述があります。
<?php
$a = new Area('Main');
$a->display($c);
?>

テーマ作成テーマ本体（home.php）
home.phpとは、
サイトのトップページで使われる、
専用のテンプレート

テーマ作成テーマ本体（home.php）
home.phpとは、
サイトのトップページで使われる、
専用のテンプレート
ただし、弊社のサイトでは、トップページも
下層ページと同じレイアウト構成の為、
default.phpをコピーして
ファイル名をhome.phpとしました。

テーマ作成テーマ本体（view.php）
view.phpとは、
サイト閲覧者に参照される事は原則なく、
ログイン画面、存在しないURLへのアクセス時に
適用されるテンプレートファイル

テーマ作成テーマのインストール
作成したテーマフォルダを
concrete5をインストールした直下の
themesフォルダに配置し、管理画面のテーマから
テーマのインストールを行う。

concrete5 勉強会 20150117_テーマ作成

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to concrete5 勉強会 20150117_テーマ作成

Similar to concrete5 勉強会 20150117_テーマ作成 (20)

More from Toshiaki Endo

More from Toshiaki Endo (7)

concrete5 勉強会 20150117_テーマ作成