POPSブログ

BaserCMS 2.0 テーマの制作/1

132

  Category:  basercms2012/08/06 pops 

今回、新しくなったBaserCMS 2.0を調べ、BaserCMS 2.0系のテーマの制作について考えてみました。


BaserCMS 2.0 テーマの制作 1 テーマの基本の設計

現在「BaserCMS 2.0 テーマ」「BaserCMSテーマ」の制作に関する記事は希薄です。 やっと、以下のサイトで詳細記事になった位です。プラグインを制作している方の解説ですから間違いありません。

【参考】mani-lab.com: [baserCMS2.0]テーマの基本


コーポレートサイト向けに開発されていますが、商用ですから特徴ある独自サイトとするにはそれなりのデザインなどが必要になります。テーマは1デザイン内包されていますが、それ以外のデザインにするには独自のテーマを作成しなければなりません。
「BaserCMS 2.0」は管理画面の変更だけではなく、使用的にも、テーマ作りにも効率よいように普段見えないところも色々と改良されています。
テーマ自体、規則に従い制作しますので、以下の記事は、ほぼ「上記サイト」の解説記事と同じになります。多少私なりの考察をも記述します。


● 以下、実際に複数のテーマを作っての反省を踏まえての解説ですから長くなりますこと了承ください。
● ローカルサーバーで、レイアウト、動作を「確認しながら作る作業」を想定したものです。


コーポレートサイトの第一歩は、独自のテーマ作成から始まります。


内包のテーマを利用して新たなテーマを作る

単純な話、内包のテーマ「demo」をコピーして名前をかえれば「新しいテーマ」です。100M世界記録より早いカモ。(中身同じですが)

新規のテーマを、themed 階層にUP、管理画面で新規のテーマを利用するように切り替えれば利用できる。
BaserCMSのインストール直後は、テーマ「demo」に設定されている。

  • 表示確認済みの「新しいHTMLとCSS」を用意する。新しい構造デザインになります。
  • 早急に作るなら、内包されたテーマ「demo」「skelton」を利用して改造、CSS、画像をとりかえればよい。
  • 内包されたテーマ「demo」をコピーして名前を換え中の設定ファイルを変更します。(後で詳細解説)
  • 新しいレイアウトの構造をレイアウトフォルダ内 default.php に書き込むだけです。
  • 表示するページ毎にサイドバーを切り替えたい場合は、複数のエレメントを作り条件によりエレメントを呼び出します。

色々と方法はあるが、完全な独自のHTMLとCSSを用意することが大事。早く出来上がります。


説明図


  • それぞれのブロックの幅を変えたり、取り込むサイドバーの内容を変えたりすれば画面はかわります。
  • メニュー位置、画像の大きさなどもレイアウトできますし、条件により位置変更も可能です。
  • 最初の表示である、TOPページ、その外のページ表示の場合、と多少違わせることが多いようです。
  • これは、レイアウト(default.phpの設計)とCSSで如何様にも設計可能です。
  • widgetsは、BaserCMS特有の定格の出力機能を登録しておき呼び出して使用します。(カレンダーなど、、)

ここでは、ローカルにインストールしているBaserCMS2.0(バージョン2.03)に「独自のHTMLとCSSを事前に用意」しておき、テーマ「demo」をコピーして書き換える方法を取ることにします。

  • 説明上、サブデレクトリ main とします。
  • 新テーマ名を popsline とします。ブログIDはそのまま news とします。
  • BaserCMS2.0はローカルにインストールされた初期の状態とします。(記事など削除してないないそのまま状態)
  • サイト名の変更、必要な設定作業などをしていても問題は起きません。
  • BaserCMSのキャッシュ機能は「OFF」になるように事前に変更しておく。管理画面よりキャッシュを削除しておく。
    (キャッシュOFFで無いと作業途上の html.css 等の変更が反映されなく、何倍もの時間がかかる。)
  • ローカルでの作業ですから、Analytics設定、Google地図機能はまだ設定しないこと。
  • テーマ「Demo」での出力htmlを保存しておく。後でブログ、WidgetsのCSS設定に役に立つ。

私の場合、フリーソフトの「CCleaner」を使用してブラウザ履歴など削除しながら進めています。


● キャッシュ機能「OFF」にする
中ごろに以下の記述があります。時間を設定なし '' にしてください。テーマの作成が終了したら元の設定にもどします。


baser/config/baser.php

/**
 * キャッシュ設定 
 */
	$config['BcCache'] = array(
		// 標準キャッシュ時間
		'defaultCachetime'	=> '1 month',
		// モデルデータキャッシュ時間
		'dataCachetime'		=> '1 month'
	);

キャッシュを切り、常にブラウザ履歴をクリアして、確認することが大事です。


説明図

図では、テーマ「demo」を利用してテーマ「poposline」を作り配置した例である。



テーマ「demo」をコピーして新たなテーマを作る準備

1. テーマ「demo」をどこかにコピーして、フォルダ名を新規の名前(popsline、識別されるなら何でも良い、通常サイトの名前、会社の名前などが多い)に変更します。
2. 新テーマ「popsline」の css を全て削除して、新たな poposline.css をいれます。背景画像URLは images/xxxx.gif等と変更します。(勿論、CSSの名前は何でもよい)
3. 新テーマ「popsline」の css 内部 images フォルダの背景画像を新たなものに取替えます。(必要なら残してもよい、背景画像用のものは必ずここに収容)
4. 新テーマ「popsline」の img フォルダの画像を新たなものに取替えます。(大型画像以外はなるべく背景画像で処理したほうが良い、画像設定が簡単)
5. TOP(HOME)のレイアウト変更をするのであれば、後で処理するので最初は行わない。(最初top.css等は無効にする。間違いがおきやすいので後で修正する。十分に理解できる場合はこの限りではない)
6. import.css は最初使用しない。十分に検討してから必要に応じてCSSを分離して利用するようにする。

一応同じデザインだが名前の違う「テーマ」が簡単に出来ることになる。Html.CSSを変えれば違うものにかわります。


新しい html と css を用意する (動作確認完了済みのもの)

基本的にはどのようなデザイン、レイアウト、構造でも可能です。「新しい html と css」がなければ出来上がるまで数倍の時間を要しますのでご注意ください。(他の人のCSS(demo)を修正してデザイン変更構築作業は非効率的です)

1. html構造を default.php に取り込んで修正して行くことになります。下記サンプルdefault.phpリスト参照。
2. css は css 階層にいれます。背景画像のパスを修正します。
3. js は js 階層にいれます。はじめは機能させないほうが良いでしょう。
4. ブログ(news)、問い合わせの画面ではシステムで自動でCSSが設定されますので少し乱れるところがあります。あとで修正すれば正常になります。
5. グローバルメニューは使用せず、同等のメニューを手書きで挿入する方法をとります。


● CSS記載の背景画像のURL変更


通常の背景画像CSS
background:url(../images/xxxxx.gif);

テーマの背景画像CSS
background:url(images/xxxxx.gif);

CSSからみた画像の位置。/main/等入らないから汎用性があるということです。


テーマとして機能させるための、関連ファイルの修正とUP

1.テーマフォルダ内の config.php を編集しなおす。適当な名前などを書き込む。
2.テーマフォルダ内の VERSION.txt を2.0.0に変更。
3.テーマフォルダ内の screenshot.png 300x240サイズ画像を新たな画像に上書きする。画像がまだない場合は適当な画像をいれておく。
4.全ての作業が終えたら、テーマ収納階層である themed にUPする。(demo skeltonと同じ場所)


config.php

製作者のそれぞれの名前などで修正、上書きする。


<?php
$title = 'PopsLine';
$description = 'BaserCMSテーマ';
$author = 'pops';
$url = 'http://pops-web.com';
?>

VERSION.txt

動作するBaserCMSバージョンを記入、上書きする。


2.0.0

テーマの詳細の制作


管理画面よりテーマを切り替える

1. 管理画面を起動して、プラグイン管理よりテーマを切り替える。新しい名前のテーマが適用されたらOK。
2. 管理画面、固定ページ管理にゆき固定ページが正常であるか確認する。(indexページに異常がある場合あり。ここではまだ修正しない。今は単にページの中の文字が表示できれば良い)
3. 管理画面、デバックモードを「1」にする。「2-3」 にしてもcakephp専門知識がなければわからない。素人には無意味だ。
4. 管理画面、「キャッシュの削除」でキャッシュを削除する。(PHPのキャッシュ機能は強烈です)
5. 管理画面を終了する。まだ新規のレイアウト(default.phpの修正)を行っていないので「TOPページ」などは表示しないこと。


レイアウトは単に「新しい独自HTML」のブロック構成をするだけ。


一般的画面の構成

  • HTML表示画面の構成はほとんどが、大まかなブロックで「上、中、下」に分かれた構成になります。DIV要素で構成されています。作る人によりIDの名前(クラスの時もある)が違うくらいです。
  • デサインに拠り、サイドバー、メニューなどが挿入されていますが、ほとんどがリンクの集合体です。必要なものは手書きで挿入すればよいわけです。BaserCMS独自の関数にもリンク付きのリストを出力機能があります。
  • CMSではそれぞれ「独自の関数」で簡単に機能、リンクなどが埋め込めるよう工夫されています。BaserCMSではまとまった機能が「widgets」として提供されています。通常は sidebar.php などのエレメントの中で「widgetsを呼び出す関数」を書いて使用されます。(どこででも呼び出し可能ですが)
  • 固定ページ、ブログ記事は何処でも出力できますが通常は、中央に配置するのが常識です。表示させたい部分に「BaserCMS独自の関数」を書くだけです。
  • これらの作業は default.php を修正することにより変更できます。オリジナルデザインのテーマを作る、すなわち構成とCSSを変える作業を行うことです。

説明図

● BaserCMSのレイアウトとページとの関係

  • ほとんどの場合、記事などの本文部分は中央に挿入するよう設計します。指定位置に、固定ページまたはブログ記事本文が挿入されます。(これらは自動で行われますから、意識する必要はありません)
  • 固定ページの中で php の記述が可能です。ブログ記事本文では php の記述はできません。

テーマ「demo」のHTML構造


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
	タイトル、メタ、CSS読み込みなどが行われる
</head>
<body>

	<div id="page">

		<div id="header">
		</div>

		<div id="contents">
			<div id="alfa">
				本文挿入箇所
			</div>
			<div id="beta">
				サイドバーエレメント
			</div>
		</div>

	<div id="footer">
	</div>

</div>
</body>
</html>

---------------------------------------
注意、テーマ「demo」では、この部分(#beta)はサイドバーエレメントの中にある

	<div id="beta">
		サイドバーエレメント
	</div>

注意、<div id="beta" > はサイドバーの中にあります。#alfa本文挿入箇所を広げやすい構造がとられています。新たにサイドバーを作る場合は、設計構造に応じて(本文、サイドバー部分の幅を決めておく場合など)サイドバーの中を修正しなければなりません。


独自のHTML(とCSS)を用意する (最重要なことです)

1. 構造はdefault.phpに記載される。
2. 本文部分は固定ページの index.php、在るいはその外のページ用 php に記載される。
3. サイド部分は、エレメント sidebar.php などに記載される。(ページ毎にサイド部分を切り替えたい場合は sidebar2 sidebar3 なり、エレメントを増やしておけばよい)
4. header hooter をエレメントに分離するか、分離しないで default.php に記載するかは自由である。


HTMLの大まかな例(簡略)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>POPS</title>
	<link rel="stylesheet" type="text/css" href="css/popsline.css" />
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
	<div id="wrap">
		<div id="header">
			headerの内容(headerの詳細要素がくる部分)
		</div>
		<div id="contents">
			<div id="main">
				mainの内容(固定ページまたはブログの内容が表示される部分)
			</div>
			<div id="side">
				sideの内容(sidebarエレメントがくる部分)
			</div>
		</div>
		<div id="footer">
			footerの内容(footerの詳細要素がくる部分)
		</div>
	</div>
</body>
</html>

DIV構造と、その中に直接色々な要素を書き込むか、あるいはエレメント化する範囲などは、使用者の設計上の判断によります。


レイアウトの default.php を編集修正する (新しいHTML構造の配置作業)

独自のHTMLに従い、構造部分、メタ部分、条件分岐、を修正する作業である。メタ部分はほとんどそのまま使用することが多いと思われる。

1. import.css は最初使用しないので、新しい popsline.css にリンクするように修正する。
2. body 部分を新たな構造に書き換える。サイドバー(sidebar.php)は新たなHTML状況にあわせて修正。
3. ページによりサイドバーを変えたい場合でも、最初は処理しないで全体の状況を確認するだけにする。
4. top.css は読み込んでも処理しないようにするため、top.css の中身は「空」にしておく。
5. TOPページに進み表示されるか確認する。正常でなければ、HTMLタグの書き方、CSSを再確認して間違いを修正する。
6. ブログ表示時はブログのCSS、問い合わせの場合はコンタクトのCSSが自動で読み込まれますので少し違いが出る場合があります。
7. JSを利用する場合は、最初使用しないようにしておき、レイアウトなどが完全になってから使用したほうが良い。(問題がおきた場合原因がつかめなくなる)
8. サイドバーが右か左かにより、原則 html の書き方順序をかえます。(CSSで強制的に変える方法もありますが、ブラウザにより正確に配置出来ない場合があります)
9. header hooter をエレメントにするしないは、設計などの状況によりますが通常はエレメント化は省略できます。(header hooter の内容を直接かけばよい)

ページを確認しながら修正してゆきます。1度つくれば状況の判断が容易になりますから、2度目は早くなります。


default.phpの例 (header hooterをそのまま記載)。構造中心のもので細部省略


<?php
/**
 * デフォルトレイアウト
 */
?>
<?php $bcBaser->xmlHeader() ?>
<?php $bcBaser->docType() ?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<?php $bcBaser->charset() ?>
<?php $bcBaser->title() ?>
<?php $bcBaser->metaDescription() ?>
<?php $bcBaser->metaKeywords() ?>
<?php $bcBaser->icon() ?>
<?php $bcBaser->rss('ニュースリリース RSS 2.0', '/news/index.rss') ?>
<?php $bcBaser->css(array('popsline')) ?>
<?php if($bcBaser->isHome()): ?>
<?php $bcBaser->css(array('top')) ?>
<?php endif ?>
<?php $bcBaser->js(array(
	'jquery-1.7.2.min',
	'startup'
)) ?>
<?php $bcBaser->scripts() ?>
<?php $bcBaser->element('google_analytics') ?>
</head>
<body id="<?php $bcBaser->contentsName() ?>">

<!-- begin page -->
<div id="wrap">

	<!-- begin header -->
	<div id="header">
		<!-- H1 TITLE -->
		<h1><?php $bcBaser->link($bcBaser->siteConfig['name'],'/main/') ?></h1>

		<!-- #main-image -->
		<div id="main-image">
			<?php if($bcBaser->isHome()): ?>
			<?php $bcBaser->img('/img/top_image.jpg',array('alt'=>'POPS-TOP','border'=>'0')) ?>
			<?php else: ?>
			<?php $bcBaser->img('/img/top_image2.jpg',array('alt'=>'POPS-TOP','border'=>'0')) ?>
			<?php endif ?>
		</div>
		<!-- /#main-image -->

		<!-- #mainmenu -->
		<div id="main-menu">
			<ul>
			<li><a href="/main/">ホーム</a></li>
			<li><a href="/main/about">会社案内</a></li>
			<li><a href="/main/service">サービス</a></li>
			<li><a href="/main/news/index">新着情報</a></li>
			<li><a href="/main/sitemap">サイトマップ</a></li>
			</ul>
		</div>
		<!-- /#mainmenu -->

		<!-- #navigation -->
		<div id="navigation">
			<p><?php $bcBaser->element('navi',array('title_for_element'=>$bcBaser->getContentsTitle())); ?></p>
		</div>
		<!-- /#navigation -->

	</div>
	<!-- end header -->
	
	<!-- begin contents -->
	<div id="contents">
	
		<!-- begin main -->
		<div id="main" >
		
			<!-- begin contentsBody -->
			<div id="contentsBody">
				<?php $bcBaser->flash() ?>
				<?php $bcBaser->content() ?>
				<?php $bcBaser->element('contents_navi') ?>
			</div>
			<!-- end contentsBody -->
			
		</div>
		<!-- end main -->

		<!-- begin side -->
		<div id="side">
			<?php if(!$bcBaser->isHome()): ?>
			<?php $bcBaser->element('sidebar') ?>
			<?php else: ?>
			<?php $bcBaser->element('sidebar2') ?>
			<?php endif ?>
		</div>
		<!-- end side -->
	</div>
	<!-- end contents -->

	<!-- begin footer -->
	<div id="footer">
		<p>SITE-NAME</p>
	</div>
	<!-- end footer -->

</div>
<!-- end wrap -->

<?php $bcBaser->func() ?>
</body>
</html>

ヘッダー部 #main-image では大きな画像、小さな画像を切り替えるよう想定しての記述をしています。


phpコードを一時的に実行させたくない場合


/* */ で囲み一時的にメモの状態にする
<?php /*$bcBaser->element('google_analytics')*/ ?>

基本的には「cakephpコード」で書くべきですが。「phpコード」で書いても犯罪ではありません。


TOP(HOME)の場合追加CSSを読み込む。TOPページのみレイアウトを変えたい場合。


<?php if($bcBaser->isHome()): ?>
<?php $bcBaser->css(array('top')) ?>
<?php endif ?>

cakephp的コードとphp的コード


この書き方と
<?php if(!$bcBaser->isHome()): ?>
<?php $bcBaser->element('sidebar') ?>
<?php else: ?>
<?php $bcBaser->element('sidebar2') ?>
<?php endif ?>

こちらの書き方は同等である
<?php
if(!$bcBaser->isHome()) {
	$bcBaser->element('sidebar');
} else {
	$bcBaser->element('sidebar2');
}
?>

<head>部はテーマに関わらず、ほとんど定格な記述です

テーマ「Demo」のコードがそのまま利用できます。出力のHTMLを見れば何をしているか一目瞭然です。
CSS.JSの追加がある場合などに修正する程度です。


* $bcBaser->xmlHeader()、<?xml version="1.0" encoding="UTF-8" ?>出力
* $bcBaser->docType()、DOCTYPE出力
* $bcBaser->charset()、<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />出力
* $bcBaser->title()、タイトル出力
* $bcBaser->metaDescription()、Description出力
* $bcBaser->metaKeywords()、キーワード出力
* $bcBaser->icon()、アイコン出力
* $bcBaser->rss('RSS名', 'rss')、RSS出力
* $bcBaser->css(array('CSS名'))、CSS出力
* $bcBaser->js(array(('JS名'))、JS出力
* $bcBaser->scripts()、CSSやjavascriptをレイアウトテンプレートに出力
* $bcBaser->element('google_analytics')、Analytics出力

関数は下記の開発元「関数リファレンス」を参照ください

【参照】basercms.net: baserCMS 2系関数リファレンス


default.php の修正保存のあと、実際に表示してみます

完全では無いかも知れませんが、一度実際に表示して見ましょう。

1. CSSの読み込みが悪ければテキスト表示のみで、レイアウトなりません。
(途中から狂う場合はCSSの記述ミス、保存コード間違いの時もある)
2. php(cakephp)の決定的エラーの場合は画面は真っ白になります。
3. php(cakephp)の軽微なエラーの場合はそのエラー箇所以降を表示しません。
4. レイアウトが崩れたり、カラム落ちがあるなどは、HTMLの書き方の間違いです。
5. ブログ、ページの内容は完全にCSSが修正されていませんので多少みだれます。

ほとんどが記述ミスです。よく確認してください。

特に「 . , : ; ''」等に間違いが無いか確認します。大概この辺が原因です。完全にFooterを表示するまで確認修正します。


● body拠り前の部分は、テーマ「demo」のコードをコピー&ペーストでパス部分のみ修正すれば大概動きます。
● 初めての場合、body部分は少しずつコードをいれては表示確認していった方が良いです。エラーの場合の判断が出来なくなります。


● 初めて作る場合に、少しずつ修正してゆく例


前は略する

<body id="<?php $bcBaser->contentsName() ?>">
<div id="wrap">
	<div id="header">
		タイトル部分
		<div id="main-image">
			画像部分 ●確認しながらブロック単位でコードをかいて行く
		</div>
		<div id="main-menu">
			<ul>
			<li><a href="/main/">ホーム</a></li>
			<li><a href="/main/about">会社案内</a></li>
			<li><a href="/main/service">サービス</a></li>
			<li><a href="/main/news/index">新着情報</a></li>
			<li><a href="/main/sitemap">サイトマップ</a></li>
			</ul>
		</div>
		<div id="navigation">
			パンくず部分
		</div>
	</div>
	<div id="contents">
		<div id="main" >
			本文部分
		</div>
		<div id="side">
			サイド部分
		</div>
	</div>
	<div id="footer">
		フッター部分
	</div>
</div>
</body>

エラー異常が無ければ「文字」は表示される。ブロックごとに少しずつコードなりを書いてゆく。間違い箇所もわかるし最初の場合は返って効率的です。慣れればどのような方法でも良い。一気に全部書くことも可能になります。


デザイン、構成の全ては「独自のCSS」の仕上がり次第になります。


CSS JS IMG の読み込み

規定のフォルダにCSS JS 画像を収容しておき、BaserCMSのヘルパーを使用して読み込む。 BaserCMS移動しても、自動でパスが与えられるので修正の必要がない。テーマとしての絶対的な条件である。


<?php $bcBaser->css(array('xxxxxxxxx')) ?>
<?php $bcBaser->js(array('xxxxxxxxx')) ?>
<?php $bcBaser->img('/img/xxxxxx.jpg',array('alt'=>'XXXXXX','border'=>'0')) ?>

--------------------

たとえば、下記の書き方で出力は同じだが
<?php $bcBaser->img('/img/xxxxxx.jpg',array('alt'=>'XXXXXX','border'=>'0')) ?>
<img src="/main/themed/popsline/img/xxxxxx.jpg" alt="XXXXXX" border="0" />

Htmlで直接書くと、BaserCMS設置階層が main に限定されてしまう。テーマとしては未完成になる。
但し、自分のところで限定して使用するならば問題は無い。

グローバルメニュー

「グローバルメニュー」はリンク名とパスを登録しているものをリスト形式で出力するだけの機能である。むしろ独自に書いたほうが利便性がある。HTMLを書けばよいだけだから簡単である。
「メニュー」は直接 default.php に書くか、在るいはエレメント化しておいて呼び出すなどは自由である。フッタ-部に設置するのも同様の手順である。


「グローバルメニュー」を使用する場合は、事前に管理画面で登録しておき、下記のようにする。

頒布目的のテーマなら必要ですが、通常のテーマ作成には、目的に合わせて「直接手書き」したほうが便利です。エレメントに分離したければエレメント化して呼び出せば良い。BaserCMS開発者も「直接手書き」を奨励しています。


<?php $bcBaser->element('global_menu') ?>

上記、default.phpでは、「グローバルメニュー」を使用せず別の名前で直接かいてある。


独自のメニュー。(HTMLで直接かいているだけ)


メインメニュー
<div id="main-menu">
	<ul>
	<li><a href="/main/">ホーム</a></li>
	<li><a href="/main/about">会社案内</a></li>
	<li><a href="/main/service">サービス</a></li>
	<li><a href="/main/news/index">新着情報</a></li>
	<li><a href="/main/sitemap">サイトマップ</a></li>
	</ul>
</div>

フッターメニュー
<div id="hooter-menu">
<a href="/main/">ホーム</a> | <a href="/main/about">会社案内</a> | <a href="/main/service">サービス</a> | <a href="/main/news/index">新着情報</a> | <a href="/main/sitemap">サイトマップ</a>
</div>

画像を挿入する場合の例
<a href="/main/"><?php $bcBaser->img('/img/xxxxxx.gif') ?></a>
上記URLは、サブフォルダ main 階層にBaserCMSを設置した場合である、サブフォルダがない場合は / で良い

1.body拠り上の、メタ部分などはテーマの記載そのままである。標準的な書き方といえる。
2.エレメントに分割するかなどは自由である。default.php に書けるだけ書いても良い。エレメントに分割すればエレメントを修正すれば良いという利便性があるだけ。
3.条件分岐はページ毎の判定などが多いとおもいます。BaserCMS2.0からは、判定のためのヘルパーが多くなっています。
4.ctpファイルが無くなり、phpに変更になりましたから、多少前より安心してコードを書けます。
5.sidebar.phpは少し多くエレメントにしておき状況に応じて使用すれば便利です。


サイドバーエレメントは基本的には「手書きリンク」の集合体です。


● テーマ「demo」のサイドバー

<div id="beta">がサイドバーの中にあるのがわかりますね。


<?php
/**
 * サイドバー
 */
?>
<div id="beta">
	<?php if(!empty($widgetArea)): ?>
	<?php $bcBaser->element('widget_area',array('no'=>$widgetArea)) ?>
	<?php endif ?>
</div>

構成の方法に違いがある場合は <div id="beta"> を削除して中のコードだけにする。
テーマ「demo」と同じような手法を取るなら、#beta を #sideなり使用する名前にすればよい。


● サイドバーの例

例では、リンク表示、画像表示、widgets登録番号2の表示、を書き込んでいる。#beta は削除。
エレメントは幾つでも作れます。


<?php
/**
 * サイドバーエレメント
 */
?>

<h2>内部リンク</h2>
<div class="side-box">
	<ul>
	<li><a href="/main/about">会社案内</a></li>
	<li><a href="/main/service">サービス</a></li>
	<li><a href="/main/news/index">新着情報</a></li>
	<li><a href="/main/sitemap">サイトマップ</a></li>
	</ul>
</div>
<br />
<h2>お世話になっているサイト</h2>
<div class="side-box">
	<ul>
	<li><a href="http://keisatuda.com/maido">警視庁捜査1と4分の1課</a></li>
	<li><a href="http://toritate.com/hayoharawanka">税務署督促課</a></li>
	</ul>
</div>
<br />
<div class="side-box">
	<?php $bcBaser->img('/img/xxxxxx.gif') ?>
</div>
<br />
	<?php $bcBaser->element('widget_area',array('no'=>2)) ?>
<br />

サイドバーはほとんどがリンク。そのまま書けばよい。登録Widgetsも取り込める


サイドバーエレメントへの Widgets の取り込み

エレメントはサイドでの使用とは限りませんが、Widgets で登録したものを表示させることが多いと思います。下記のようにWidgetsの登録番号を使用して簡単にとりこめます。出力をみてCSSの修正が必要です。


<div>
独自の内容など
</div>
<br />
<?php $bcBaser->element('widget_area',array('no'=>1)) ?>
<br />
<?php $bcBaser->element('widget_area',array('no'=>2)) ?>
<br />

エレメントの取り込み

エレメントは自由につくれます。エレメントフォルダに収容しておきます。エレメントとは言っても実態はHTMLに過ぎませんが、phpの記述をすることができます。



何らかのエレメント名で保存しておく

<?php
/**
 * エレメント
 */
?>
<div>
必要なHTMLなどを書く

php書き込み可能、別のエレメントをよみこんでいる
<?php $bcBaser->element('xxxxxxxxxxxxxx') ?>
<br />

Widgetsを読み込んでいる
<?php $bcBaser->element('widget_area',array('no'=>1)) ?>
<br />
</div>

-------------------

呼び出し
<?php $bcBaser->element('エレメント名') ?>
<br />

メニューのエレメント化

メニューに限ったものではないが、表示するものは全てエレメント化出来る。色々な場面で使用したい場合はクラスにしたほうが良い。
別の「グローバルメニュー」がほしいなんて悩んでる必要はない。「メニュー」でも「サイドバー」でも自由に作る事ができます。エレメントフォルダに保存して表示したい所で呼び出すだけ。


<?php
/**
 * エレメントmenu
 */
?>

<div class="menu">
	<ul>
	<li><a href="/main/">ホーム</a></li>
	<li><a href="/main/about">会社案内</a></li>
	<li><a href="/main/service">サービス</a></li>
	<li><a href="/main/news/index">新着情報</a></li>
	<li><a href="/main/sitemap">サイトマップ</a></li>
	</ul>
</div>

header footer のエレメント化

上記の default.php では直接かいていますが、エレメントにして分離しても良いわけです。(テーマDemoではエレメント化している)
<div id="header">内容</div> 、全てをエレメントにするか「内容」のみをエレメントにするかなどは使用者の判断によります。当然 default.php の書き方も違ってきます。
その場合はエレメント階層に header.php footer.php で保存します。



header footer に限り、エレメントになっている場合は、次ぎのように呼び出せる。

<?php $bcBaser->header() ?>
<?php $bcBaser->footer() ?>

BaserCMS2.0拠り追加されたメソッド

前よりページの判定などがしやすくなりました。以下のメソッドを有効利用しましょう。
これらの情報を旨く利用して条件分岐させ、エレメントを挿入したり、CSSを読み込んだりさせて好みの形に仕上げてゆきます。確定した条件分岐等の書式はありませんので判定方法など使用者が考えて使用します。


* $bcBaser->isHome()
* $bcBaser->isPage()
* $bcBaser->getHere()
* $bcBaser->isCategoryTop()
* $bcBaser->page()
* $bcBaser->isBlogHome()
----------------------------------------

以前から在る下の関数も使用できます
  $bcBaser->contentsName() 

基本的に分岐の方法はアイデア次第です。決まりはありません。


getHere()を利用してサイドバーを変える

新たなメソッドgetHere()を利用してサイドバーを変える場合は次ぎのようになる。(getHere で得られた文字列を / で分解して配列にいれ、文字で判定して分岐しているだけです)
layouts の default.php に埋め込んで使用すれば良い。elements に sidebar.php 等が在るものとする。
(下の例は、switch文を使用するため記述が長い。if、else if、文だけで書くのも個人の自由です。isCategoryTop等で細かく判定するのも自由です。)


default.phpへの挿入例/Errorの場合は空のエレメントを表示するを追加

<>
<!-- begin contents -->
<div id="contents">
	
	<!-- begin alfa -->
	<div id="main" >

	記事挿入部分

	</div>
	<!-- end main -->
	<!-- begin side -->
	<div id="side" >

		<?php
		$no = 0;

		$url_datas=explode("/",$bcBaser->getHere());/*sliceは使えないexplodeを使うこと*/
		$d = $url_datas[1];

		if ($bcBaser->isHome()) {$no = 1;}
		if ($d == 'about' || $d == 'service' || $d == 'sitemap') {$no = 2;}
		if ($d == 'contact') {$no = 3;}
		if ($d == 'news') {$no = 4;}
		if ($d == 'content') {$no = 5;}
		/*Errorの場合は空のエレメントを表示する*/
		if ($bcBaser->contentsName() =='Error') {$no = 6;}

		switch($no){
			case 0:
				$bcBaser->element('sidebar');
			break;
			case 1:
				$bcBaser->element('sidebar');
			break;
			case 2:
				$bcBaser->element('sidebar2');
			break;
			case 3:
				$bcBaser->element('sidebar3');
			break;
			case 4:
				$bcBaser->element('sidebar4');
			break;
			case 5:
				$bcBaser->element('sidebar5');
			break;
			case 6:
				$bcBaser->element('sidebar6');
			break;
			default:
			$bcBaser->element('sidebar3');
		}
		?>

	</div>
	<!-- end side -->
</div>
<!-- end contents -->

注意、サブフォルダを main としての例です。サブフォルダ構成等を変更した場合は「テスト出力」して決定すれば間違いは起きない。getUrl()を利用することも可能です。ページ毎にCSSを変える場合の判定にも応用できます。

【参照】当方の記事: BaserCMS 2.0、ページ毎にサイドバーを変える


テーマ「demo」の default.php をよく見ましょう。CakePHPが判らなくとも多少理解できます。


その外の要素の追加

上記の説明は基本的な構造だけですから、「検索窓」「パンくずリスト」などはテーマ「Demo」の出力HTMLまたは default.php を参考に必要に応じ追加していきます。


body 要素のIDについて

body要素 に対してページ毎に違うID名があたえられますので。それを利用してCSSを変更させるなどの処理を行います。
JSでページ毎に処理を変えたい判定にもつかえます。ページ毎に出力を確認して利用ください。


<body id="<?php $bcBaser->contentsName() ?>">

TOP(HOME)の場合、"Home"の文字列が入る、つまり #Home である

ページ毎に専用の追加CSSを読み込んだほうが、上書きできますからCSSの書き方は簡単になります。


使用例
[注意]、書き方次第では認識しない場合もありますから、認識機能するか確認して使用すること。


#main {
	width:600px;
}

#Home #main {
	width:800px;
}

404エラーなどの時の処理について

使用者が独自にphp等追加した時の現象と対処についての個人的な考えです。独自php追加は使用者責任です。

無意識的にURLを間違えた場合はともかく、不正にファイルなどにアクセスすれば、システムはエラー処理に進みます。Widgetsで登録しているものは大丈夫ですが、独自にエレメントなどにphpを書いた場合などはエラーになる場合があります。
バージョン2.0拠りエラー処理なども変わったようですが、エラーの場合は途中処理を簡略して表示に進んでいるようで、独自に書いたphp部分、新しい「テーマヘルパー」は未設定状態のようですからアクセスすればエラーになります。表示途中でphpスクリプトエラーでストップします。HTMLがそこで途切れることになります。
使用者が独自に書くphpコードはエラーにならないよう判定してから処理すべきは当然のことですが防ぎ切れない場合もあるようです。

無視してもよいのですが「404エラー」などの時システムは、"Error"を吐き出します。


<body id="<?php $bcBaser->contentsName() ?>">
つまり
<body id="Error">
となり文字列"Error"が出力されますのでこれを判定にもちいればよい
つまり、以下のように回避させる

if ($bcBaser->contentsName() !='Error') {
	処理を書く、Errorのときは処理されない。
}
-----------------------------

その外、Widgetsを登録していれば、エラー時emptyになりませんので
if(!empty($widgetArea)) {
	処理を書く、相乗りしてWidgetsに関係ない処理も書く
}
大概Widgetsを登録していますから、判定に使用できそうです
私は、BaserCMS2.0以前はこれを使用しました

サイドバーエレメントにphp処理を書くことが多いので、私の場合は、"Error" 時サイドバーエレメントに空のsidebar.phpを配置しました。(ほとんどサイドバーに書いてるから処理が省ける)
Widgets以外でのコードの記述は色々な条件でためして、処理できない「エラー」を除きます。
php.cakephpでの書き換えなどは、完全な技術的資料及び解説があるわけではありませんので、使用者の責任で行います。


各ページなどのリンクさせる、「URL」には規則性があります。


ブログ、ページなどえのアクセスURLについて

メニューなどでアクセスする場合はパスは次ぎのようになります。規則性があります。
但し、サブフォルダ main に設置した場合の例です。サブフォルダがない場合は / になります。ブログID名は初期 news になります。

1. TOPまたはHOME、/main/ または /main/index
2. 固定ページ(about)、/main/about
2. 固定ページ(service)、/main/service
2. 固定ページ(sitemap)、/main/sitemap
2. 問い合わせページ、/main/contact/index
3. 固定ページ.カテゴリ.インデックス、/main/カテゴリID名/index
4. 固定ページ.カテゴリ.xxxxxページ、/main/カテゴリID名/xxxxx
5. ブログ.インデックス、/main/ブログID名/index
6. ブログ.記事、/main/ブログID名/archives/記事番号
7. ブログ.カテゴリ、/main/ブログID名/archives/category/カテゴリ名
8. ブログ.タグ、/main/ブログID名/archives/tag/タグ名
9. ブログ月別(2012年5月)、/main/ブログID名/archives/date/2012/05
10. ブログ年別(2012年)、/main/ブログID名/archives/date/2012


indexを略した場合はindexを表示。該当なしの場合は「404エラー」になります。

cakephpの規則に従い、webrootの出力 index.php からの絶対指定になっています。
画像などは指定するURLに画像(またはファイルなど)があれば表示します。webroot以下の層には直接アクセスできません。


WidgetsなどのCSS修正

問い合わせページ、ブログ記事、widgetsを表示させた場合に表示が狂うことがありますので、出力のHTMLをみてCSSの修正を行う必要があります。

1. Widgetsで登録したものを表示させた場合、.widget .widget_area 等クラスの在る形で出力されますので、CSSを修正します。
2. ページ、ブログ記事表示ブロックに、<div id="contentsBody">など挿入した場合などには、テーマ「demo」のCSSを参考に修正します。
3. テーブルを使用している部分、aboutページ、問い合わせページ、は初期のテーブルに関するCSS設定を調整します。
4. 検索窓、ページのトップに戻る、などを配置した場合にもテーマ「demo」のCSSを参考に修正します。

用意するHTML、CSSが問題ないなら「レイアウト」は簡単です。ただ細部のCSS調整が時間がかかりますので、確認のブラウザの履歴を削除してよくCSS変更を確かめてください。


実際の widgets 出力のHTML例 (カテゴリー一覧)


<div class="widget-area widget-area-2">
	<div class="widget widget-blog-categories-archives widget-blog-categories-archives-1 blog-widget">
		<h2>カテゴリー一覧</h2>
		<ul class="depth-1">
		<li><a href="/main/news/archives/category/release">プレスリリース(13)</a></li>
		<li><a href="/main/news/archives/category/notice">案内 お知らせ(0)</a></li>
		</ul>
	</div>
</div>

widget-areaクラス、widgetクラスを旨く新しいCSSに合うように修正すること。


CSSの分割

CSSを分割してimport.css に記載するかは使用者の自由です。サイト規模あるいは構成、癖などで違いがあるとおもいます。小さなサイトなら分割しなくとも良いとおもいます。


オリジナルトップ画面の構成

オリジナルトップ画面とは言っても、単純にはサイドを表示させないで、コンテンツ画面を広げることが多い。top.cssを読み込ませてCSSを変更するのが一般的です。この作業は最後に行ってください。

1. トップ画面のコンテンツページは、index.php になります。構成は自由です。
2. サイド表示の、DIV構成を考慮して、好みの画面になるようにCSSを追加、修正します。(標準ではsidebar.php に #beta 要素があることに注意。構成に邪魔なら書き換える。)
3. JSの操作などがあれば、JSを読み込み動作を確認する。


BaserCMSは関数が少ないが、JSで補完できる事もあります。アイデアです。


JS追加の注意

1. jQueryを標準で読み込む設計になっています。また標準でブログでは jquery.colorbox-min.js を読み込む設計になっています。
2. 必要に応じて common.js など作り「小物のJS」を動作させれば便利です。
3. バージョン違いの jQuery を複数読み込むことは避けてください。知識が無いと誤動作します。標準で読み込むjQueryのバージョンで完全動作するJSを使用することです。
4. JS の追加に伴い、該当の JS を読み込むように default.php を修正します。
5. CSS は必ず、jQuery の前に読み込みます。jQuery で動作する JS、jQueryプラグインは jQuery のあとで読み込みます。順序が違った場合は動作の保障はありません。
6. jQuery 以外の「javascriptライブラリ」の読み込みは控えてください。干渉しないように設定をしないとどちらも誤動作します。
7. 複数の JS を同時に使用した場合にはページ動作が重くなります。伴い CSS も増えますのでページ動作を確認して使用ください。


書き出された、固定ページの内容例

head部メタタイトル情報、Description情報、ダイレクト編集用のページ番号などが書き出されています。


<!-- BaserPageTagBegin -->
<?php $bcBaser->setTitle('インデックス') ?>
<?php $bcBaser->setDescription('インデックス') ?>
<?php $bcBaser->setPageEditLink(1) ?>
<!-- BaserPageTagEnd -->

<div class="page">
こちらが登録した、固定ページの内容です。
上のコードはBaserCMSによって書き出されたものです。
</div>

用意した新しいHTMLに本文部分の記事などある場合

固定ページのindex.php(他のページでも良い)等に移して表示を確認します。


新しいテーマが完成したら

固定ページの表示、ブログ記事の表示を行い、CSSの変更、追加があれば修正して完成させます。
キャッシュ、デバックモードの変更を元に戻します。


テーマ制作の注意点とまとめ


注意点

1. サイドバーに、Widgetsなど表示する場合、旨くCSSが機能しない場合がありますので、出力html等を参考にCSSの修正が必要です。
2. 問い合わせ画面でも同様ですが、こちらは余り変更しないほうがベターと思います。CSSはbaser階層には在りません。
3.画像は2箇所にありますから、なるべく背景画像として利用したほうが管理が簡単です。
4. 最初はテーマの制作の規則で作り、理解できたら状況に応じアレンジしたほうが良い。(色々な方法がある)
5. ローカルでは色々なアプリが動いていますので処理が遅くなりがちですが、実際のWEB環境では早くなります。
6. 標準の demo の sidebar.php には ID #beta がありますので注意。構造によっては修正が必要です。


テーマ構成順序と、コツさえつかめば、2回目以降は拠り早く制作できるようになります。


2-3回作業すれば、default.php も簡単に修正できるようになります。一番重要なのは、動作及び表示の確実な「基本のHTML.CSS」を用意することにあります。


次回は非標準的なテーマのアレンジについて記述します。


以上、標準的なテーマ作成の個人的見解です。



[ この記事のURL ]


タグ:basercms2 , series , Theme

[ BaserCMS 2.0 テーマの制作 シリーズ記事 ]

BaserCMS 2.0 テーマの制作/42012.08.11
BaserCMS 2.0 テーマの制作/32012.08.09
BaserCMS 2.0 テーマの制作/22012.08.07
BaserCMS 2.0 テーマの制作/12012.08.06

 

ブログ記事一覧

年別アーカイブ一覧



[1]