POPSブログ

BaserCMS 2.0 テーマの制作/4

135

  Category:  basercms2012/08/11 pops 

BaserCMS 2.0系のテーマの「サイドバー」を改造する方法について考えてみました。別ページでも「サイドバー」に関しては言及していますが、まとめ的なものです。


BaserCMS 2.0 テーマの制作 4、サイドバー設計の変更

「サイドバー」は主にレイアウトの default.php で配置などを決定するのが効率的と思います。
レイアウトの default.php 以外で「サイドバー」を変更、又は追加したいなど必要があれば、phpを書ける所でCSS変更と「サイドバーエレメント」を読み込めば可能と思います。少し複雑にはなりますが。
どんなものでも部品化できますので必要な所で呼び出すようにしますが、ある程度サイトの構成、固定ページの設計などを考慮した事前のプランが大切と思われます。


BaserCMSの設置条件を下記のようにします。

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

何でもエレメント化し、好きな場所で表示できるのがウレシイ。


基本的「サイドバー」配置は、レイアウトのdefault.phpで行う


小規模なサイトならばdefault.phpで条件分岐による「サイドバー」の配置を行っただけで済むと思います。大規模な場合でも固定ページのカテゴリーの種類に応じての変更などは、関数を使って分岐すれば可能です。
また、「エレメント」の中で別の「エレメント」を読み込むことが可能ですから、よりページに合った「サイドバー」の構成も出来る。便利ですがメモを取っておかないと何処で何の処理をしたか忘れるので注意。
「エレメント」の名前の付け方などで分別できるように工夫しておくのも一考かと思います。


【参照】当方の記事: BaserCMS 2.0 テーマの制作1


説明図


上図に示すよう、ブロックにエレメント化して、ページ毎などの条件でレイアウトすると多様なデザインに出来る。


通常の「サイドバー」


ほとんど手書きのHTMLのリンクとか、ブログパーツを読み込む、画像を挿入するなどの作業になります。通常「サイドバー」のリストは以下のような構成です。

● 基本的サイドバーの中のリスト

h2、li要素はCSSで装飾される場合が多い。


<h2>お題目</h2>
	<ul>
		<li>リンク1</li>
		<li>リンク2</li>
		<li>リンク3</li>
	</ul>

● ウィジェットの挿入

ウィジェットの挿入は上記の図のように登録した「ウィジェット番号」を書き入れればリスト形式で表示されます。


<?php $bcBaser->element('widget_area',array('no'=>2)) ?>

ページにより、または404エラー時にウィジェットを処理できない場合が有得ますので、エラー回避の処理をして挿入したほうが安心です。404エラー時は未準備の関数もあるようです。


ページにより表示できない、関数未準備、のエラーを回避
<?php if(!empty($widgetArea)): ?>
	<?php $bcBaser->element('widget_area',array('no'=>2)) ?>
<?php endif ?>

404エラー時に表示できないエラーを回避
<?php if($bcBaser->contentsName() !='Error'): ?>
	<?php $bcBaser->element('widget_area',array('no'=>2)) ?>
<?php endif ?>

if(!empty($widgetArea)) は、1つでも登録して使用できる状態ならば、widget以外の処理でも利用できるようです。処理出来ない状態の時、何も表示しませんから途中でHTMLが途切れることはありません。

但し、動作確認の上に使用して下さい。表示ページが異なる場合、挿入場所によっては機能しない場合も想定されます。またマニュアルに明記は有りませんので、手探りで探すほかに方法が無いようです。


● ウィジェットの実際の出力例

他のリストが装飾される場合は、「widgetクラス」などを旨く使ってCSSを合わせる。


<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 class="widget widget-blog-monthly-archives widget-blog-monthly-archives-1 blog-widget">
<h2>月別アーカイブ一覧</h2>
<ul>
<li><a href="/main/news/archives/date/2012/07">2012年07月(13)</a></li>
</ul>
</div>
<div class="widget widget-blog-yearly-archives widget-blog-yearly-archives-1 blog-widget">
<h2>年別アーカイブ一覧</h2>
<ul>
<li><a href="/main/news/archives/date/2012">2012年(13)</a></li>
</ul>
</div>

● 「エレメント」の中で別の「エレメント」を読み込む

内部リンクなどのブロックと一緒にして見ました。読み込む「エレメント」linkblock.php (仮の名前)は事前に保存しときます。書き方次第では使いまわしができます。

DIV要素などでラップするなど、中の構成は使用者の自由設計になります。あとでJSで操作するなどの場合は意識的に要素を判別識別しやすいように「仕込み」をしておくのも重要です。

例文中「side-boxクラス」は単なる作例です。ウィジェット挿入での書き出される「widgetクラス」はウィジェット固有のものです。linkblock.phpはここでの作例としての名前で、自由な名前で使用できます。


<?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 />
<h2>外部リンク</h2>
<div class="side-box">
	<?php $bcBaser->element('linkblock') ?>
</div>
<br />

「使いまわし」する「エレメント」はその部分の修正で、全ての使用箇所に反映されますので効率的な方法です。

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


linkblock.php


	<ul>
	<li><a href="http://keisatuda.com/maido">警視庁捜査1と4分の1課</a></li>
	<li><a href="http://toritate.com/hayoharawanka">税務署督促課</a></li>
	<li><a href="http://kajida.com/soreyuke">消防署お得意様係</a></li>
	</ul>

ここでは、中身である <ul><li>リンク先</li></ul>のみをエレメント化している。


固定ページの「サイドバー」


固定ページの場合は、大抵上部に固定ページへのメニューがありますので、適当なリンクを書けばよろしいと思います。
ページカテゴリーを登録した場合は、管理画面「ウィジェット管理」拠り「ローカルナビゲーション」の登録をして利用すると便利です。

● ローカルナビゲーション

ページ機能で作成されたページで同一カテゴリ内のタイトルリストを表示します。簡単にリンク付きの目次が作れる。h2要素には登録している「カテゴリタイトル」が自動で挿入されます。
これも、widgetクラスになりますので、CSSを旨く合わせれば良い。

【注意】ローカルナビゲーションを利用できるのは「ページカテゴリ」を登録した場合です。


仮にウィジェット、「サイドバー」番号3で登録。「エレメント」を sidebar6.php とします。


<?php
/**
 * サイドバー6
 */
?>
<div class="side-imgbox">
	<img src="/main/themed/popsline/img/popsline_logo.gif" width="220" height="100" />
</div>
<br />
	<?php if(!empty($widgetArea)): ?>
	<?php $bcBaser->element('widget_area',array('no'=>3)) ?>
	<?php endif ?>
<br />

仮にカテゴリー material (マテリアル) として登録の出力例


<div class="widget-area widget-area-3">
<div class="widget widget-local-navi widget-local-navi-1">
	<h2>マテリアル</h2>
	<ul class="clearfix">
	<li class="page-01 first current"><a href="/main/material/index">マテリアルインデックス</a></li>
	<li class="page-02"><a href="/main/material/material1">マテリアル1</a></li>
	<li class="page-03"><a href="/main/material/material2">マテリアル2</a></li>
	<li class="page-04 last"><a href="/main/material/material3">マテリアル3</a></li>
	</ul>
</div>
</div>

実に便利だ!、寂しければ何か書いてやればよい。


何でもエレメント化

エレメント化出来るのは「サイドバー」に限ったものでは在りません。通常はHTMLを書き出すために利用することが多いと思いますが、phpですから何らかのコード処理も行える利点はあります。
要は効率よく利用できるように構築すればよい。「エレメント」の配置だけでも結構「動的」になる。
今日は誕生日だから「メインメニュー」を豪華3段重ねで表示するとか、「衝動的」利用というか、、、。
今日はパチンコで負けたから、「ヘッダー」「フッター」を逆に表示した、「超動的」利用というか、、、。


404エラー時に処理が甘いと画面が乱れるときがある。


404エラー時「サイドバー」を表示させない(空のエレメント挿入)

通常は問題なく作動していても、「404エラー」時、エラー回避処理が甘く、正常に処理できない事も発生します。独自の関数処理などは「サイドバー」での実行が多く、「サイドバー」の工夫でほとんどエラーを回避できる。これは「テーマの制作1」でも述べた。

【注意】関数、ウィジェットの無い「サイドバー」を挿入するの意味です。「404エラー」時「サイドバー」を必要としませんので、空のDIV要素でも良い。CSSで消しても関数は実行しますので無意味です。
●通常の正規の方法で「ウィジェット」使用の場合エラーは起こりません。独自の関数実行など「非正規の処理」を記述した時の防護策です。

「サイドバー」に限らず「404エラー」時等の場合、Error 文字が吐き出されるのを利用して処理すると良いようだ。



404エラー時の処理回避
<?php if($bcBaser->contentsName() !='Error'): ?>
	通常時に処理する関数などを書く
<?php endif ?>

【404エラー再現】サイト表示時に、サイトに無いページURLを実行すれば「404エラー」になりますので状況を把握できます。その時の表示を確認しながら該当するphpを修正すれば良い訳です。


説明図


1. 404エラー標準

エラー処理された「標準」の画面です。404 NOT FOUND が表示されます。

2. 404エラーサイドバー非表示

エラー処理された「サイドバー非表示」の画面です。404 NOT FOUND が表示されます。多少処理が不完全でもかなり回避できます。(空のエレメントを挿入)

3. 決定的エラー

決定的エラーで何も表示しません。コード文法の間違いなどでおこります。

4. ページエラー

ページでエラーが起こっています。エラー箇所以降は表示しません

5. サイドバーエラー

サイドバーでエラーが起こっています。エラー箇所以降は表示しません


独自のコード処理で正常に動作していても「404エラー」時には正常に処理されず、図4,5のようになる場合があります。使用できない状態ではありません、ブラウザ戻るボタンで前ページに戻れますし、上部のリンクも作動します。
通常はリンクを点検していますから余り起こり得ませんが、「不正アクセス」の場合にこのようになります。
● これ以上の処理は使用者の判断次第です。


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


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



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