WordPressにスライドショーを入れられるプラグイン WP-Cycleを試してみました。
基本的な使い方
インストールと有効化
インストールは他のプラグイン同様で、pluginフォルダにアップロードして、プラグイン設定で有効化するだけです。
有効化するとプラグインメニューの中に WP-Cycle サブメニューが追加されます。下がWP-Cycleの管理画面です。
WP-Cycle 設定画面
画像と効果の設定
WP-Cycle管理画面の上の方（WP-Cycle Images）から、画像を追加できます。「ファイルを選択」でPC内の画像を選び、Uploadボタンでアップロードします。
画像をアップロードすると、「Image Links To」欄に画像をクリックした時の移動先を書くことができます。
その下（WP-Cycle Settings）では、画像の切替効果の設定ができます。
- Transition Enabled
- これにチェックを入れると、画像切替時にアニメーション効果がかかります。
- Transition Effect
- 画像切替のアニメーション効果を選びます。
- Transition Delay
- 1枚の画像を表示する時間（秒）です。
- Transition Length
- 画像切り替えにかける時間（秒）です。
- Image Dimensions
- スライドショウの縦横サイズです。これよりも大きい画像はトリミングされるようです。
- Rotator DIV ID
- スライドショウ div 要素のIDです。
スライドショウの挿入
デザインテンプレート（phpファイル）には、<?php wp_cycle(); ?>を入れると、そこにスライドショウが表示されます。
また、通常の投稿記事や固定ページには、ショートコード[wp_cycle]で入れられます。
使用例は、この記事の上部をごらんください。
ただし、これらのコードで作られるHTMLコードは同じものなので、投稿ごとに異なるスライドショウを作ることはできません。そこで、、、。
裏技（？）的な使い方
展開されたショートコードを見る（ブラウザでページを開いてHTMLを表示する）と、下記のようになっていることが分かります。
<div id="rotator">
<a href="http://www.itpk.jp/"><img src="http://www.itpk.jp/wordpress/wp-content/uploads/2010/02/flower_07-150x150.jpg" width="150" height="150" class="20100701155500" alt="" /></a>
<a href="http://www.itpk.jp/"><img src="http://www.itpk.jp/wordpress/wp-content/uploads/2010/02/flower_02-150x150.jpg" width="150" height="150" class="20100701155500" alt="" /></a>
<a href="http://www.itpk.jp/"><img src="http://www.itpk.jp/wordpress/wp-content/uploads/2010/02/32648379.v1265360814-150x150.jpg" width="150" height="150" class="20100701155500" alt="" /></a>
</div>
これを、そのまま投稿記事に貼り付けると、もちろんちゃんと動きます。
ちょっと分かりにくいので、不要な箇所を省いて、、一部日本語に直します。
<div id="rotator">
<a href="画像１のリンク先"><img src="画像１のURL" width="150" height="150" /></a>
<a href="画像２のリンク先"><img src="画像２のURL" width="150" height="150" /></a>
<a href="画像３のリンク先"><img src="画像３のURL" width="150" height="150" /></a>
</div>
と、いうことは、imgタグを追加したり、srcの画像ファイルを変えてやると・・・。
ちゃんと画像が増えたり、変わったりします！
ただし、スライドショウ自体の大きさや切替効果は、設定画面で指定したもので、個別に変えることはできません。
また、設定画面にid指定があることからも分かるように、スライドショウとして働くのは、１ページにつき１箇所だけです。
バグ？
IE8で・・・
いろいろ試しているときに、IE8で表示すると画像が横方向に拡大されることがありました（IE6やIE7では正常なのに）。
その時は各画像にリンクを指定すれば正常に表示されましたが、他の画像ファイルでは再現しません。
どうしてもリンクを貼りたくない場合は、href=”javascript:void(0);” とでもすればいいと思います。
間隔が不規則？
あと、どのブラウザでも切替間隔が一定じゃないような気がします。すぐに切り替わったり、長い間真っ白だったり。
うーん、自作のコードを組み込んだほうがいいかな・・・。
関係ありそうな記事
WordPress研修 の記事