[baserCMS]バナー管理プラグインで作る画像スライドショー

もちろん、テーマによっては、トップページのスライドショー部分の変更機能など、最初から搭載している場合がありますが、トップ以外の場所で汎用的に使いたい場合も多いと思います。そこで、今回はbaserMarketで配布されている「バナー管理プラグイン」を使用して、baserCMS（記事執筆時点では3.0.5.1が最新）でスライドショーを作る手順をご紹介したいと思います。

ダウンロード

今回利用させてもらうのは、以下の２つです。ありがとうございます。

・バナー管理プラグイン
・bxSlider（スライドショー用のjQueryプラグイン）

 

バナー管理プラグインのインストール

何はなくとも、まずは「バナー管理プラグイン」をbaserMarketよりダウンロードしてきます。このプラグインは無料ですので（MITライセンスのようです）、ショップの会員登録が終わっていれば、誰でもダウンロードできます。

baserCMS本体へのインストール方法は、公式サイト「プラグインのインストール」に詳しく載っていますので、そちらを参考にしてインストールを済ませてください。

 

バナー管理プラグインの使い方

バナー管理プラグインは、管理画面からバナー（画像）を登録すると、それをしていた場所に出力してくれるというプラグインです。バナーの設置場所ごとに複数の設定ができ、設定項目でバナーサイズも指定できるので、サイズの調整がされていない大きな画像をアプロードされたような場合でも、自動的に縮小されて表示されます。

プラグイン管理から、バナー管理プラグインの管理画面に入ります。

するとバナーエリアの一覧が表示されます。インストール直後は「デフォルト」というエリアがあるはずですので、これを編集して名前を「トップページ」としてください（実際に使用する際には、ここの名前を状況に合わせて分かりやくす変更すると良いと思います。今回はトップページに設置するスライドショーを作りますので、「トップページ」という名前にしました）。

上記で作成したエリア「トップページ」の管理画面に入っていくと、バナーとして登録されている画像が一覧表示されます。最初は何もありませんので、使用したい画像を登録してください。

ここで登録した画像を、テンプレート（View側）で呼び出すには、このプラグイン専用のヘルパー（表示用の関数）を使用します。このヘルパーは、バナー管理プラグインをインストールした段階で使えるようになっているはずです。

<?php $this->Banner->showBanner(‘トップページ’); ?>

'トップページ' となっている部分は、先ほど登録したエリアの名前です。ここの名前を変えると、他のエリアのバナーを呼び出せます。

 

ヘルパーの出力内容を調整する

上記のヘルパーを実行すると、HTMLが出力されます。デフォルトでは下記のようなリスト状態で出力がなされます。

<!--banner_block-->
<div id="banner_block" class="rover_li">
  <div class="slide">
    <ul>
      <li><img src="/app/webroot/files/banners/*****.jpg" alt="" /></li>
      <li><img src="/app/webroot/files/banners/*****.jpg" alt="" /></li>
      <li><img src="/app/webroot/files/banners/*****.jpg" alt="" /></li>
    </ul>
  </div>
</div>
<!--//banner_block END-->

今回、使用するjQueryプラグイン「bxSlider」は、スライドショーする画像の上にキャプションとして文字を乗せる事ができ、キャプションとして使用したい文字は、title属性としてimgタグの中に入れることになります。しかし、バナー管理プラグインでは、title属性がそもそも登録できず表示もされません。登録できるのはalt属性の値です。そこで今回は、ヘルパー出力用のテンプレートを調整し、alt属性の値をtitle属性として流用できるようにしたいと思います。その結果、管理管理上で「altテキスト」として登録した内容が、スライド画像上にキャプションとして表示出来るようになるはずです。

編集すべきテンプレートは以下の場所にあります。

/app/Plugin/Banner/View/Elements/banner_block.php

前述のヘルパーでバナー画像を表示すると、このテンプレートが呼び出され、このテンプレートに書いてあるHTMLの内容でバナー画像が出力されます。そこで、imgタグを出力している箇所（バナー管理プラグイン Ver.2.0では、19行目、21行目、24行目付近です）を書き換えて、下記の通りtitle属性を付け加えます。

<?php if(!empty($bannerDatas)): ?>
<!--banner_block-->
<div id="banner_block" class="rover_li">
<div class="slide">
<ul>
<?php foreach ($bannerDatas as $bannerData): ?>
<?php if($bannerData['BannerFile']['url']): ?>
<?php if($bannerData['BannerFile']['blank']): ?>
<li><a href="<?php echo $bannerData['BannerFile']['url'] ?>" target="_blank"><img src="<?php echo $bannerData['BannerFile']['name'] ?>" alt="<?php echo $bannerData['BannerFile']['alt'] ?>"  title="<?php echo $bannerData['BannerFile']['alt'] ?>" /></a></li>
<?php else: ?>
<li><a href="<?php echo $bannerData['BannerFile']['url'] ?>"><img src="<?php echo $bannerData['BannerFile']['name'] ?>" alt="<?php echo $bannerData['BannerFile']['alt'] ?>"  title="<?php echo $bannerData['BannerFile']['alt'] ?>" /></a></li>
<?php endif ?>
<?php else: ?>
<li><img src="<?php echo $bannerData['BannerFile']['name'] ?>" alt="<?php echo $bannerData['BannerFile']['alt'] ?>"  title="<?php echo $bannerData['BannerFile']['alt'] ?>" /></li>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>
<div class="prev"><a href="/#"><?php $this->BcBaser->img('common/btn_prev.gif', array('alt' => '前へ', 'width' => '12', 'height' => '33')) ?></a></div>
<div class="next"><a href="/#"><?php $this->BcBaser->img('common/btn_next.gif', array('alt' => '次へ', 'width' => '12', 'height' => '33')) ?></a></div>
</div>
<!--//banner_block END-->
<?php else: ?>
<p>バナーデータがありません。</p>
<?php endif ?>

ちなみに、ヘルパーのソースコードをみると、引数にオプションでテンプレート名を指定できるようになっているようです。もしも、上記のような書き換えでなく自分で作成したい場合は、以下の場所に独自でテンプレートを作りヘルパーで呼び出せば良さそうです。例えば「sample.php」というテンプレートを作って呼び出す場合・・・

/app/Plugin/Banner/View/Elements/sample.php

<?php $this->Banner->showBanner(‘トップページ’, array('template' => 'sample')); ?>

というようになると思います。ということで、とりあえず今回はデフォルトの「banner_block.php」を書き換えましたが、今のところまでで、ヘルパーからの呼び出し結果が以下のようになっているはずです（管理画面で「altテキスト」を入力していなければ、alt属性とtitle属性は空欄になります）。

<!--banner_block-->
<div id="banner_block" class="rover_li">
  <div class="slide">
    <ul>
      <li><img src="/app/webroot/files/banners/*****.jpg" alt="altテキストとして保存じた文字列1" title="altテキストとして保存じた文字列1" /></li>
      <li><img src="/app/webroot/files/banners/*****.jpg" alt="altテキストとして保存じた文字列2" title="altテキストとして保存じた文字列2"  /></li>
      <li><img src="/app/webroot/files/banners/*****.jpg" alt="altテキストとして保存じた文字列3" title="altテキストとして保存じた文字列3"  /></li>
    </ul>
  </div>
</div>
<!--//banner_block END-->

これでバナー管理プラグイン側は設定完了です。つづいてboxSliderの設定に移ります。

 

レイアウトテンプレート等でboxSliderを読み込む

boxSliderはjQueryのプラグインですので、jQueryを読み込んでおく必要があります。以下ではjQueryとboxSlider、boxSlider用のCSSを読み込んでいます。なお、「jquery-1.11.1.min.js」はテーマの「js」フォルダに入れ、boxSliderはダウンロード後に解凍して出来たフォルダ「jquery.bxslider」を、これもフォルダごと「js」フォルダ内に入れてある状態です。

<?php
$this->BcBaser->css(array(
//〜（その他のCSSもここで読み込む）〜
'../js/jquery.bxslider/jquery.bxslider'));
?>

<?php
$this->BcBaser->js(array(
 //〜（その他のJSもここで読み込む）〜 
'jquery-1.11.1.min',
'jquery.bxslider/jquery.bxslider.min'));
?>

次に、このboxSliderを実行させる必要があります。ちなみに、このboxSliderはデフォルト状態でキャプションの表示をしてくれませんので、オプションで指定する必要があります。今回は。スライドモードを「fade」、キャプションを「true」、自動再生を「true」、ページャー（クリックで画像を選択できる）を「false」にしました。

<script type="text/javascript">
$(document).ready(function(){
   $('div.slide > ul').bxSlider({
      mode: 'fade',
      captions: true,
      auto: true,
      pager: false
    });
  });
</script>

これで作業は全て完了です。こうして文章にすると少し長いですが、実際の作業量としては大したことはありませんので、baserCMSを利用してホームページ制作を行っている方は、ぜひぜひお試し下さい。