第6回 全体的なレイアウト構成とエレメント

はじめまして、福岡でエンジニアをしているbeychanといいます!
basersマガジンは約1年ぶりの更新となります!!!
第6回からはnada-iconを例にとって、画面の特定箇所、特定コンテンツを編集するにはどのテンプレートを触ればいいのかを説明していきたいと思います。

全体のレイアウト

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

テーマ「nada icons」の場合、全体のレイアウトテンプレートファイルはLayoutフォルダ内のdefault.phpとなっています。

/app/webroot/theme/nada-icons/Layouts/default.php

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

template_kousei.png

 

前述の全体レイアウトを踏まえ、nada-icon の全体レイアウトを解説します。

トップページの場合

all_layouts.png

トップページ以外のページの場合(会社案内など)

all_layouts_about.png
「BcBaser->content();」箇所に固定ページ、ブログ、メールフォームの内容が表示されます。

エレメントの変更について

このようにnada-iconではヘッダーやサイドボックス、コンテンツ本体などが部品化されています。

例えば、header.phpについてはdefault.phpに ヘッダーテンプレートを出力する関数である が記述されている箇所に表示されます。

変更する場合は

/app/webroot/theme/nada-icons/Elements/header.php

を編集します。

 

header.phpの表示方法は だけでなく、エレメントファイルを呼び出す関数である でも表示することができます。

 

フッターのエレメントファイルであるfooter.phpの表示方法に関しても、以下のように2種類の書き方が可能です。

 

エレメント化する方法については

/app/webroot/theme/nada-icons/Elements

配下にエレメントファイルを作成・編集し、表示したい箇所に

で指定することでエレメントとして表示されます。

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

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

css、img、jsの読み込み順についてはbaserCMS公式ガイドの記事を参考にしてみてください。

参考資料

  • このエントリーをはてなブックマークに追加

RELATED