ハクられた話は、落ち着いた頃にでも……

■ [ネット] BaserCMS についての小ネタ

激しく間が空いたけれども、今回はBaserCMSネタを。Twitterでも書いたけれど、PivotXで作ってたサイトがハクられてしまったので、もうPivotXは使いたくない、というクライアントや私の個人的心情を踏まえ、BaserCMSに乗り換えるための作業を行っていた。

デザインや機能自体は、PivotXで実現していたものとほぼ同じものが2日(実質1日半くらい) でできたのだけど、若干デフォルトのテンプレートやコードを使うだけではうまくいかなかった点を備忘録としてメモしておく。

■ カテゴリーごとにバナー画像を自動で貼りたい

単純に、各カテゴリーごとに表示させるバナー画像を変えるためのテクニック。たかだかそれだけのためにレイアウトファイルを複数作るのも無駄だし、現在のBaserCMSでページごとに特定のレイアウトを適用する為には、ソース表示をして

layout = 'layout_file' ?>

のようにコードを埋め込む必要があるため、詳しい人ならまだしも、あまり詳しくない人がこの作業を新規ページ作成の度に行うのも難しいだろうということで、以下のようなコードをlayouts/default.ctpに書いた。

ページカテゴリ名をcategory、ページカテゴリタイトルをカテゴリーとした場合。

 getContentsName().'.jpg';
  $category = $page->getCategory();
  $catname = $category['title'].'バナー';
  echo $html->image("$bannerimg", array('alt'=> "$catname", 'width'=> "700", 'height'=> "150"));
 ?>

書き出されるコードはこんな感じ。

注意点としては、ページカテゴリ名が英文字の場合、先頭文字が大文字になるため、imgにアップする画像名も先頭文字を大文字にしなければいけない事くらいかな。画像以外にも、カテゴリをトリガーとして、何か変化を付けたい場合には応用できるかも。

■ カテゴリごとのローカルナビゲーションにアクティブ表示をしたい

自分がいるページを示すために、ローカルナビゲーションにid等を割り振ってCSSで表示を変えるというのはよく行われているけど、デフォルトのローカルナビゲーション用コードでは、アクティブ表示ができないようだったので、coreから以下のファイルを持ってきて書き換えてみた。

・ elements/submenus/local_navi.ctp を、自分のテーマのelementsにコピーして編集

getCategory();
?>


 element('page_list',array('categoryId'=>$pageCategory['id'])) ?>

単純に<h2>が要らなかったので消しただけ。コメント部分は省略。

・elements/page_list.ctp を、自分のテーマのelementsにコピーして編集

getPageList($categoryId);
?>

getContentsTitle();

if(!empty($pages)){
 foreach($pages as $key => $page){
  $no = sprintf('%02d',$key+1);
  if($curcheck == $page['title']){
   $class = ' class="current"';
  }else{
   $class = ' class="page'.$no.'"';
  }
  if($this->base == '/index.php' && $page['url'] == '/'){
   echo ''.str_replace('/index.php','',$baser->getLink($page['title'],$page['url'])).'';
  }else{
   echo ''.$baser->getLink($page['title'],$page['url']).'';
  }
 }
}
?>

このコードで、ページのタイトルが一致したら、該当の<li>にclass=”current”が付き、それ以外にはpageXX(XXは連番) がクラスとして割り当てられる。idでもいいんだけど、元々がクラスだったので合わせてみた。(本当は番号のクラスも要らないけど、何かに使うかもということで、その部分のコードは元のまま残してある。要らなければelse以下を削れば桶)

レイアウトファイルからの呼び出しは、以下のようにする。

element('local_navi') ?>

書き出されるコードは、こんな感じ

 

  
ページ01
  
ページ02
 

これでカテゴリさえきちんと作っていれば、アクティブ表示も可能となる。

以上の事以外は、特に難しいことをしなくてもパンくずリストも出せるし、かなりテーマのカスタマイズはやりやすかった。ただ、惜しむらくはIEで重いことかな・・・。何故か今回作った、カテゴリごとに画像を読ませるところで、画像表示が遅い。テーマの作りやすさや柔軟さ、各種機能と使い勝手は素晴らしいので、今後の改善に期待しています。

■ 2011/02/28 追記(IE6への対応)

CSSの書き方にもよるのだろうけど、IE6ではクラスではなくIDでアクティブとなる要素を指定しないとうまく動作しなかった。よって、elements/page_list.ctp を以下のように再度編集した。

・elements/page_list.ctp

getPageList($categoryId);
?>

getContentsTitle();

if(!empty($pages)){
 foreach($pages as $key => $page){
  $no = sprintf('%02d',$key+1);
  if($curcheck == $page['title']){
   $class = ' id="current"';
  }else{
   $class = '';
  }
  if($this->base == '/index.php' && $page['url'] == '/'){
   echo ''.str_replace('/index.php','',$baser->getLink($page['title'],$page['url'])).'';
  }else{
   echo ''.$baser->getLink($page['title'],$page['url']).'';
  }
 }
}
?>

先のコードではアクティブ要素以外に出力されていた連番要素も排除した。このコードでは以下のように出力される。

 

  
ページ01
  
ページ02
 

IE6以外のブラウザ(IE7、IE8、Chrome、Firefox、Opera、Safari) では、IDでなくクラスで正常動作した。

今時IE6への対応なんて必須じゃなくなりつつあるけど、それでも対応せざるを得ない場合があるので追記。ほんと、もう、やりたくないんだけどね・・・。