「ver4/テンプレート制作」を編集中

[このコンテンツは内容調整中です]

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


## テーマフォルダを作成する

まず、任意のテーマ名を決めて指定の場所にフォルダを作成し、そのフォルダをテンプレートを配置する「テーマフォルダ」とします。その中にテンプレートを作成していきます。CSSや画象、Javascriptも同じフォルダ内に配置します。

<pre>
{baserCMSの設置フォルダ}/app/webroot/theme/{テーマ名}/
</pre>

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

**<span style="color:red">あらかじめ作成したテーマのフォルダをFTPでアップロードしておきます。（中身は空のままでかまいません）</span>**

## テーマの設定を変更する

* 管理画面にログインします。
* メインメニューの「テーマ管理」をクリックします。
* FTPでアップロードしたテーマが一覧に表示されていますので、選択ボタンをクリックし、テーマを選択します。

## HTMLファイルを作成する

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

（例）HTMLファイル

<syntaxhighlight lang="html5">
  <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="contensBody">
            <!-- コンテンツ内容を記述 -->
       </div>
       <div id="Sidebar">
            <!-- メニュー等を記述 -->
       </div>
  </div>
  <div id="Footer">
       <!-- フッター内容を記述 -->
  </div>
  </body>
  </html>
</syntaxhighlight>

## 静的ファイルを配置する

CSS等の静的ファイルは、基本的にテーマフォルダの配下に次のフォルダを作成し、その配下に設置します。

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

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

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

* テーマフォルダの中に「Layouts」という名称のフォルダを作成します。
* Layouts フォルダに、default.php という名称でファイルを作成します。
* HTML の共通部分を抜き出し（コンテンツ本体以外）Layouts ファイルに記述する。
* headタグ内（閉じheadタグの直前）に次のbaserタグを記述する。
<syntaxhighlight lang="php">
<?php $this->BcBaser->scripts() ?>
</syntaxhighlight>
* コンテンツを配置する部分に以下のタグを記述する。
<syntaxhighlight lang="php">
<?php $this->BcBaser->content() ?>
</syntaxhighlight>
* タイトルを配置する部分に以下のタグを記述する。
<syntaxhighlight lang="php">
<?php $this->BcBaser->title() ?>
</syntaxhighlight>
* description メタタグを記述する部分に以下のタグを記述する
<syntaxhighlight lang="php">
<?php $this->BcBaser->metaDescription() ?>
</syntaxhighlight>
* keywords メタタグを記述する部分に以下のタグを記述する
<syntaxhighlight lang="php">
<?php $this->BcBaser->metaKeywords() ?>
</syntaxhighlight>
* 外部CSS「style.css」を読み込む為に以下のタグを記述する ※ 読み込むファイルのフォルダ階層が変わっても、適切なURLを出力します。<br />
<small>※ スラッシュから始まるルートパスを使えば通常のCSS読み込みタグでも問題ありませんが、テーマとして配布する場合は、設置フォルダの階層が変わる可能性があるので、必ず次のタグで記述します。<br /> ※ ファイル名（拡張子なし）のみを指定した場合、css フォルダ内のファイルとしてURLが自動出力されます。</small>

<syntaxhighlight lang="php">
<?php $this->BcBaser->css('style') ?>
</syntaxhighlight>
* jqueryなどのjsを記述する場合は次のように記述します。
<syntaxhighlight lang="php">
<?php $this->BcBaser->js('jquery') ?>
</syntaxhighlight>

<small> ※ 拡張子は省略できます。<br /> ※ あらかじめjsフォルダ内にjavascriptを配置しておく必要があります。</small>
* bodyタグの最後に、次の baserタグを記述する
<syntaxhighlight lang="php">
<?php $this->BcBaser->func() ?>
</syntaxhighlight>

（例）{baserCMSの設置フォルダ}/app/View/Layouts/default.ctp

<syntaxhighlight lang="php">
<html>
<head>
<?php $this->BcBaser->title() ?>
<?php $this->BcBaser->metaDescription() ?>
<?php $this->BcBaser->metaKeywords() ?>
<?php $this->BcBaser->css('style') ?>
<?php $this->BcBaser->css('colorbox/colorbox') ?>
<?php $this->BcBaser->js(array('jquery-1.7.2.min','jquery.bt.min','jquery.colorbox-min','jquery.corner','startup')) ?>
<?php $this->BcBaser->scripts() ?>
</head>
<body>
<div id="Head">
     <!-- ヘッダー内容を記述 -->
</div>
<div id="Wrap">
     <div id="ContensBody">
          <?php $this->BcBaser->content() ?>
     </div>
     <div id="Sidebar">
          <!-- メニュー等を記述 -->
     </div>
</div>
<div id="Footer">
     <!-- フッター内容を記述 -->
</div>
<?php $this->BcBaser->func() ?>
</body>
</html>
</syntaxhighlight>

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

ここでは、Webページを http://{baserCMS設置URL}/about/index として参照できるようにします。<br /> まず、事前にテンプレートフォルダ内に、「Pages」という名称のフォルダを作成し、アップロードした上で、<u>アクセス権を707（環境によっては 777）に変更しておきます。</u>
* 管理画面にログインし、固定ページ管理を開きます。
* サブメニューのページカテゴリー管理メニューより「新規に登録する」をクリックします。
* ページカテゴリ名欄に「about」と入力します。（URLのフォルダ名として利用されます）
* ページカテゴリタイトル欄に「このサイトについて」と入力します。（Webページのタイトルとして利用されます）
* 「登録」ボタンをクリックしてページカテゴリの登録を完了します。
* 固定ページ管理メニューより「新規に登録する」をクリックします。
* カテゴリ欄より「このサイトについて」を選択します。
* ページ名欄に「index」と入力します。（URLのファイル名として利用されます。）
* タイトル欄には「このサイトについて」と入力します。<br />
<small>※ indexという名称のページを作成する場合、ページカテゴリ名とページ名を同じにするとタイトルタグやパンくずにおいてカテゴリ名を省略する事ができます。</small>
* 説明文欄に任意に説明文を入力します。（metaタグのdescriptionとして利用されます）
* 本文欄に任意の文章を入力します。
* 「登録」ボタンをクリックし、ページ登録を完了します。
* 画面一番下の「保存前確認」ボタンをクリックして表示を確認します。
* http://{baserCMS設置URL}/about/index のURLとして確認する場合は、編集ボタンをクリックし、公開状態「公開する」に変更して「更新」ボタンをクリックします。

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

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

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

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

<syntaxhighlight lang="php">
<?php echo $this->BcBaser->element('header') ?>
</syntaxhighlight>

（例）{baserCMSの設置フォルダ}/app/View/Elements/header.php<br /> ※ ヘッダーとフッターは特別で、$this->BcBaser->header() / $this->BcBaser->footer() で呼び出す事ができます。

<syntaxhighlight lang="php">
<!-- メニュー等を記述 -->
</syntaxhighlight>

（例）{baserCMSの設置フォルダ}/app/View/Layouts/default.php

<syntaxhighlight lang="php">
<html>
<head>
<?php $this->BcBaser->title() ?>
<?php $this->BcBaser->metaDescription() ?>
<?php $this->BcBaser->metaKeywords() ?>
<?php $this->BcBaser->css('style') ?>
<?php $this->BcBaser->css('colorbox/colorbox') ?>
<?php $this->BcBaser->js(array('jquery-1.7.2.min','jquery.bt.min','jquery.colorbox-min','jquery.corner','startup')) ?>
<?php $this->BcBaser->scripts() ?>
</head>
<body>
<div id="Head">
     <?php echo $this->BcBaser->header() ?>
</div>
<div id="Wrap">
     <div id="ContensBody">
          <?php $this->BcBaser->content() ?>
     </div>
     <div id="Sidebar">
          <?php echo $this->BcBaser->element('sidebar') ?>
     </div>
</div>
<div id="Footer">
     <?php echo $this->BcBaser->footer() ?>
</div>
<?php $this->BcBaser->func() ?>
</body>
</html>
</syntaxhighlight>

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

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

<syntaxhighlight lang="php">
<?php $this->BcBaser->element('widget_area',array('no'=>$widgetArea)) ?>
</syntaxhighlight>

追加するには、管理画面にログインし、「ウィジェット管理」を開きます。