色々な効果のスライドショーを簡単に実装できるWordPressプラグイン「WP-Cycle」

設定画面について

Upload New Image
“Upload”ボタンで、使用したい画像をアップロードします。

それぞれの画像からリンクさせたいページがあれば、Image Links To欄でリンク先のURLを指定して、“Update”ボタンで反映させます。

Transition Enabled
ここにチェックを入れると、スライドショーの画像切替時にアニメーション効果が表われます。

Transition Effect: 画像切替のアニメーション効果を選択できます。現在のところ、効果は全部で8種類あります。

Transition Delay
1枚の画像を表示する時間(秒)を設定できます。

Transition Length
画像切り替えのスピード(秒)を設定できます。

Image Dimensions
スライドショー自体の縦横サイズを設定できます、ここで設定したサイズよりも大きい画像は、自動的にトリミングされます。

Rotator DIV ID
ソースコードに表記される、スライドショーのdiv要素に使用されるIDです。

スライドショーの設置方法

投稿記事や固定ページに設置したい場合は、ショートコードを記述します。

[wp_cycle]

テーマ(php)ファイルに直接書き込みたい場合は、下記のように記述します。

<?php wp_cycle(); ?>

スライドショーを複数作るには？

WP-Cycle設定画面で作られるスライドショーは1種類のみで、複数のスライドショーを作成することができません。

ページごとに異なるスライドショーを掲載したい場合は、下記のような HTMLコードを直接書き込みます。

<div id="rotator">
<a href="画像1のリンク先">
<img src="画像1のURL" width="468" height="260" /></a>
<a href="画像2のリンク先">
<img src="画像2のURL" width="468" height="260" /></a>
<a href="画像3のリンク先">
<img src="画像3のURL" width="468" height="260' />></a>
</div>

HTMLコードを直接記述することで、複数のスライドショーを作成することができます。

rotator の部分は、WP-Cycle Settings 設定したID属性名を記述します。

不具合・気になる点

スライドの間隔が不規則な時がある
全ブラウザで確認したわけではありませんが、画像切替の間隔が不規則な時があります。ページを開いた直後は、切り替わるのに時間がかかることがあります。

画像にカーソルを合わせているとスライドしない
こらは不具合ではなく、プラグイン制作者さんの配慮かもしれませんが、リンク先が指定されている画像にカーソルを合わせていると、画像はスライドせずに静止します。

IE8で正しく表示されないことがある
画像にリンク先が貼られていない場合、正しく表示されない場合があるようです。この場合は適当なリンク先を指定するか、“javascript:void(0);”などを指定すれば解決できます。

安定性を優先して考えるなら jQuery Cycle Plugin を使った方が良さそうですが、手っ取り早く、しかも簡単にWordPressでスライドショーを実装できるのは、こちらの WP-Cycleプラグインだと思います。

ダウンロード

» WP-Cycle