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

Web制作テクニック

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

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

[adsense]

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

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

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

このプラグインの使い方

設定画面について

WP-Cycle

Upload New Image
“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です。

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

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

[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

この記事を書いた人

2 件のコメント

  1. ありがとうございます。参考にさせて頂きました。

    現在ブログ製作中ですので、そちらにも記事のリンクを貼らせて頂いて宜しいでしょうか?

    • 参考にしてくださいましてありがとうございます。
      その上リンクまで貼って頂けるなんて恐縮です。

      これからも是非よろしくお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です