2015.11.21第4回concrete5初心者勉強会「作るだけなら怖くない！concrete5でテーマを作ってみよう！」

作るだけなら怖くない！
concrete5でテーマを作ってみよう！
田原遊馬（タハラユウマ）
株式会社クロスキューブ取締役 / アートディレクター / デザイナー
facebook.com/BuccaneerBoogie
@90zbear
ノンプログラマでもできる、5.7系テーマの作り方
2015.11.21 第4回 concrete5 東京初心者勉強会

田原遊馬（たはらゆうま）
株式会社クロスキューブ取締役 / アートディレクター / デザイナー
facebook.com/BuccaneerBoogie
@90zbear
concrete5などのCMS案件を中心にお仕事してます。
concrete5 / WordPress / EC-CUBE / PHP / JavaScript / HTML / CSS /
DTP & WEB Design and more!!

コンクリのテーマは、
作るだけなら簡単です。

Bootstrap3を使って
テーマを作ってみよう！

超メジャーなCSSのフレームワーク

5.7系のデフォルトテーマ
Elementalでも
ベースとして使われています。

今回は、デフォルトテーマと同じように
レイアウト機能が使えるテーマを作ります。

本日はBootstrapやHTML/CSSの勉強会ではないため、
Bootstrapについては、
「手軽にテーマを作るならこれを覚えればいいのか！」
と、覚えて帰ってください。

Bootstrapのダウンロード
http://getbootstrap.com/getting-started/#download

基本となるテンプレートを用意
とてもシンプル。カスタムのベースにぴったり。

これで、Bootstrapを使った、
基本のHTML・CSS・JavaScriptができました。

早速、concrete5、5.7系のテーマ化に挑戦！

基本となるテンプレート一式をまとめる
• hoge.html（さっき作った）
• 「css」ディレクトリ
• 「js」ディレクトリ
• 「fonts」ディレクトリ

HTMLファイルの名前を
「default.php」に変更し、
１行目に「コンクリ以外のアクセスはダメ！ゼッタイ！」
という意味のおまじない
を入れる。
<?php
deﬁned('C5_EXECUTE') or die("Access Denied.");
?>

page_theme.phpを用意
これがテーマの設定ファイルです。
今回は、初心者向け説明のため、
Elementalから拝借。
/concrete/themes/elemental/page_theme.php
最終的にはきちんと作りましょう！

page_theme.phpの編集
作るテーマフォルダ名に合わせて、書き換えます。
今回は「training」になるため、こんな感じ。
PHPの名前空間・クラス継承あたりを勉強すると理解できます
が、今日はおまじないとして必要なことだと思ってください。

page_theme.phpの編集
テーマの名前、説明文の書き換えを適宜行います。
return t( Elemental )をreturn t( 練習テーマ )
return t( 長い英文 )をreturn t( 練習用ですよ！ )
とすると、「練習用ですよ！」という説明文の「練習テーマ」になり
ます。

早速作りたてのテーマをインストール！
インストール可能なテーマに追加されているので、
インストールしてしまいましょう！

とてもシンプルすぎる見た目になりました。
管理用のナビゲーションもいませんね。
おや、おかしい。

コンクリ用の必須ファイルの読み込み
HTMLの
をごっそり
に置き換え。
BODY最下部のJSたちのBootstrap以外を
に置き換え
<meta keywords= >
<meta description= >
<title>
<?php Loader::element('header_required'); ?>
<?php Loader::element('footer_required'); ?>

しかし、相変わらずシンプルすぎる。
管理用ナビゲーションがついた

CSSやJSのパスを合わせるおまじない
読み込むCSSやJSまでのパスを
テーマフォルダまでのパスを出力してくれるおまじないを使って
書き換え。
例：CSSが「テーマフォルダ/css/style.css」にいる場合
<?php echo $this->getThemePath(); ?>
<link href="<?php echo $this->getThemePath(); ?>/css/bootstrap.min.css" rel="stylesheet">

編集モードを試してみる
え、サイトのナビゲーションが固定されたままだし、
よく見たらコンテンツもそのままの場所で動いてない・・・

魔法のDIVで囲めばOK
<body>の中、<script>以外のものををまとめて
の中に入れてしまいましょう。
<div class="<?php echo $c->getPageWrapperClass()?> c5wrap >
中身
</div>

正常にパネルが開きます
あとは各種ブロックを設置するためのエリアの設定です。

ページ固有のエリアを設定したい
いわゆるコンテンツ部分を以下と置き換えてしまいます。
同じ要領で、複数のエリアも、new Area('Main')をnew
Area( エリアの名前')としてやれば可能です。
<?php
$a = new Area('Main');
$a->display($c);
?>

ページ共通のエリアを設定したい
ナビゲーションなど、共通して使うエリアの設定は以下
固有のエリア設定同様、複数設定できます。
<?php
$a = new GlobalArea('Header Navigation');
$a->display();
?>

エリアの設定をすれば、ブロックの配置が可能
これで基礎的なテーマは完成です。

一番シンプルなテーマを作る方法
• HTML・CSS・JSなど通常の静的ページのデータを用意する。
• page_theme.phpを用意する。
• HTMLの冒頭におまじないを記述し、default.phpとする。
• コンクリ用のヘッダ・フッタを読み込ませるコードを入れる。
• おまじないを使って、CSSやJSのパスを合わせる。
• コンクリ用の魔法のDIVタグを入れる。
• 適宜エリアを設定する。
• いい感じにスクリーンショットを撮影し、360px*270pxの
thumbnail.pngを作る。

よりいい感じにするには
• 右サイドバーや、左サイドバーのテンプレートを作る。
• テンプレートで使い回すヘッダなどのパーツを分割する。
• Bootstrapを使いこなし、オリジナリティれるデザインにする。
• コンクリ内蔵のlessコンパイラを使えるようにする。
• cssを部分的に管理画面から書き換えられるようにする。
• 勢い余ってブロックの作り方を覚える。
• さらに勢い余って、パッケージ化し、バージョン管理をする。
など・・・

今回のものに少しだけ手を加えて配布しています。
https://github.com/90zbear/concrete5--training-theme
どこよりも素のBootstrapに近いコンクリテーマです。

ご清聴ありがとうございました

2015.11.21第4回concrete5初心者勉強会「作るだけなら怖くない！concrete5でテーマを作ってみよう！」

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (8)

Semelhante a 2015.11.21第4回concrete5初心者勉強会「作るだけなら怖くない！concrete5でテーマを作ってみよう！」

Semelhante a 2015.11.21第4回concrete5初心者勉強会「作るだけなら怖くない！concrete5でテーマを作ってみよう！」 (20)

Último

Último (8)

2015.11.21第4回concrete5初心者勉強会「作るだけなら怖くない！concrete5でテーマを作ってみよう！」