Download as PDF, PPTX
Uploaded byYuma Tahara
concrete5バージョン8リリースパーティ「テーマを作ろう」
2016.4.23 concrete5バージョン8リリースパーティでの、「テーマを作ろう」 発表スライド
concrete5バージョン8リリースパーティ「テーマを作ろう」
- 1. 作るだけなら怖くない！ concrete5でテーマを作ってみよう！ 田原遊馬（タハラユウマ） 株式会社クロスキューブ 取締役 /アートディレクター / デザイナー facebook.com/BuccaneerBoogie @90zbear ノンプログラマでもできる気がする！すごく荒っぽいテーマの作り方 2016.4.23 concrete5 バージョン8リリースパーティ（東京）
- 2. 田原遊馬（たはらゆうま） 株式会社クロスキューブ 取締役 /アートディレクター / デザイナー facebook.com/BuccaneerBoogie @90zbear concrete5などのCMS案件を中心にお仕事してます。 concrete5 / WordPress / EC-CUBE / PHP / JavaScript / HTML / CSS / DTP & WEB Design and more!!
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. 基本となるテンプレート一式をまとめる • hoge.html（さっき作った） • 「css」ディレクトリ •「js」ディレクトリ • 「fonts」ディレクトリ
- 19.
- 20.
- 21.
- 22. page_theme.phpの編集 テーマの名前、説明文の書き換えを適宜行います。 return t( Elemental)をreturn t( 練習テーマ ) return t( 長い英文 )をreturn t( 練習用ですよ！ ) とすると、「練習用ですよ！」という説明文の「練習テーマ」になり ます。
- 23.
- 24.
- 25. コンクリ用の必須ファイルの読み込み HTMLの をごっそり に置き換え。 BODY最下部のJSたちのBootstrap以外を に置き換え <meta keywords= > <metadescription= > <title> <?php Loader::element('header_required'); ?> <?php Loader::element('footer_required'); ?>
- 26.
- 27. CSSやJSのパスを合わせるおまじない 読み込むCSSやJSまでのパスを テーマフォルダまでのパスを出力してくれるおまじないを使って 書き換え。 例：CSSが「テーマフォルダ/css/style.css」にいる場合 <?php echo $this->getThemePath();?> <link href="<?php echo $this->getThemePath(); ?>/css/bootstrap.min.css" rel="stylesheet">
- 28.
- 29.
- 30. 魔法のDIVで囲めばOK <body>の中、<script>以外のものををまとめて の中に入れてしまいましょう。 <div class="<?php echo$c->getPageWrapperClass()?> c5wrap > 中身 </div>
- 31.
- 32. ページ固有のエリアを設定したい いわゆるコンテンツ部分を以下と置き換えてしまいます。 同じ要領で、複数のエリアも、new Area('Main')をnew Area( エリアの名前')としてやれば可能です。 <?php $a= new Area('Main'); $a->display($c); ?>
- 33. ページ共通のエリアを設定したい ナビゲーションなど、共通して使うエリアの設定は以下 固有のエリア設定同様、複数設定できます。 <?php $a = newGlobalArea('Header Navigation'); $a->display(); ?>
- 34.
- 35. 一番シンプルなテーマを作る方法 • HTML・CSS・JSなど通常の静的ページのデータを用意する。 • page_theme.phpを用意する。 •HTMLの冒頭におまじないを記述し、default.phpとする。 • コンクリ用のヘッダ・フッタを読み込ませるコードを入れる。 • おまじないを使って、CSSやJSのパスを合わせる。 • コンクリ用の魔法のDIVタグを入れる。 • 適宜エリアを設定する。 • いい感じにスクリーンショットを撮影し、360px*270pxの thumbnail.pngを作る。
- 36. よりいい感じにするには • 右サイドバーや、左サイドバーのテンプレートを作る。 • テンプレートで使い回すヘッダなどのパーツを分割する。 •Bootstrapを使いこなし、オリジナリティ れるデザインにする。 • コンクリ内蔵のlessコンパイラを使えるようにする。 • cssを部分的に管理画面から書き換えられるようにする。 • 勢い余ってブロックの作り方を覚える。 • さらに勢い余って、パッケージ化し、バージョン管理をする。 など・・・
- 37.
- 38.
- 39.