テンプレート制作

※ このページは BaserCMS 1.6.0にあわせて書き直されています。

BaserCMSのテンプレートを作成するには、次の手順に従って作業を行います。

テンプレートの配置方法を決める
テーマの設定を変更する
HTMLファイルを作成する
静的ファイルを配置する
レイアウトテンプレートを作成する
コンテンツページを登録する
ヘッダー等の共通部分を部品化する（任意）

テンプレートの配置方法を決める

BaserCMSではテンプレートについて２つの配置方法を用意しています。
テンプレート自体の作成方法は基本的に同じで、配置場所が違うと考えてください。

ノーマル

次のフォルダを、テンプレートを配置する「テンプレートフォルダ」として、その中にテンプレートを作成していきます。

{BaserCMSの設置フォルダ}/app/views/

CSSや画象、javascriptなどの静的ファイルは、/app/webroot/ フォルダ内に設置します。

テーマ（推奨）

テーマとして作成すると、作成したテンプレート一式を配布物としてパッケージングできるようになりますし、リニューアル時の切り替えも容易になります。テーマとして作成するには、任意のテーマ名を決めてフォルダを作成し、そのフォルダをテンプレートを配置する「テンプレートフォルダ」とします。その中にテンプレートを作成していきます。CSSや画象、Javascriptも同じフォルダ内に配置します。

{BaserCMSの設置フォルダ}/app/webroot/themed/{テーマ名}/

※ テーマ名は、アルファベット（アンダースコアも可）で決めてください。

メリット・・・配布物として配布しやすくなる。
デメリット・・画像、CSS等の静的ファイルの URLの階層が深くなる。（BaserCMSの関数を使えば意識する必要はありません）

テーマとして作成する場合は、あらかじめ作成したテーマのフォルダをFTPでアップロードしておきます。（中身は空のままでかまいません）

テーマの設定を変更する

管理画面にログインします。
メインメニューの「システム設定」をクリックします。
画面下の「オプション」をクリックするとテーマの選択項目が表示されますので、テーマを選択します。テンプレートをテーマとして制作しない場合は、「なし」を選択します。
「更新」ボタンをクリックして保存します。

HTMLファイルを作成する

通常の制作どおり、１ページの HTMLファイルを作成します。

（例）HTMLファイル

<html>
<head>
<title><!-- タイトルを記述 --></title>
<meta name="description" content="説明文を記述" />
<meta name="keywords" content="キーワードを記述" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<div id="head">
     <!-- ヘッダー内容を記述 -->
</div>
<div id="wrap">
     <div id="contens">
          <!-- コンテンツ内容を記述 -->
     </div>
     <div id="sidebar">
          <!-- メニュー等を記述 -->
     </div>
</div>
<div id="footer">
     <!-- フッター内容を記述 -->
</div>
</body>
</html>

静的ファイルを配置する

CSS等の静的ファイルは、基本的に次のフォルダの配下に設置します。

画像・・・「img」フォルダ
CSS・・・「css」フォルダ
Javascript・・・「js」フォルダ

レイアウトテンプレートを作成する

レイアウトテンプレートとは、WEBページの枠組みを記述するファイルです。全ての WEBページでの共通部分を含める事でメンテナンス性を高める事ができます。このファイルを変更するだけで、あらかじめ用意されているブログや、メールフォームのレイアウトも変更する事ができます。

テンプレートフォルダの中に「layouts」という名称のフォルダを作成します。
layouts フォルダに、default.ctp という名称でファイルを作成します。
HTML の共通部分を抜き出し（コンテンツ本体以外）layouts ファイルに記述する。

headタグ内（できれば閉じheadタグの直前）にBaser標準タグを記述する。

<?php $baser->css('colorbox/colorbox') ?>
<?php $baser->js(array('jquery-1.4.2.min','jquery.bt.min','jquery.colorbox-min','jquery.corner','startup')) ?>
<?php $baser->scripts() ?>

コンテンツを配置する部分に以下のタグを記述する。
```
<?php $baser->content() ?>
```
タイトルを配置する部分に以下のタグを記述する。
```
<?php $baser->title() ?>
```
description メタタグを記述する部分に以下のタグを記述する
```
<?php $baser->metaDescription() ?>
```
keywords メタタグを記述する部分に以下のタグを記述する
```
<?php $baser->metaKeywords() ?>
```
外部CSS「style.css」を読み込む為に以下のタグを記述する ※ 読み込むファイルのフォルダ階層が変わっても、適切なURLを出力します。
※ スラッシュから始まるルートパスを使えば通常のCSS読み込みタグでも問題ありませんが、テーマとして配布する場合は、設置フォルダの階層が変わる可能性があるので、必ず次のタグで記述します。
※ ファイル名（拡張子なし）のみを指定した場合、css フォルダ内のファイルとしてURLが出力されます。
```
<?php $baser->css('style') ?>
```

（例）/app/views/layouts/default.ctp

<html>
<head>
<?php $baser->title() ?>
<?php $baser->metaDescription() ?>
<?php $baser->metaKeywords() ?>
<?php $baser->css('style') ?>
<?php $baser->css('colorbox/colorbox') ?>
<?php $baser->js(array('jquery-1.4.2.min','jquery.bt.min','jquery.colorbox-min','jquery.corner','startup')) ?>
<?php $baser->scripts() ?>
</head>
<body>
<div id="head">
     <!-- ヘッダー内容を記述 -->
</div>
<div id="wrap">
     <div id="contens">
          <?php $baser->content() ?>
     </div>
     <div id="sidebar">
          <!-- メニュー等を記述 -->
     </div>
</div>
<div id="footer">
     <!-- フッター内容を記述 -->
</div>
</body>
</html>

コンテンツページを登録する

ここでは、WEBページを http://localhost/about/index として参照できるようにします。
まず、事前にテンプレートフォルダ内に、「pages」という名称のフォルダを作成し、アップロードした上で、アクセス権を707（環境によっては 777）に変更しておきます。

管理画面にログインし、ページ管理を開きます。
画面左のページカテゴリーメニューより「新規に登録する」をクリックします。
ページカテゴリ名欄に「about」と入力します。（URLのフォルダ名として利用されます）
ページカテゴリタイトル欄に「このサイトについて」と入力します。（WEBページのタイトルとして利用されます）
「登録」ボタンをクリックしてページカテゴリの登録を完了します。
画面左のページ管理メニューより「新規に登録する」をクリックします。
カテゴリ欄より「このサイトについて」を選択します。
ページ名欄に「index」と入力します。（URLのファイル名として利用されます。）
タイトル欄には何も入力しません。（入力した場合、WEBページのタイトルに追加されますが、ここではカテゴリに指定しているタイトルで十分なので省略します。）
説明文欄に任意に説明文を入力します。（metaタグのdescriptionとして利用されます）
本文欄に任意の文章を入力します。
「登録」ボタンをクリックし、ページ登録を完了します。
画面一番下に、「保存前確認」ボタンが表示されますので、クリックして表示を確認します。
http://localhost/about/index のURLとして確認する場合は、編集ボタンをクリックし、公開状態「公開する」に変更して「更新」ボタンをクリックします。

ヘッダーなどの共通部品を部品化する（任意）

WEBページ上のヘッダーやフッターなどの共通部品は、「エレメントテンプレート」として部品化する事で、メンテナンス性を高める事ができます。

（例）WEBページのヘッダーを部品化する場合

テンプレートフォルダの中に「elements」という名称のフォルダを作成します。
elements フォルダの中に、「header.ctp」という名称のファイルを作成します。（ファイル名は任意）
レイアウトテンプレートやコンテンツテンプレート内で、作成したヘッダーを呼び出すには呼び出したい場所に以下のタグを記述します。

<?php echo $baser->element('header') ?>

（例）/app/views/elements/header.ctp

<!-- メニュー等を記述 -->

（例）/app/views/layouts/default.ctp

<html>
<head>
<?php $baser->title() ?>
<?php $baser->metaDescription() ?>
<?php $baser->metaKeywords() ?>
</head>
<body>
<div id="head">
     <?php echo $baser->element('header') ?>
</div>
<div id="wrap">
     <div id="contens">
          <?php $baser->content() ?>
     </div>
     <div id="sidebar">
          <?php echo $baser->element('sidebar') ?>
     </div>
</div>
<div id="footer">
     <?php echo $baser->element('footer') ?>
</div>
</body>
</html>

ウィジェットを読み込む（任意）

BaserCMS 1.6.0 よりウィジェット機能が追加されました。次の一行をテンプレート内の任意の場所に記述するだけで、管理画面のウィジェットエリア管理より、パーツの追加や、場所の入れ替えなどが行えます。
ブログ用のパーツや、Twitter のユーザータイムライン読み込みパーツの他、HTMLタグを貼り付ける為のパーツなどが提供されています。

<?php $baser->element('widget_area',array('no'=>$widgetArea)) ?>

パーツを追加するには、管理画面にログインし、システム設定のサイドメニューにある、「ウィジェットエリア管理」を開きます。

このページ上部へ