fotoramaで簡単にスライドショーを設置できる
fotoramaはサイトに簡単にスライドショーを搭載できるjQueryです。様々なサイトで紹介されているため今さらな感じもしますが、自分で見返すためにも備忘録的に記述しておこうと思います。
いろんなスライドショーを試してみましたが、もっとも簡単で、もっとも汎用性が高いと感じましたので、fotoramaにお世話になっています。
fotoramaはフルウィンドウにしたり、キャプション付けたり、サムネイル付けたり、自動スクロールしたり、ランダムにしたり、画像の切り替わりスピードを調節したり、アニメーションを変化させたり、スマホに対応させたり、縦横比を指定したりできます。
これからも、自サイトのみならず、クライアントワークでも間違いなくお世話になっていくことと思います。
サイトに行ってfotoramaをダウンロードして設置
こちらよりfotoramaのサイトに行って、zipファイルをダウンロードすることから始めましょう。
zipファイルを回答すると、フォルダ内に5つのファイルが梱包されていますので、フォルダごとお使いのテーマにアップロードします。cssやarrowなどのアイコン画像も同梱されていますので、フォルダごと全てアップロードすることをオススメします。
WordPressの場合jQueryをfunctions.phpで一元管理すると便利
ヘッダーにjsやcssを呼び出す記述をしたいところなのですが、WordPressの場合functions.phpで一元管理した方がバラバラにならずに便利だと、個人的には思います。
※ functions.phpはとてもデリケートなファイルなので、操作する前に事前にバックアップを取っておいて下さい。そうすることで、何か不具合が起こって表示されなくなってしまったとしても、操作前のファイルに差し替えることで復旧させることができます。
functions.php
// wp_headでjQueryを読み込む
if(!is_admin()){
add_action('wp_head', 'myScript', 1);
function myScript() {
wp_enqueue_script('jquery');
wp_enqueue_script( 'jquery.min', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' );
wp_enqueue_script('fotorama.js', get_bloginfo('template_url') . '/js/fotorama/fotorama.js');
}
}
このようにfunctions.phpに記述することで、wp_headが読み込まれるタイミングで指定したファイルが読み込まれていなければ読み込んでくれるという仕組みのようです。
参考記事→WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック
上記のfunctions.phpへの記述により、jQuery本体とfotorama.jsの読み込みを半自動的に行うことができるようになった訳ですが、まだfotoramaのcssは読み込んでおりません。従いまして、header.phpのwp_headより上の部分に下記のコードを記述します。
header.php
<!-- fotoramaのcssの読み込み -->
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/js/fotorama/fotorama.css" />
fotorama.jsもfotorama.cssも、テーマファイル内の「js」というフォルダの中に格納しているとの仮定で記述しておりますので、適宜パスは書き換えて下さい。
クラス指定して読み込む
<div class="fotorama"> <img src="挿入したい画像のパス1"> <img src="挿入したい画像のパス2"> </div>
このように記述するだけで、サイトの様々な部分にスライドショーを設置することができます。上記の記述は、何もオプションを指定していない、デフォルトのままの状態です。
オプションの紹介
上記の1行目の記述のあとに、いろいろな条件を付与することでfotoramaをカスタマイズすることができます。
<div class="fotorama" data-width="100%" (横幅MAX) data-ratio="2000/1000" (縦横比) data-transition="crossfade" (アニメーションスタイル) data-autoplay="1000" (自動スクロール1秒) data-transitionduration="3000" (アニメーション3秒ゆっくりスクロール) data-arrows="false" (矢印消去) data-click="false" (クリックでスクロール不可) data-swipe="false" (スワイプでスクロール不可) data-trackpad="false" (トラックパッド非対応) data-loop="true" (画像をループさせる) data-nav="thumbs" (サムネイルを並べる) > <a href="画像のパス1"><img src="サムネイルのパス1" width="200" height="100"></a> <a href="画像のパス2"><img src="サムネイルのパス2" width="200" height="100"></a> <a href="画像のパス3"><img src="サムネイルのパス3" width="200" height="100"></a> <a href="画像のパス4"><img src="サムネイルのパス4" width="200" height="100"></a> </div><!-- .fotorama end -->
といった具合に、条件を指定してあげることで、思い通りのスライドショーにすることができます。falseとtrueを入れ替えると、不可を可に変更することができます。
上記のソースをコピペして使いたい場合、カッコとその中の日本語は消してから使って下さいね。
英語ですが、全てのオプションをfotoramaのサイトで紹介しておりますので、参考にしてみて下さい。
スマホにスマートに導入するオススメ方法
PCとスマホで別々のスライドショーを表示した方が良いと個人的には思います。
画面の形が違いますし、解像度も変化させた方が良い、縦横比もPCとスマホでは同じでは見にくい、などの理由からです。
とくに解像度が高いとスマホでは表示させるのに時間がかかってしまい、ユーザーにとって表示の遅い不便なサイトという事になってしまいかねませんからね。全てのユーザーがWi-Fi環境下で操作しているなら別ですが…
ですから、これらの問題を解決すべく、スマホには子テーマを用意して、別のテーマファイルを作成し、スマホでアクセスした場合にはそちらのテーマに切り替えて表示するようにすれば良いと思います。
PCではこう表示させる、スマホではこっち、みたいにテーマを変えてあげることで、自由にカスタマイズさせることができます。もちろんfotoramaも、PCはこの縦横比、この解像度の写真をスライドさせる、スマホでは別に用意した画像を読み込ませる、という記述をしてあげることで、軽快に動作するようになります。
丸ごと別にテーマを作るのではなく、子テーマですから、意外と簡単に実装できてしまいます。やり方が全く分からない、という方は、こちらの書籍で詳細に紹介されておりますので、ご一読されてみてはいかがでしょうか。
PCとスマホ、両方のサイトを簡単に作ることができるようになります。もちろん、アフィリエイトサイトもスマホ対応している方が、アクセスやクリック率が上がると個人的には思います。
