wordpressでトップページにスライドショウを導入したいときにオススメのプラグインです。

Skitter Slideshowとは?

「Skitter Slideshow」は、スライドショウを実装するjQueryプラグイン「Skitter」の、wordpressプラグイン版です。Skitterの豊富な機能・多彩なエフェクトはそのままに、wordpressの管理画面上から画像やリンクの設定ができるため、HTMLの知識のない方でもスライドショウを管理できるという大きなメリットがあります。

wordpressプラグインディレクトリのSkitter Slideshowのページはこちら
Skitter本家サイトはこちら

導入方法

wordpressの管理画面から、「プラグイン」→「新規追加」で、『Skitter Slideshow』で検索すれば出てきます。「いますぐインストール」をクリックしてインストール、有効化します。

テンプレートファイルのスライドショウを表示させたい箇所に、以下のコードを追加します。

<?php if ( function_exists('show_skitter') ) { show_skitter(); } ?> 

管理画面の「設定」→「Skitter Slideshow」から、スライドショウを設定すれば、出来上がり。

設定項目

プラグインは英語なので、設定項目がちょっと分かりづらいです。詳細は、Skitter本家のドキュメントを読んでください。

Type of Animationデフォルトのアニメーション
Type of Navigationナビゲーションのタイプ
width横幅
height高さ
crop image画像を設定したサイズで切り抜くか
velocityアニメーションの強さ
interval切り替わる時間
navigationナビゲーションを表示するか
numbers_align番号・ドット・サムネイルの横方向の配置
labelラベルを表示するか
width_labelラベルの幅
easing_defaultデフォルトのイージングの種類
animateNumberOut番号・ドットのマウスアウトしたときのスタイル
animateNumberOver番号・ドットのマウスオーバーしたときのスタイル
animateNumberActive番号・ドットの現在表示されてるもののスタイル
hideTools番号、ナビゲーションを消す
fullscreenフルスクリーンモードにする
show_randomlyランダムに表示する

生成されるコード

テンプレートファイルで指定した箇所に、以下のコードが挿入されます(色々省略してます)。

<style type="text/css">
    スタイル(横幅とか)
</style>
 
<div id="wp_skitter">
    <ul>
        <li>・・スライド1・・</li>
        <li>・・スライド2・・</li>
    </ul>
</div>
 
<script type="text/javascript">
    Skitter呼び出し
</script>

#wp_skitterに対して、marginとかfloatとかを、自分で指定してあげてもいいですね。

実際に使用してみた感想

従来は、こういったスライドショウを管理画面から編集しようと思うと、カスタム投稿タイプなどを使ったり、テンプレートファイルを作ったりで、けっこう面倒でした。そういった意味では、かなり実用性の高いプラグインだと言えます。

ネックは、スライドの並べ替えができないことです。並べ替えをしたい場合は、最初のスライドからひとつづつ再設定する必要があるため、非常に面倒に感じました。でも、それを差し引いても、おすすめできるプラグインです。

気づいたら、うちの会社の本棚に置いてありました。