個人用ツール

テンプレート編集はじめの一歩

提供: baserCMS公式ガイド

2016年7月4日 (月) 13:15時点におけるTomohiro Abe (トーク | 投稿記録)による版

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内, 検索

「テンプレート編集はじめの一歩」は、baserCMS初心者向けのテンプレート逆引きリファレンスとなっています。
テーマ「nada-icon」を例にとって、テンプレートのどこを触ればいいのかを説明していきたいと思います。

全体的なレイアウトの調整を行いたい

全体のレイアウト

まずはテーマの全体レイアウトについて説明していきます。
レイアウト、エレメント、コンテンツの関係について理解してから、各エレメントやブログ、メールフォームの変更を進めていくことをおすすめします。

テーマ「nada icons」の場合、全体のレイアウトテンプレートファイルはLayoutフォルダ内のdefault.phpとなっています。
(/app/webroot/theme/nada-icons/Layouts/default.php)
スタイルシート、画像はそれぞれLayoutsフォルダと並んでいるcssフォルダ、imgフォルダに格納されています。

このレイアウトテンプレートによって、エレメント(ヘッダー、フッター、サイドバーなどのWEBページの部品となるテンプレート)とコンテンツ本体(管理画面で入力した固定ページやブログなどが出力されるエリア)の配置場所を決めています。

template kousei.png

よって、「nada icons」でエレメントとコンテンツの配置を変えたい場合には、default.php を変更します。

nada-icon の全体レイアウトとエレメントマップです。

トップページの場合

all layouts.png

「会社案内」ページの場合

default.phpの

<?php $this->BcBaser->content() ?>

において、管理画面の「固定ページ管理」の「固定ページ一覧」にある「会社案内(about)」が表示されています。
この「会社案内(about)」のファイルは
(/app/webroot/theme/nada-icons/Pages/) 以下
about.phpに存在します。

all layouts about.png

各エレメント・コンテンツテンプレートの変更について

このようにnada-iconではヘッダーやサイドボックス、コンテンツ本体などが部品化されています。
その中で例えばヘッダーに変更を加えたい場合、
default.phpにヘッダーテンプレートを出力する関数である

<?php $this->BcBaser->header() ?>

が記述されていれば、ヘッダーはdefault.phpに直接記述されているわけではなくエレメントとして部品化されている事がわかります。

よって、 (/app/webroot/theme/nada-icons/Elements/) 以下
header.phpにヘッダーの変更を加えていく流れとなります。

  • レイアウトテンプレートの制作やエレメントテンプレートとしての部品化についてはテンプレート制作も参考にしてみてください。
  • baserCMSの関数については関数リファレンスを御覧ください。

スタイルシート、画像の編集、追加について

スタイルシート、画像はそれぞれLayoutsフォルダと並んでいるcssフォルダ、imgフォルダに格納されていますので、 こちらのデータを編集します。
新しくスタイルシートや画像をレイアウトファイルに読み込む場合はcssを読み込む関数画像を出力する関数を使用します。

<?php $this->BcBaser->css(cssファイルパス) ?>
<?php $this->BcBaser->img(画像ファイルパス,幅や高さ等のオプション値) ?>

参考資料