スライドショーの導入

やりすぎはよくないと思いますが、スライドショーがページに入っていると、それだけでアクセントがついて華やかな感じになるものです。今回はスライドショーを WordPressに導入する手順について書いていきたいと思います。

[insert_meta key=”jquery-cycle11″]
今回利用させていただく Javascriptライブラリは『jQuery Cycle Plugin』です。jQueryという汎用ライブラリ上で動作するように書かれたもので、これをWordPressへ導入するための手順について書いていきます。手順は次の通りです。

  1. header.phpに jquery.cycle.all.min.jsをインクルードする
  2. style.cssに スタイルを定義する
  3. <script>で切り替え効果を設定する
  4. スライドに使う画像を 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に消されてしまうというような理由だったかもしれません)、丸ごとカスタムフィールドにセットすることにしました。

■ 参考

■ Satake Studioでは

スライドショーの導入については、テーマのカスタマイズをご依頼いただくか、カスタマイズ済みのテーマのアップロードをご依頼ください。

/作成者: