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

WP-CycleはWordPressで作成した自分のサイトまたはブログで、スライドショーを実行できるWordPressプラグインです。このWP-Cycleは、JavaScriptライブラリであるjQuery Cycle PluginがWordPress用のプラグインとして使えるようになったものです。

» サンプルデモ（こちらのサンプルデモは jQuery Cycle Plugin のものです）

プラグインの入手と有効化

こちらのページから wp-cycle.zip ファイルをダウンロードして解凍する
wp-cycle フォルダを wp-content/plugins ディレクトリにアップロードする
WordPress 管理画面にログインする
ダッシュボードからプラグインメニューに入る
WP-Cycle の項目で「使用する」をクリックしてプラグインを有効化させる

※プラグインの新規追加でダウンロードした zip ファイルを直接インストール、もしくはプラグインを検索してインストールする事もできます。

WP-Cycle設定画面の説明

WP-Cycle

Upload New Image
“ファイルを選択”でPC内から画像を選択して、“Upload”ボタンでアップロードします。

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

WP-Cycle

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

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

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

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

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

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

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

各テンプレート(phpファイル)に設置する場合は、<?php wp_cycle(); ?>を入れると、そこにスライドショーが表示されます。

そして、この記事の様に通常の投稿記事や固定ページに設置する場合は、ショートコード[wp_cycle]を入れてスライドショーを表示させます。

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

WP-Cycle設定画面で作られるスライドショーは1種類のみで、複数のスライドショーを作成することができません。つまり、投稿記事ごとに違うスライドショーを掲載したくても、このままではできません。

それを解決するには、投稿記事やページなどに、下記のようにソースコードを直接書き込んでやることです。

<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>

このソースコードを使い回せば、投稿記事ごとに個別でスライドショーを作成することができます。

ただし、スライドショー自体のサイズや、画像切替のアニメーション効果、ID属性の名前は個別に変更はできず、先ほどの設定画面で指定したものとなります。

また、ID属性で指定されているため、スライドショーとして設置できるのは、1ページにつき1箇所のみとなります。