やりすぎはよくないと思いますが、スライドショーがページに入っていると、それだけでアクセントがついて華やかな感じになるものです。今回はスライドショーを WordPressに導入する手順について書いていきたいと思います。
今回利用させていただく Javascriptライブラリは『jQuery Cycle Plugin』です。jQueryという汎用ライブラリ上で動作するように書かれたもので、これをWordPressへ導入するための手順について書いていきます。手順は次の通りです。
- header.phpに jquery.cycle.all.min.jsをインクルードする
- style.cssに スタイルを定義する
- <script>で切り替え効果を設定する
- スライドに使う画像を HTMLに書く
■ 1.header.phpにインクルード
<!--script type="text/javascript" src="/js/effects.js.php"> </script--> <?php wp_head(); ?> <script type="text/javascript" src="/wp-includes/js/jquery/jquery.cycle.all.min.js"> </script>
まずは『jQuery Cycle Plugin』から最新版の jquery.cycle.all.min.jsをゲットします。通常版と圧縮版がありますが、どうせ中を見てもわからないと思うので、圧縮版の方を落としてきました。
これをテーマの header.php にインクルードします。このときの注意事項ですが、jquery.cycle.all.min.js の前に jquery.js がないと『jQueryがないよ』というエラーが出ます。あと、テーマによって、バッティングする Javascriptがあるので(上の例だと、effects.js.php)、このあたりの調整(どちらかをあきらめる)が必要になります。
■ 2.style.cssにスタイルを定義
.pics { position:relative; height:232px; width:232px; padding:0; margin:0; } .pics img { position:absolute; top:0; left:0; padding:15px; background-color:#eee; border:1px solid #ccc; width:200px; height:200px; } #pics { background-color:#fff; }
これはお好みで定義します。<div class=”pics”> の中にスライド画像を入れることになるので、外枠を少し大きめにとってあります。画像自体は 200×200で用意して、画像の回りにグレーの縁がつくようなイメージです。
■ 3.<script>で切り替え効果を設定
<script type="text/javascript"> jQuery(function($) { $('.pics').cycle({ fx: 'all'}); }); </script>
『HTMLを変換なしで入力 』で説明したやり方でカスタムフィールドにこのコードをセットしておき、[insert_meta key=”pics”]で呼び出します。注意点がひとつ。jQueryの関数定義として、$(function() を使う例が一般的ですが、WordPressの jQueryの場合、prototype.jpとの名前衝突を防ぐために、noConflict関数が呼び出されており、$は使用できません。上の例のように明示的に jQuery(function($) として呼び出してやる必要があります。
『jQuery Cycle Plugin』の使い方はサンプルをみて研究してみてください。’all’はすべての切り替え効果をランダムに実行します。
■ 4.スライドに使う画像
<script type="text/javascript"> jQuery(function($) { $('.pics').cycle({ fx: 'all'}); }); </script> <table align="right"><tbody><tr><td bgcolor="white"> <div class="pics"> <img src="http://satake7.net/files/2009/02/cc01.png" width="200" height="200" /> <img src="http://satake7.net/files/2009/02/cc02.jpg" width="200" height="200" /> <img src="http://satake7.net/files/2009/02/cc03.jpg" width="200" height="200" /> </div> </td></tr></tbody></table>
繰り返しになりますが、上の Javascriptと一緒に画像を定義したものをカスタムフィールドにセットしておきます。最初は、Javascriptだけカスタムフィールドにセットして、tableはそのまま投稿欄に書いていたのですが、うまくいかなかったため(tdに idを指定しても WordPressに消されてしまうというような理由だったかもしれません)、丸ごとカスタムフィールドにセットすることにしました。
■ 参考
- jQuery Cycle Plugin
- jQuery Cycle Plugin を使ってみました
- Redline Magezine::jQuery Cycle Plugin サンプルその1
- jQuery Background Position
- [JS]jQueryのプラグイン33+1選 -2009年2月
■ Satake Studioでは
スライドショーの導入については、テーマのカスタマイズをご依頼いただくか、カスタマイズ済みのテーマのアップロードをご依頼ください。