POPSブログ

デザインとレイアウトの変更

22

  Category:  basercms2012/02/13 pops 

ありきたりな話です。デザインとレイアウトの変更について少し概略をまとめてみます。


デザインとレイアウトの変更


デザインとレイアウトの変更の注意点

BaserCMSを導入する前から「大幅なデザインとレイアウトの変更」をするつもりで取り掛かった。事前の知識は無いし。NETでもBaserCMS関連の記事は希薄である。
一応、CakePHP のマニュアルを1回読んだだけである。何もワカラン状態ではあるが、「baser のスクリプト」を読むことからかかった。詳細はわからないが多少何を行っているかは理解は出来る。CakePHPの強みである。


大まかな当方の構造を図示すると以下のようになる。




全てデータベースに保存されてはいない

色々な作業を行う前はテキストで書かれたファイルなど全てがデータベースに保存されているものと思っていましたが。違います。各種の設定と一部のデータ、ブログの記事、はデータベースに保存されますが、ほとんどのファイル関連のものは、使用しているテーマ内部に保存されています。
保存形式は.ctpファイルです。.phpと同じものですが、htmlを直接書き込み表示できますので html ファイルと思っても良い性格のものです。勿論PHP、CackePHP、の記述もできますので色々なデータベースの情報なども埋め込むことができます。
それらのテーマ内部に保存されているxxxx.ctpファイルはそれぞれ役割が決まっています。保存名、保存フォルダも指定されます。


ページカテゴリは階層そのものです

ページカテゴリを設定するとページカテゴリのフォルダがテーマ内部に作られ、それに属するページファイルがフォルダに保存されます。つまりCMSを使用しない従来のサイトの構築と同じなわけです。管理画面でも書き換え変更できますし、FTPで直接送ることも出来るわけです。phpを書けることは、知識のある方はデータベース情報を加工して表示したりと多彩なことが可能となります。

と言うわけで、ブログの記事以外は全て、FTP転送になってしまいました。何のためのCMSか?、悩む毎日です。


通常のページはそのまま保存されているだけ

ページフォルダにありますからページカテゴリ何でしょうが。単にリンクを貼るだけで表示できますから、標準にあるファイルを目的にあわせて書き換えるだけで良いわけですし、必要なら別途ページファイルを登録すればよいわけです。不要なら削除するかまたは、リンクを貼らなければよいわけです。
但し問い合わせ(contact)、とブログ(ブログID名)は特殊なものと扱われています。ともにリンクを貼ればよいだけです。


当方サブフォルダ main なので
<a href="/main/sitemap">サイトマップ</a>
<a href="/main/pops/index">POPSブログ</a>
<a href="/main/contact/index">問い合わせ</a>

 .ctp はつけません

大まかなレイアウトの変更

大まかなレイアウトの変更などは、レイアウトのdefult.ctp変更によって行います。defult.ctpで表示するブロック化されたエレメントという部品を表示する指定を行うだけです。
そのほかメタの設定、分岐などphp Cakephpの処理できます。

大きく変更する場合は、雌型の HTML CSS など必要ですし、BaserCMSのCSSをどこまで使用するかの検討等も必要でしょう。
問い合わせ、widgets関連 の CSS はそのまま使用したほうが無難なようです。


詳細はエレメントを変更する

エレメントは図のようにブロックごとに分かれていますので、自由にテキスト、画像、リンクなどhtmlで構成して行けばよいわけです。その他widgets機能を使用して、定形のwidgets部品を配置できます。使用者が作っても良い構成になっています。
エレメントもしかりctpファイルですから直接に、PHP、CackePHP、の記述をすることも可能です。これはctpファイル全てに共通のものです。

widgets設定使っては面倒なので、エレメントに直接スクリプト処理を記載している場合には、エラーに注意、ページによっては、データベース情報など全て完全に読み込まないときもありますし、エレメントの場所により関数にアクセスできない場合もあるようです。


画像など webroot における

画像、JS、CSS、FLASH、など、、、webroot におけるのでそこにフォルダを作って利用しています。仮に引越しの場合などに問題がでる事も予想はされますが、同じフォルダ構成にすればよい。webrootであるから簡単にアクセスされることは考えられるが、画像ごときは重要な問題では無い。
よって当サイト利用の画像などは全て webroot/images/ にある


CackePHPの影響の範囲内ならば、どこからでも簡単に取得できる
当方サブフォルダ main なので、webroot/images/xxxxx.jpg があれば
<img src="/main/images/xxxxx.jpg" />
等と、どこからでも同じパスの記載で取得できる、CSSでの記載も
background:(/main/images/xxxxx.jpg);
と全て一律の書き方でよい、絶対パスな訳ですね、JSでもFLASHでも同じ

【参考】安心できないかたは ECWorks Blog: BaserCMSテーマファイルを安全に配置する方法


グローバルメニュー

グローバルメニューおよびそのほかのサイト構成に必要なものは、管理画面で設定できるように、「親切丁寧仕様」になっていますが、メニューなるもの、単にリンクの集合体です。レイアウトのdefult.ctpに直接記述しても良いわけです。
エレメントもしかり、直接書ける要素は沢山あります。管理画面での変更は出来なくなりますが、FTPで転送すればよいだけです。全て管理画面での設定は親切ですが、合理的に出来ることと分類して効果的な作業も大事とも思います。
勿論十分なエラーチェックは必要です。phpは自動でエラー処理しますので、過大な付加をサーバーに掛けることは少ないでショウ。


当方サブフォルダ main なので
<div id="glbMenus">
<h2 class="display-none">グローバルメニュー</h2>
	<ul class="global-menu">
		<li class="first menu01"><a href="/main/index">トップ</a></li>
		<li class="menu02"><a href="/main/service">アーカイブ</a></li>
		<li class="menu03"><a href="/main/pops/index">POPSブログ</a></li>
		<li class="menu03"><a href="/main/contact/index">問い合わせ</a></li>
	</ul>
</div>
Demoのグローバルメニュー管理または、Demoのhtmlを見ればわかる
そのまま service、書くのとまたは contact/index とindex をつけるものがある

ブログのレイアウト変更は注意が必要

ブログはプラグインの形式で提供されていますので、テーマ内部にはありません。何の変更も無く使用される場合は除き、書き換える場合は注意が必要です。バージョンアップの時に上書きされて変更部分が無くなってしまいますので、それを防止する為に

「ブログプラグイン」の「defult フォルダ」をコピー、「DEMOテーマ」の「blog フォルダ」にペーストして書き換えている。

テーマ内部にあるファイルが優先的に実行されるよう出来ている。これら優先順位、保存位置の指定など決まりがありますので注意ください。


ブログレイアウトなどのファイル、baserは上書きされる恐れ」があるので
baser/plugins/views/blog/default/single.ctp
そのまま書き換えないで
baser/plugins/views/blog/default/
archives.ctp
index.ctp
posts.ctp
single.ctp
フォルダdefaultごとコピーして

現在使用しているテーマフォルダに移動
app/webroot/themed/{テーマ名}/blog/
blogフォルダの中にペーストする、以後こちらを編集する
app/webroot/themed/{テーマ名}/blog/default/single.ctp
テーマdemoで作業しているならば
app/webroot/themed/demo/blog/default/single.ctp
こちらはバージョンアップで上書きされ無いから安心

キャッシュをしないで作業する

レイアウト変更を行う際に細部をあわせるためにCSSの変更など何回も確認作業が必要です。但し、強烈なキャッシュ機能が設定されていますので、レイアウト変更などが反映されなくなります。管理画面よりキャッシュの削除はできますが、最初は設定をきって作業した方が利口です。

【参考】BasercmsのキャッシュをOFFにする

【参考】BaserCMSのキャッシュ機能をOFFにする方法


最初は戸惑いますが、これもなれでしょう。回数を重ねないと中々理解しがたい所があります。インストールの際
1 「データを読みだしてセット」する場合と、
2 「読み出さないでセットする」が選定できます。
「読み出さないでセット」するでは「初期データ」はほとんどありません、管理画面でさえ表示しない箇所もあります。いわゆる「WEB制作業者向けのインストール方法」ですね。「何も無い状態」から構築していくと、cakePHP判らずも、少しずつ見えてきますし、構造、設定方法なども直感的に理解できるようになります。面倒でもこちらを推奨します。
詳しい設定方法などはbaserCMS本家のインストール解説の中にありますのでそちら参考にしてください。


【参考】困ったときは、forum.basercms.net: baserCMSユーザーズフォーラム



[ この記事のURL ]


タグ:memo , basercms

 

ブログ記事一覧

年別アーカイブ一覧



[1]