テンプレート編集はじめの一歩
提供: baserCMS公式ガイド
「テンプレート編集はじめの一歩」は、baserCMS初心者向けのテンプレート逆引きリファレンスとなっています。
テーマ「nada-icon」を例にとって、テンプレートのどこを触ればいいのかを説明していきたいと思います。
目次
全体的なレイアウトの調整を行いたい
全体のレイアウト
まずはテーマの全体レイアウトについて説明していきます。
レイアウト、エレメント、コンテンツの関係について理解してから、各エレメントやブログ、メールフォームの変更を進めていくことをおすすめします。
テーマ「nada icons」の場合、全体のレイアウトテンプレートファイルはLayoutフォルダ内のdefault.phpとなっています。
(/app/webroot/theme/nada-icons/Layouts/default.php)
スタイルシート、画像はそれぞれLayoutsフォルダと並んでいるcssフォルダ、imgフォルダに格納されています。
このレイアウトテンプレートによって、エレメント(ヘッダー、フッター、サイドバーなどのWEBページの部品となるテンプレート)とコンテンツ本体(管理画面で入力した固定ページやブログなどが出力されるエリア)の配置場所を決めています。
よって、「nada icons」でエレメントとコンテンツの配置を変えたい場合には、default.php を変更します。
nada-icon の全体レイアウトとエレメントマップです。
トップページの場合
「会社案内」ページの場合
default.phpの
<?php $this->BcBaser->content() ?>
において、管理画面の「固定ページ管理」の「固定ページ一覧」にある「会社案内(about)」が表示されています。
この「会社案内(about)」のファイルは
(/app/webroot/theme/nada-icons/Pages/) 以下
about.phpに存在します。
各エレメント・コンテンツテンプレートの変更について
このようにnada-iconではヘッダーやサイドボックス、コンテンツ本体などが部品化されています。
その中で例えばヘッダーに変更を加えたい場合、
default.phpにヘッダーテンプレートを出力する関数である
<?php $this->BcBaser->header() ?>
が記述されていれば、ヘッダーはdefault.phpに直接記述されているわけではなくエレメントとして部品化されている事がわかります。
よって、
(/app/webroot/theme/nada-icons/Elements/) 以下
header.phpにヘッダーの変更を加えていく流れとなります。
スタイルシート、画像の編集、追加について
スタイルシート、画像はそれぞれLayoutsフォルダと並んでいるcssフォルダ、imgフォルダに格納されていますので、
こちらのデータを編集します。
新しくスタイルシートや画像をレイアウトファイルに読み込む場合はcssを読み込む関数や画像を出力する関数を使用します。
<?php $this->BcBaser->css(cssファイルパス) ?> <?php $this->BcBaser->img(画像ファイルパス,幅や高さ等のオプション値) ?>