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;
}

リンク

コーポレートサイトにちょうどいいCMS、baserCMS