個人用ツール

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

提供: baserCMS公式ガイド

移動: 案内, 検索
(ページの作成:「[このコンテンツは内容調整中です] 「テンプレート編集はじめの一歩」は、baserCMS初心者向けのテンプレート逆引きリファレ...」)
 
 
行13: 行13:
  
 
テーマ「nada icons」の場合、全体のレイアウトテンプレートファイルはLayoutフォルダ内のdefault.phpとなっています。<br>
 
テーマ「nada icons」の場合、全体のレイアウトテンプレートファイルはLayoutフォルダ内のdefault.phpとなっています。<br>
(/app/webroot/theme/nada-icons/Layouts/default.php)<br>
+
(/theme/nada-icons/Layouts/default.php)<br>
 
スタイルシート、画像はそれぞれLayoutsフォルダと並んでいるcssフォルダ、imgフォルダに格納されています。
 
スタイルシート、画像はそれぞれLayoutsフォルダと並んでいるcssフォルダ、imgフォルダに格納されています。
  
行35: 行35:
 
において、管理画面の「固定ページ管理」の「固定ページ一覧」にある「会社案内(about)」が表示されています。<br>
 
において、管理画面の「固定ページ管理」の「固定ページ一覧」にある「会社案内(about)」が表示されています。<br>
 
この「会社案内(about)」のファイルは<br>
 
この「会社案内(about)」のファイルは<br>
(/app/webroot/theme/nada-icons/Pages/) 以下<br>
+
(/app/View/Pages/) 以下<br>
 
about.phpに存在します。
 
about.phpに存在します。
  
行43: 行43:
 
このようにnada-iconではヘッダーやサイドボックス、コンテンツ本体などが部品化されています。<br>
 
このようにnada-iconではヘッダーやサイドボックス、コンテンツ本体などが部品化されています。<br>
 
その中で例えばヘッダーに変更を加えたい場合、<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 ヘッダーテンプレートを出力する関数]である
+
default.phpに[http://wiki.basercms.net/ver4/%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">
 
<syntaxhighlight lang="php">
行52: 行52:
  
 
よって、
 
よって、
(/app/webroot/theme/nada-icons/Elements/) 以下<br>
+
(/theme/nada-icons/Elements/) 以下<br>
 
header.phpにヘッダーの変更を加えていく流れとなります。
 
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 テンプレート制作]も参考にしてみてください。
+
* レイアウトテンプレートの制作やエレメントテンプレートとしての部品化については[http://wiki.basercms.net/ver4/%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 関数リファレンス]を御覧ください。
+
* baserCMSの関数については[http://wiki.basercms.net/ver4/%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フォルダに格納されていますので、
 
スタイルシート、画像はそれぞれLayoutsフォルダと並んでいるcssフォルダ、imgフォルダに格納されていますので、
 
こちらのデータを編集します。<br>
 
こちらのデータを編集します。<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 画像を出力する関数]を使用します。
+
新しくスタイルシートや画像をレイアウトファイルに読み込む場合は[http://wiki.basercms.net/ver4/%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/ver4/%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">
 
<syntaxhighlight lang="php">
行71: 行71:
  
 
### 参考資料
 
### 参考資料
* [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/ver4/%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ページの構成について]
+
* [http://wiki.basercms.net/ver4/%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ページの構成について]

2016年10月28日 (金) 19:09時点における最新版

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

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

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

全体のレイアウト

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

テーマ「nada icons」の場合、全体のレイアウトテンプレートファイルはLayoutフォルダ内のdefault.phpとなっています。
(/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/View/Pages/) 以下
about.phpに存在します。

all layouts about.png

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

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

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

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

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

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

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

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

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

参考資料