「テンプレート編集はじめの一歩」の版間の差分

2016年7月4日 (月) 13:15時点における最新版

「テンプレート編集はじめの一歩」は、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にヘッダーの変更を加えていく流れとなります。

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

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

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

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

@@ 行2: / 行2: @@
 テーマ「nada-icon」を例にとって、テンプレートのどこを触ればいいのかを説明していきたいと思います。
-## オーバーライド機能とコアファイルのカスタマイズ
-### baserCMSのオーバーライド機能
-baserCMSの[http://wiki.basercms.net/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E3%81%AE%E5%84%AA%E5%85%88%E9%A0%86%E4%BD%8D ファイル読み込みの優先順位について]、オーバーライド機能というものがあります。
-例えば、プラグインを何も導入していない状態だとすると、
-/app/Plugin/ 以下は空になっているかemptyファイルが存在するだけになっています。<br>
-しかし管理画面に入ってプラグイン管理をクリックすると、「Blog」「Feed」「Mail」という３つのプラグインが存在していると思います。
-管理画面のログイン方法については
+## 全体的なレイアウトの調整を行いたい
-[http://doc.basercms.net/document/archives/8 こちら]
+### 全体のレイアウト
-を御覧ください。
+まずはテーマの全体レイアウトについて説明していきます。<br>
+レイアウト、エレメント、コンテンツの関係について理解してから、各エレメントやブログ、メールフォームの変更を進めていくことをおすすめします。
-baserCMSのファイル呼び出しの優先順位は、まず/app/以下にあるファイルが優先されます。<br>
+テーマ「nada icons」の場合、全体のレイアウトテンプレートファイルはLayoutフォルダ内のdefault.phpとなっています。<br>
-次に/lib/Baser/以下のコアファイルが呼び出されます。<br>
+(/app/webroot/theme/nada-icons/Layouts/default.php)<br>
-プラグインの場合には、
+スタイルシート、画像はそれぞれLayoutsフォルダと並んでいるcssフォルダ、imgフォルダに格納されています。
-/app/Plugin/以下にプラグインが存在していなくても、/lib/Baser/Plugin/以下にある「Blog」「Feed」「Mail」が呼び出されます。<br>
-例えば、/app/Plugin/以下と/lib/Baser/Plugin/以下に同じ名前のプラグイン「testBaser」が存在しているとすると、/app/Plugin/以下の「testBaser」が優先的に呼び出され、/lib/Baser/Plugin/以下の「testBaser」の機能を上書きすることとなります。
-このbaserCMSのオーバーライド機能は他のファイルでも同様です。
+このレイアウトテンプレートによって、エレメント（ヘッダー、フッター、サイドバーなどのWEBページの部品となるテンプレート）とコンテンツ本体（管理画面で入力した固定ページやブログなどが出力されるエリア）の配置場所を決めています。
+[[ファイル:template_kousei.png|350px]]
-### コアファイルのカスタマイズ
+よって、「nada icons」でエレメントとコンテンツの配置を変えたい場合には、default.php を変更します。
-baserCMSにおいて/lib/Baser/以下にあるコアファイルを変更したい場合には、/lib/Baser/以下から対応のコアファイルをコピーして、/app/以下にて/lib/Baser/以下と同じディレクトリ構造で設置します。<br>
-コアファイルに直接変更を加えるとbaserCMSの動作自体に不具合が出る可能性や、baserCMSのバージョンアップを行う際にコアファイルでの変更が上書きされてしまうので、注意してください。コアファイルの変更は自己責任でお願いします。
-コアテンプレートのカスタマイズについては
-[http://wiki.basercms.net/%E3%82%B3%E3%82%A2%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA こちら]
-も御覧ください。
-## 全体的なレイアウトの調整を行いたい
-## ヘッダ部分のデザインを変更したい
+#### nada-icon の全体レイアウトとエレメントマップです。
+##### トップページの場合
-## フッタ部分のデザインを変更したい
+[[ファイル:all_layouts.png|400px]]
+##### 「会社案内」ページの場合<br>
+default.phpの
+<syntaxhighlight lang="php">
+<?php $this->BcBaser->content() ?>
+</syntaxhighlight>
+において、管理画面の「固定ページ管理」の「固定ページ一覧」にある「会社案内（about）」が表示されています。<br>
+この「会社案内（about）」のファイルは<br>
+(/app/webroot/theme/nada-icons/Pages/) 以下<br>
+about.phpに存在します。
-## サイドバー（左メニュー）のデザインを変更したい
+[[ファイル:all_layouts_about.png|400px]]
+### 各エレメント・コンテンツテンプレートの変更について
+このようにnada-iconではヘッダーやサイドボックス、コンテンツ本体などが部品化されています。<br>
+その中で例えばヘッダーに変更を加えたい場合、<br>
+default.phpに[http://wiki.basercms.net/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/header ヘッダーテンプレートを出力する関数]である
-## ニュース部分のデザインを変更したい
+<syntaxhighlight lang="php">
+<?php $this->BcBaser->header() ?>
+</syntaxhighlight>
+が記述されていれば、ヘッダーはdefault.phpに直接記述されているわけではなくエレメントとして部品化されている事がわかります。
-## ブログの一覧ページのデザインを変更したい
+よって、
+(/app/webroot/theme/nada-icons/Elements/) 以下<br>
+header.phpにヘッダーの変更を加えていく流れとなります。
+* レイアウトテンプレートの制作やエレメントテンプレートとしての部品化については[http://wiki.basercms.net/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E5%88%B6%E4%BD%9C テンプレート制作]も参考にしてみてください。
-## ブログの詳細ページのデザインを変更したい
+* baserCMSの関数については[http://wiki.basercms.net/%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA:%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9 関数リファレンス]を御覧ください。
+### スタイルシート、画像の編集、追加について
+スタイルシート、画像はそれぞれLayoutsフォルダと並んでいるcssフォルダ、imgフォルダに格納されていますので、
+こちらのデータを編集します。<br>
+新しくスタイルシートや画像をレイアウトファイルに読み込む場合は[http://wiki.basercms.net/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/css cssを読み込む関数]や[http://wiki.basercms.net/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/img 画像を出力する関数]を使用します。
-## 固定ページのタイトル部分を変更したい
+<syntaxhighlight lang="php">
+<?php $this->BcBaser->css(cssファイルパス) ?>
+<?php $this->BcBaser->img(画像ファイルパス,幅や高さ等のオプション値) ?>
+</syntaxhighlight>
-## メールフォーム（入力、確認、完了）のデザインを変更したい
+### 参考資料
+* [http://wiki.basercms.net/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E6%A7%8B%E9%80%A0 テーマファイルの構造について]
+* [http://wiki.basercms.net/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 Webページの構成について]

個人用ツール

検索

利用ガイド

制作ガイド ver.4

リンク

ツール