concrete5 5.7でテーマ作ってみよう超初級編
TRANSCRIPT
広島でコンクリ Vol.6 1
広島でコンクリ Vol.6 2
•
•
•
•
•
•
•
•
•
広島でコンクリ Vol.6 3
upload_max_filesize = 20Mpost_max_size = 20Mmemory_limit = 96Msafe_mode=Off
cgi.fix_pathinfo = 1date.timezone = Asia/Tokyo
広島でコンクリ Vol.6 4
ルートディレクトリ/themes
広島でコンクリ Vol.6 5
ルートディレクトリ/application/themes
広島でコンクリ Vol.6 6
description.txt default.php header.php footer.phpthumnail.png
広島でコンクリ Vol.6 7
description.txt thumnail.pngdefault.php header.php footer.php
Page_theme.php
広島でコンクリ Vol.6 8
<?phpnamespace Application¥Theme¥Hana;class PageTheme extends¥Concrete¥Core¥Page¥Theme¥Theme {
protected $pThemeGridFrameworkHandle = 'bootstrap3';}
広島でコンクリ Vol.6 9
namespace Application¥Theme¥Test;↓フォルダ名：test
“広島でコンクリ Vol.6 10
広島でコンクリ Vol.6 11
広島でコンクリ Vol.6 14
description.txt
SampleSample theme for HIROSHIMA de CONCRE
thumnail.png
360×270
広島でコンクリ Vol.6 15
Page_theme.php
<?phpnamespace 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(‘コンクリのサンプル');//テーマの説明}
}
Page_theme.php
広島でコンクリ Vol.6 16
thumnail.png
360×270
default.php
Page_theme.php
広島でコンクリ Vol.6 17
thumnail.png
360×270
広島でコンクリ Vol.6 18
“
@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
広島でコンクリ Vol.6 21
main.less theme.less残りのless残りのless
残りのless
広島でコンクリ Vol.6 22
@import “○○.less";↓@import "build/mixins.less";
@import “theme.less“;
<?php defined('C5_EXECUTE') or die("Access Denied.");?>
広島でコンクリ Vol.6 23
<?php echo $this->getThemePath()?>/～ディレクトリ
header.php footer.php
広島でコンクリ Vol.6 24
広島でコンクリ Vol.6 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()?>">
広島でコンクリ Vol.6 27
<?php Loader::element('footer_required'); ?></body>
広島でコンクリ Vol.6 28
<div class="<?php echo $c->getPageWrapperClass()?>">
広島でコンクリ Vol.6 29
</div>
広島でコンクリ 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 } ?>
header.php
広島でコンクリ Vol.6 31
<?phpdefined('C5_EXECUTE') or die("Access Denied.");$this->inc('elements/header.php'); ?>
//Bootstrapサンプルサイトの残りのソース
<?php $this->inc('elements/footer.php'); ?>
広島でコンクリ Vol.6 32
広島でコンクリ Vol.6 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 } ?>
<?php$a = new GlobalArea(‘エリア名');$a->display();
?>
<?php$a = new Area('Main');$a->display($c);
?>
広島でコンクリ Vol.6 35
<?php$a = new Area('Main');$a->enableGridContainer();$a->display($c);
?>
広島でコンクリ Vol.6 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>
広島でコンクリ Vol.6 38
広島でコンクリ Vol.6 39
広島でコンクリ Vol.6 40
広島でコンクリ Vol.6 42