concrete5 5.7でテーマ作ってみよう 超初級編

4,091 views

Published on

Bootstrapのテーマを使ってconcrete5 5.7でテーマの作り方が学べます 。

〇2015.7.17更新。コンポーザーが使えるようにPageWrapperClassを追加。
〇2015.11.12更新。テーマの設定description.txtを削除し、page_theme.phpにテーマのタイトルと説明を追加。concrete5.7.5.2で検証済み

Published in: Engineering

concrete5 5.7でテーマ作ってみよう 超初級編

  1. 1. 広島でコンクリ Vol.6 1
  2. 2. 広島でコンクリ Vol.6 2
  3. 3. • • • • • • • • • 広島でコンクリ Vol.6 3
  4. 4. upload_max_filesize = 20M post_max_size = 20M memory_limit = 96M safe_mode=Off cgi.fix_pathinfo = 1 date.timezone = Asia/Tokyo 広島でコンクリ Vol.6 4
  5. 5. ルートディレクトリ/themes 広島でコンクリ Vol.6 5
  6. 6. ルートディレクトリ/application/themes 広島でコンクリ Vol.6 6
  7. 7. description.txt default.php header.php footer.phpthumnail.png 広島でコンクリ Vol.6 7
  8. 8. description.txt thumnail.png default.php header.php footer.php Page_theme. php 広島でコンクリ Vol.6 8
  9. 9. <?php namespace Application¥Theme¥Hana; class PageTheme extends¥Concrete¥Core¥Page¥Theme¥Theme { protected $pThemeGridFrameworkHandle = 'bootstrap3'; } 広島でコンクリ Vol.6 9
  10. 10. namespace Application¥Theme¥Test; ↓ フォルダ名:test “ 広島でコンクリ Vol.6 10
  11. 11. 広島でコンクリ Vol.6 11
  12. 12. http://getbootstrap.com/ 広島でコンクリ Vol.6 12
  13. 13. 広島でコンクリ Vol.6 13
  14. 14. 広島でコンクリ Vol.6 14 description.txt Sample Sample theme for HIROSHIMA de CONCRE thumnail.png 360×270
  15. 15. 広島でコンクリ Vol.6 15 Page_theme. php <?php namespace Application¥Theme¥Sample; class PageTheme extends¥Concrete¥Core¥Page¥Theme¥Theme { protected $pThemeGridFrameworkHandle = ‘bootstrap3’; //bootstrap3のグリッドレイアウトを使えるようにする public function getThemeName() { return t(‘サンプル’);//テーマ名 } public function getThemeDescription() { return t(‘コンクリのサンプル');//テーマの説明 } }
  16. 16. Page_theme. php 広島でコンクリ Vol.6 16 thumnail.png 360×270
  17. 17. default.php Page_theme. php 広島でコンクリ Vol.6 17 thumnail.png 360×270
  18. 18. 広島でコンクリ Vol.6 18 “
  19. 19. @themecolor:#c00000; ↓ backgroound: @themecolor; color: @themecolor; .borderRadius { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } ↓ #main{ Background:@themecolor .borderRadius(); } http://ascii.jp/elem/000/000/668/668205/ 広島でコンクリ Vol.6 19
  20. 20. 広島でコンクリ Vol.6 21 main.less theme.less 残りのless残りのless 残りのless
  21. 21. 広島でコンクリ Vol.6 22 @import “○○.less"; ↓ @import "build/mixins.less"; @import “theme.less“;
  22. 22. <?php defined('C5_EXECUTE') or die("Access Denied.");?> 広島でコンクリ Vol.6 23 <?php echo $this->getThemePath()?>/~ディレクトリ
  23. 23. header.php footer.php 広島でコンクリ Vol.6 24
  24. 24. 広島でコンクリ Vol.6 25
  25. 25. <?php Loader::element('header_required');?> </head> 広島でコンクリ Vol.6 26 <?php echo $html->css($view->getStylesheet('main.less'))?> <html lang=“en”> → <html lang="<?php echo Localization::activeLanguage()?>">
  26. 26. 広島でコンクリ Vol.6 27
  27. 27. <?php Loader::element('footer_required'); ?> </body> 広島でコンクリ Vol.6 28
  28. 28. <div class="<?php echo $c->getPageWrapperClass()?>"> 広島でコンクリ Vol.6 29 </div>
  29. 29. 広島でコンクリ Vol.6 30 <?php $u = new User(); if (!$u->isRegistered()) { ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="<?php echo $this->getThemePath()?>/js/bootstrap.min.js"></script> <?php } ?>
  30. 30. header.php 広島でコンクリ Vol.6 31
  31. 31. <?php defined('C5_EXECUTE') or die("Access Denied."); $this->inc('elements/header.php'); ?> //Bootstrapサンプルサイトの残りのソース <?php $this->inc('elements/footer.php'); ?> 広島でコンクリ Vol.6 32
  32. 32. 広島でコンクリ Vol.6 33
  33. 33. 広島でコンクリ Vol.6 34 <?php if (id(new User)->isLoggedIn()) { ?> <style> body{ margin-top:99px!important; } nav.navbar.navbar-inverse.navbar-fixed-top{ margin-top:50px!important; } </style> <?php } ?>
  34. 34. <?php $a = new GlobalArea(‘エリア名'); $a->display(); ?> <?php $a = new Area('Main'); $a->display($c); ?> 広島でコンクリ Vol.6 35
  35. 35. <?php $a = new Area('Main'); $a->enableGridContainer(); $a->display($c); ?> 広島でコンクリ Vol.6 36
  36. 36. <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container"> <h1>Hello, world!</h1> …省略 </div> →ここに右のソースを追加してみよう <div class="container"> <!-- Example row of columns -->…省略 広島でコンクリ Vol.6 37 <div class="container"> <div class="row"> <div class="col-md-12"> <?php $a = new Area('Main'); $a->enableGridContainer(); $a->display($c); ?> </div> </div> </div>
  37. 37. 広島でコンクリ Vol.6 38
  38. 38. 広島でコンクリ Vol.6 39
  39. 39. 広島でコンクリ Vol.6 40
  40. 40. 広島でコンクリ Vol.6 41
  41. 41. 広島でコンクリ Vol.6 42

×