Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

12

Teilen

Herunterladen, um offline zu lesen

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

Herunterladen, um offline zu lesen

concrete5初心者勉強会用のスライド。
荒っぽい本当の初テーマの作り方です。

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

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

  1. 1. 作るだけなら怖くない! concrete5でテーマを作ってみよう! 田原遊馬(タハラユウマ) 株式会社クロスキューブ 取締役 / アートディレクター / デザイナー facebook.com/BuccaneerBoogie @90zbear ノンプログラマでもできる、5.7系テーマの作り方 2015.11.21 第4回 concrete5 東京初心者勉強会
  2. 2. 田原遊馬(たはらゆうま) 株式会社クロスキューブ 取締役 / アートディレクター / デザイナー facebook.com/BuccaneerBoogie @90zbear concrete5などのCMS案件を中心にお仕事してます。 concrete5 / WordPress / EC-CUBE / PHP / JavaScript / HTML / CSS / DTP & WEB Design and more!!
  3. 3. コンクリのテーマは、 作るだけなら簡単です。
  4. 4. Bootstrap3を使って テーマを作ってみよう!
  5. 5. Bootstrap3とは何ぞ
  6. 6. 超メジャーなCSSのフレームワーク
  7. 7. 5.7系のデフォルトテーマ Elementalでも ベースとして使われています。
  8. 8. 今回は、デフォルトテーマと同じように レイアウト機能が使えるテーマを作ります。
  9. 9. 本日はBootstrapやHTML/CSSの勉強会ではないため、 Bootstrapについては、 「手軽にテーマを作るならこれを覚えればいいのか!」 と、覚えて帰ってください。
  10. 10. Bootstrapのダウンロード http://getbootstrap.com/getting-started/#download
  11. 11. 基本となるテンプレートを用意 とてもシンプル。カスタムのベースにぴったり。
  12. 12. これで、Bootstrapを使った、 基本のHTML・CSS・JavaScriptができました。
  13. 13. 早速、concrete5、5.7系のテーマ化に挑戦!
  14. 14. 基本となるテンプレート一式をまとめる • hoge.html(さっき作った) • 「css」ディレクトリ • 「js」ディレクトリ • 「fonts」ディレクトリ
  15. 15. HTMLファイルの名前を 「default.php」に変更し、 1行目に「コンクリ以外のアクセスはダメ!ゼッタイ!」 という意味のおまじない を入れる。 <?php defined('C5_EXECUTE') or die("Access Denied."); ?>
  16. 16. page_theme.phpを用意 これがテーマの設定ファイルです。 今回は、初心者向け説明のため、 Elementalから拝借。 /concrete/themes/elemental/page_theme.php 最終的にはきちんと作りましょう!
  17. 17. page_theme.phpの編集 作るテーマフォルダ名に合わせて、書き換えます。 今回は「training」になるため、こんな感じ。 PHPの名前空間・クラス継承あたりを勉強すると理解できます が、今日はおまじないとして必要なことだと思ってください。
  18. 18. page_theme.phpの編集 テーマの名前、説明文の書き換えを適宜行います。 return t( Elemental )をreturn t( 練習テーマ ) return t( 長い英文 )をreturn t( 練習用ですよ! ) とすると、「練習用ですよ!」という説明文の「練習テーマ」になり ます。
  19. 19. 早速作りたてのテーマをインストール! インストール可能なテーマに追加されているので、 インストールしてしまいましょう!
  20. 20. とてもシンプルすぎる見た目になりました。 管理用のナビゲーションもいませんね。 おや、おかしい。
  21. 21. コンクリ用の必須ファイルの読み込み HTMLの をごっそり に置き換え。 BODY最下部のJSたちのBootstrap以外を に置き換え <meta keywords= > <meta description= > <title> <?php Loader::element('header_required'); ?> <?php Loader::element('footer_required'); ?>
  22. 22. しかし、相変わらずシンプルすぎる。 管理用ナビゲーションがついた
  23. 23. CSSやJSのパスを合わせるおまじない 読み込むCSSやJSまでのパスを テーマフォルダまでのパスを出力してくれるおまじないを使って 書き換え。 例:CSSが「テーマフォルダ/css/style.css」にいる場合 <?php echo $this->getThemePath(); ?> <link href="<?php echo $this->getThemePath(); ?>/css/bootstrap.min.css" rel="stylesheet">
  24. 24. 今度こそいい感じ!
  25. 25. 編集モードを試してみる え、サイトのナビゲーションが固定されたままだし、 よく見たらコンテンツもそのままの場所で動いてない・・・
  26. 26. 魔法のDIVで囲めばOK <body>の中、<script>以外のものををまとめて の中に入れてしまいましょう。 <div class="<?php echo $c->getPageWrapperClass()?> c5wrap > 中身 </div>
  27. 27. 正常にパネルが開きます あとは各種ブロックを設置するためのエリアの設定です。
  28. 28. ページ固有のエリアを設定したい いわゆるコンテンツ部分を以下と置き換えてしまいます。 同じ要領で、複数のエリアも、new Area('Main')をnew Area( エリアの名前')としてやれば可能です。 <?php $a = new Area('Main'); $a->display($c); ?>
  29. 29. ページ共通のエリアを設定したい ナビゲーションなど、共通して使うエリアの設定は以下 固有のエリア設定同様、複数設定できます。 <?php $a = new GlobalArea('Header Navigation'); $a->display(); ?>
  30. 30. エリアの設定をすれば、ブロックの配置が可能 これで基礎的なテーマは完成です。
  31. 31. 一番シンプルなテーマを作る方法 • HTML・CSS・JSなど通常の静的ページのデータを用意する。 • page_theme.phpを用意する。 • HTMLの冒頭におまじないを記述し、default.phpとする。 • コンクリ用のヘッダ・フッタを読み込ませるコードを入れる。 • おまじないを使って、CSSやJSのパスを合わせる。 • コンクリ用の魔法のDIVタグを入れる。 • 適宜エリアを設定する。 • いい感じにスクリーンショットを撮影し、360px*270pxの thumbnail.pngを作る。
  32. 32. よりいい感じにするには • 右サイドバーや、左サイドバーのテンプレートを作る。 • テンプレートで使い回すヘッダなどのパーツを分割する。 • Bootstrapを使いこなし、オリジナリティ れるデザインにする。 • コンクリ内蔵のlessコンパイラを使えるようにする。 • cssを部分的に管理画面から書き換えられるようにする。 • 勢い余ってブロックの作り方を覚える。 • さらに勢い余って、パッケージ化し、バージョン管理をする。 など・・・
  33. 33. 今回のものに少しだけ手を加えて配布しています。 https://github.com/90zbear/concrete5--training-theme どこよりも素のBootstrapに近いコンクリテーマです。
  34. 34. ご清聴ありがとうございました
  • GojiKawai1

    Nov. 2, 2016
  • dj_kazu

    Jan. 6, 2016
  • hossy000

    Nov. 29, 2015
  • makotoohmori

    Nov. 22, 2015
  • gojikawai

    Nov. 22, 2015
  • potaufeu

    Nov. 22, 2015
  • daisukekonishi750

    Nov. 22, 2015
  • goichim

    Nov. 22, 2015
  • kazukikucklu

    Nov. 21, 2015
  • 428design

    Nov. 21, 2015
  • fujiiyoshihiro

    Nov. 21, 2015
  • katz515

    Nov. 21, 2015

concrete5初心者勉強会用のスライド。 荒っぽい本当の初テーマの作り方です。

Aufrufe

Aufrufe insgesamt

2.118

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

300

Befehle

Downloads

8

Geteilt

0

Kommentare

0

Likes

12

×