baserCMSテーマ制作チュートリアル
これは、 baserCMSテーマ制作チュートリアルのお題となるHTMLです。
このチュートリアルを最後まで学習すると、静的HTMLのWebサイトを baserCMS 上で動作させるためのポイントを学習することができます。みなさんのWeb制作にお役立てください。
添付のPDFファイルを読み進めながら、実際に手を動かしていきますが、実際にテンプレートに記述するタグ(関数)は、下記に記載しているものからコピーすると便利です。
CSSタグの書き換え
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->css('スタイルシート名') ?>
css部分の書き換え例
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->css('style') ?>
<?php $this->BcBaser->css('editor') ?>
複数ファイルを1行で指定する例
<?php $this->BcBaser->css(['style', 'editor']) ?>
※ CSS直下の場合は、ファイル名のみで可、拡張子は省略可能
※ テーマとして配布しない場合は、関数への書き換え不要ですが、スラッシュから始まる絶対パスの記述に変える必要があります。
themeUrl 関数を利用する場合
<link rel="stylesheet" type="text/css" href="<?php $this->BcBaser->themeUrl() ?>css/style.css" />
script タグの書き換え
javascript 部分の書き換え例
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->js('jquery-1.11.3.min') ?>
<?php $this->BcBaser->js('jquery.bxslider-4.12.min') ?>
<?php $this->BcBaser->js('jquery-accessibleMegaMenu') ?>
<?php $this->BcBaser->js('startup') ?>
複数ファイルを1行で指定する例
<?php $this->BcBaser->js(['jquery-1.11.3.min', 'jquery.bxslider-4.12.min', 'jquery-accessibleMegaMenu', 'startup']) ?>
themeUrl 関数を利用する場合
<script type="text/javascript" src="<?php $this->BcBaser->themeUrl() ?>js/startup.js"></script>
IMGタグの書き換え
<?php $this->BcBaser->img('画像URL', ['alt'=>'ALT属性値','id'=>'ID属性値']) ?>
ロゴ部分の書き換え例
<?php $this->BcBaser->img('./', ['alt' => 'baserCMSサンプル']) ?>
※ ALT は任意
※ URLは Baser設置場所のスラッシュから始まるルートパスで記述
※ テーマとして配布しない場合は書き換え不要ですが、
スラッシュから始まる絶対パスの記述に変える必要があります。
【絶対パスに置き換える例】 src="./" → src="/theme/theme-name/"
Aタグの書き換え
<?php $this->BcBaser->link('リンクテキスト','URL') ?>
VIEW ALL 部分の書き換え例
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->link('VIEW ALL', '/news/') ?>
※ URLは Baser設置場所のスラッシュから始まるルートパスで記述
※ テーマとして配布しない場合は書き換え不要ですが、、スラッシュから始まる絶対パスの記述に変える必要があります。
【絶対パスに置き換える例】 href="./" → href="/"
baseUrl関数を利用する場合
<a href="<?php $this->BcBaser->baseUrl() ?>/news/">VIEW ALL</a>
IMGタグを Aタグで挟む場合
<?php $this->BcBaser->img('画像URL', ['url'=>'リンク先URL']) ?>
ロゴ部分の書き換え例
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->img('logo.gif', ['url' => '/', 'alt' => 'baserCMSサンプル', 'id' => 'Logo']); ?>
baserCMSバナー部分の書き換え例
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->img('https://basercms.net/img/bnr_basercms.jpg', ['url'=>'https://basercms.net/', 'alt' => 'コーポレートサイトにちょうどいいCMS、baserCMS']) ?>
※ テーマとして配布しない場合は書き換え不要ですが、
IMG タグ、Aタグの両方を スラッシュから始まる絶対パスの記述に変える必要があります。
baseUrl関数とthemeUrl関数を利用する場合
<a href="<?php $this->BcBaser->baseUrl() ?>test">
<img src="<?php $this->BcBaser->themeUrl() ?>test.gif" />
</a>
タイトル・メタタグの埋込
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->title() ?>
<?php $this->BcBaser->metaDescription() ?>
<?php $this->BcBaser->metaKeywords() ?>
baserCMS標準タグの埋込
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->scripts() ?>
<?php $this->BcBaser->func() ?>
グロバールメニュー出力タグ
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->globalMenu(2) ?>
コンテンツ出力タグ
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->content() ?>
※今回テーマであれば、bs-info
クラスが付与されている DIVタグの次にコンテンツ本体部分を出力します。
メイン画像表示切り替え
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php if ($this->BcBaser->isHome()): ?>
<ul id="MainImage" class="bs-main-image">
:
</ul>
<?php endif ?>
NEWSのエレメント化と表示切り替え
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php if($this->BcBaser->isHome()): ?>
<?php $this->BcBaser->element('top_info') ?>
<?php endif ?>
ブログ記事読み込み実装
<!-- /app/theme/webroot/theme/corp/Elements/top_info.php -->
<?php $this->BcBaser->blogPosts('news', 5) ?>
ウィジェット実装
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->widgetArea() ?>
コンテンツ名出力タグの埋込
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<body id="<?php $this->BcBaser->contentsName() ?>">
ロゴ出力
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->logo(['class' => 'bs-header__logo']) ?>
メインイメージ出力
<!-- /app/theme/webroot/theme/corp/Layouts/default.php -->
<?php $this->BcBaser->mainImage([
'all' => true,
'num' => 5,
'width' => '100%',
'class' => 'bs-main-image'
]) ?>
テーマカラー設定CSS
// /app/theme/webroot/theme/corp/css/config.css
.bs-header__nav,
.bs-footer{
background-color:MAIN!important;
}
.bs-pagination a,
.bs-top-post-to-list a,
.bs-widget-local-navi h2{
background-color:SUB;
}
.bs-main-contents a:link,
.bs-main-contents a:visited,
.bge-contents a:link,
.bge-contents a:visited,
.cke_editable a:link,
.cke_editable a:visited {
color:LINK;
}
.bs-main-contents a:hover,
.bge-contents a:hover,
.cke_editable a:hover {
color:HOVER;
}