POPSブログ

BaserCMS 2.0 テーマの制作/2

133

  Category:  basercms2012/08/07 pops 

BaserCMS 2.0系のテーマを自サイト専用に改造する方法について考えてみました。


BaserCMS 2.0 テーマの制作 2

前頁の標準的な「テーマ」は他のサイトでも利用できるように作りました。但し、通常は配布目的で「テーマ」を作る訳ではなく、あくまでも「自サイト」で使用するのが目的です。たまたま「自サイト」のデザインのため「テーマ」を作ったに過ぎません。
配布目的でないならば「自サイト専用」に改造しようと言うことです。


default.php を考える


default.phpは「サイト」構成の要になりますが、ここの書き方も標準的な「テーマ」作成の作法で書かれています。
究極的に思考すれば単にHTMLを出力しているに過ぎません。特にbody以前のメタ部分はほとんどが共通するものです。ページ毎に違う出力をしなければならない部分を除き、通常のHTMLに摩り替えても動作に異常をきたすものではありません。(推奨される方法ではありませんが、、、)


  • 説明上、サブデレクトリ main とします。
  • テーマ名を popsline とします。ブログIDはそのまま news とします。
  • 画像などはテーマ内部に保存されているものと仮定します。

● 標準の書き方の例 (テーマ「demo」とほぼ同じ)


<?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>

BaserCMSの関数を使用するのは、設置階層など違っても内部処理で適正化して出力してくれるからです。


以下の方法は、BaserCMSを他の階層に移動したりしないことを前提とします。
設置サブフォルダ名を変えたりした場合は、修正しなければなりませんので注意ください。


良い悪いは別として、色々な方法があるようです。


● HTMLで直接書くやり方 1

ページ毎に違う出力になる部分は、BaserCMSの関数を使用しています。
共通の出力になる部分は、通常のHTMLの書き方にしています。上記、「標準の書き方の例」と比較してみてください。

BaserCMSをサブフォルダ main に設置した場合、/main/ です。サブフォルダなしの場合は / です。



<?php
/**
 * デフォルトレイアウト
 */
?>
<?xml version="1.0" encoding="UTF-8" ?>
<!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" />
	<?php $bcBaser->title() ?>
	<meta name="robots" content="noindex,nofollow" />
	<?php $bcBaser->metaDescription() ?>
	<meta name="keywords" content="baser,CMS,コンテンツマネジメントシステム,開発支援" />
	<link href="/main/themed/popsline/favicon.ico" type="image/x-icon" rel="icon" />
	<link href="/main/themed/popsline/favicon.ico" type="image/x-icon" rel="shortcut icon" />
	<link href="/main/news/index.rss" type="application/rss+xml" rel="alternate" title="ニュースリリースRSS 2.0" />
	<link rel="stylesheet" type="text/css" href="/main/themed/popsline/css/popsline.css" />

<?php if($bcBaser->isHome()): ?>
	<link rel="stylesheet" type="text/css" href="/main/themed/popsline/css/top.css" />
<?php endif ?>

	<script type="text/javascript" src="/main/themed/popsline/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/main/themed/popsline/js/startup.js"></script>
	<?php $bcBaser->element('google_analytics') ?>
</head>

関数処理をしない分、多少は早くなる。ある程度臨機応変な方法が身に付くかもしれません。どちらにしろHTMLを書いているには違いはありません。
AnalyticsはJSですから分離して、JSフォルダに収容して呼び出して使用することも可能です。
配布するテーマではないのですから書き方などは自由にできます。

● 直接HTMLで画像を表示する場合は

但し、BaserCMSの設置サブフォルダなど変わった場合は修正が必要。


固定ページでもブログでも、パスは次のようになる

テーマのimgフォルダにある場合
<img src="/main/themed/popsline/img/xxxxx.jpg" />

テーマのcss/imagesフォルダにある場合
<img src="/main/themed/popsline/css/images/xxxxx.gif" />

指定するパスに、画像などがあれば表示します。(ここでは、cakephp方式のパス指定)


画像をwebroot層の1箇所でまとめて管理する

もしここで、ブログに画像を挿入する場合は何処に保存しておけば良いのでしょうか。一般的には webroot層が使用されるようです。
これでは画像は3箇所に分散してしまいます。そこで全画像をwebroot層のimagesフォルダに保存して「テーマ」でも使用できるように考えて見ましょう。
JS CSS もwebroot層に移動させてみます。深いところにあるより浅いところのほうが何かと便利が良い。

以上の方法を組み合わせても良いが、メモして置かないと後で判らなくなる危険あり。


説明図


● HTMLで直接書くやり方 2

ページ毎に違う出力になる部分は、BaserCMSの関数を使用しています。
BaserCMSをサブフォルダ main に設置した場合、/main/ です。サブフォルダなしの場合は / です。

ほぼ、普通にHTMLを書いている感覚ですから非常に簡単です。画像.JS.CSS.その外、パス指定が単純で作業効率があがります。


<?php
/**
 * デフォルトレイアウト
 */
?>
<?xml version="1.0" encoding="UTF-8" ?>
<!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" />
	<?php $bcBaser->title() ?>
	<meta name="robots" content="noindex,nofollow" />
	<?php $bcBaser->metaDescription() ?>
	<meta name="keywords" content="baser,CMS,コンテンツマネジメントシステム,開発支援" />
	<link href="/main/images/favicon.ico" type="image/x-icon" rel="icon" />
	<link href="/main/images/favicon.ico" type="image/x-icon" rel="shortcut icon" />
	<link href="/main/news/index.rss" type="application/rss+xml" rel="alternate" title="ニュースリリースRSS 2.0" />
	<link rel="stylesheet" type="text/css" href="/main/css/popsline.css" />

<?php if($bcBaser->isHome()): ?>
	<link rel="stylesheet" type="text/css" href="/main/css/top.css" />
<?php endif ?>

	<script type="text/javascript" src="/main/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/main/js/startup.js"></script>
	<?php $bcBaser->element('google_analytics') ?>
</head>
<body id="<?php $bcBaser->contentsName() ?>">

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

途中略す

		<!-- #main-image -->
		<div id="main-image">
			<?php if($bcBaser->isHome()): ?>
				<img src="/main/images/top_image.jpg" />
			<?php else: ?>
				<img src="/main/images/top_image2.jpg" />
			<?php endif ?>
		</div>
		<!-- /#main-image -->

途中略す

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

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

標準的な「テーマ」の仕様ではなくなりますので、テーマとして配布はできません。あくまでも「自サイト専用」になりますので注意ください。


BaserCMSをサブフォルダ main に設置した場合、/main/ です。サブフォルダなしの場合は / です。


● CSSの背景画像のURL


CSSが何処にあっても、パスは次のようになる
background: url('/main/images/xxxxx.gif')

● 画像の表示


固定ページでもブログでも、パスは次のようになる
<img src="/main/images/xxxxx.jpg" />

● CSSの読み込み


何処でも、パスは次のようになる
<link rel="stylesheet" type="text/css" href="/main/css/xxxxx.css" />

● JSの読み込み


何処でも、パスは次のようになる
<script type="text/javascript" src="/main/js/xxxxx.js"></script>

● 判定による画像表示

書き方の違いに注意ください。echoは旨く書かないと表示しない場合があります。


cakephp方式の書き方
<?php if($bcBaser->isHome()): ?>
	<img src="/main/images/top_image.jpg" />
<?php else: ?>
	<img src="/main/images/top_image2.jpg" />
<?php endif ?>
-------------------------------

php方式の書き方
<?php
if($bcBaser->isHome()) {
	echo('<img src="/main/images/top_image.jpg" />');
else {
	echo('<img src="/main/images/top_image2.jpg" />');
}
?>

● サイドバー

サイドバーであっても同じ事です。


<?php
/**
 * サイドバー
 */
?>
<h2>内部リンク1</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>内部リンク2</h2>
<div class="side-box">
	<ul>
	<li><a href="/main/html/siryou1.html">資料A</a></li>
	<li><a href="/main/html/siryou2.html">資料B</a></li>
	</ul>
</div>
<br />
<div class="side-box">
	<img src="/main/images/xxxxx.gif" />
</div>
<br />
	<?php $bcBaser->element('widget_area',array('no'=>2)) ?>
<br />

サイドバーはほとんどがリンク。自由に記述すればよい。


以上の方法を組み合わせても良いが、メモして置かないと後で判らなくなる危険あり。
正規の記述方法ではありませんので、ローカルで十分にテストしてください。


【重要】途中、BaserCMS設置階層の変更(名前変更なども含む)などがあると、補正しなければなりませんので、「default.phpだけに利用する」「ブログ記事内だけで利用する」などと、計画性を持って使用することが重要です。


関数、規則にとらわれずに自由に記述して行くことも可能のようです。


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



[ この記事の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]