フッタの上に画像スライドショーを設置してみました
画像スライドショーを設置してみたい
ふとそんなことを考えて調べると,バナー管理プラグインを使うとよいという記事を見つけました。その記事ではjQueryと組み合わせるとスライドショーができると書いてあったのでチャレンジすることにしました。
バナー管理プラグインをインストール
こちらは,baserマーケットでbaserCMS5対応版があったので簡単にできました。baserCMSの管理画面でバナーエリアやバナーの設定はできたのですが,任意のページにバナーを表示させるところで分からなくなってしまいました。これは管理画面ではできないようです。
表示させたいページのphpファイルを直接編集
Webで解決策を調べるとこちらのサイトに手順が書いてありました。表示させたいページのphpファイルを開いてヘルパーというコマンドを入れるとバナーが表示されるようです。
早速FTPアプリを開いてサイトのデータにアクセスします。そこから表示させたいページのphpファイルを探すのが一苦労でした。
phpファイルをテキストエディタで開いてヘルパーというコマンドを入れるのですが,今一つ入力の仕方がわかりませんでした。エラーが出ては修正するという試行錯誤の結果「<?php $this->Banner->showBanner('バナーエリア名') ?>」と入力することで設定したバナー画像が表示されました。
表示の仕方はテンプレートファイルを編集する
さらに調べていくと,バナー画像の表示はテンプレートファイルに記述されているとのことでした。最初はデフォルトのテンプレートファイルを使ってみましたが,カスタムファイルを指定することができるとのことだったので,デフォルトファイルをコピーして使うことにしました。
スライドショーにするためには
こちらのサイトに手順が書いてあるので参考にしながら進めました。まずはbxSliderなるスライドショー用のjQueryプラグインをダウンロードし,その中から必要と思われるファイルを当サイトのテーマファイルがあるフォルダ内にコピーしました。
その後,先ほど作成したカスタムのテンプレートファイルにbxSliderを読み込む設定をしました。参考サイトのコードをコピーしてちょこっと書き直した程度です。
最後にバナーを表示するphpファイルにヘルパーコマンドを入力します。今回はカスタムのテンプレートファイルにしたので,ヘルパーコマンドは上記のものより長い「<?php $this->Banner->showBanner('バナーエリア名', array('template' => 'カスタムのテンプレートファイル名(.phpは除く)')) ?>」となりました。
フッタ上に画像スライドショーができました
今回はトップページ上部用にStable Diffusionで作成した画像をスライドショーで表示したかったので,画像サイズを考えてフッタ上としました。トップページ上部には5枚しか画像が設定できないので,作成したけど使われていない画像をバナー登録してスライドショーで表示できるようにしました。
他の場所でも使えるようにさらに研究していきたいです。
この記事へのコメント
コメントはまだありません。
コメントを送る