WordPressにスライドショーを入れられるプラグイン WP-Cycleを試してみました。



基本的な使い方
インストールと有効化
インストールは他のプラグイン同様で、pluginフォルダにアップロードして、プラグイン設定で有効化するだけです。
有効化するとプラグインメニューの中に 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="画像1のリンク先"><img src="画像1のURL" width="150" height="150" /></a>
<a href="画像2のリンク先"><img src="画像2のURL" width="150" height="150" /></a>
<a href="画像3のリンク先"><img src="画像3のURL" width="150" height="150" /></a>
</div>
と、いうことは、imgタグを追加したり、srcの画像ファイルを変えてやると・・・。
ちゃんと画像が増えたり、変わったりします!
ただし、スライドショウ自体の大きさや切替効果は、設定画面で指定したもので、個別に変えることはできません。
また、設定画面にid指定があることからも分かるように、スライドショウとして働くのは、1ページにつき1箇所だけです。
バグ?
IE8で・・・
いろいろ試しているときに、IE8で表示すると画像が横方向に拡大されることがありました(IE6やIE7では正常なのに)。
その時は各画像にリンクを指定すれば正常に表示されましたが、他の画像ファイルでは再現しません。
どうしてもリンクを貼りたくない場合は、href=”javascript:void(0);” とでもすればいいと思います。
間隔が不規則?
あと、どのブラウザでも切替間隔が一定じゃないような気がします。すぐに切り替わったり、長い間真っ白だったり。
うーん、自作のコードを組み込んだほうがいいかな・・・。