月別アーカイブ
検索

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



基本的な使い方

インストールと有効化

インストールは他のプラグイン同様で、pluginフォルダにアップロードして、プラグイン設定で有効化するだけです。

有効化するとプラグインメニューの中に WP-Cycle サブメニューが追加されます。下が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="画像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);” とでもすればいいと思います。

間隔が不規則?

あと、どのブラウザでも切替間隔が一定じゃないような気がします。すぐに切り替わったり、長い間真っ白だったり。

うーん、自作のコードを組み込んだほうがいいかな・・・。

関係ありそうな記事

コメント