画像スライドショーを作成できるプラグイン / WordPress Content Slide
2013-02-08
「WordPress Content Slide」のインストール方法
プラグイン → 新規追加 から、「WordPress Content Slide」でプラグインの検索とすると、見つかります。
「いますぐインストール」→「有効化」とします。
または、以下のページからダウンロードできますので、「content-slide.zip」ファイルを、
/wp-content/plugins/ ディレクトリにFTPでアップロードしてもインストールできます。
WordPress Content Slide
http://wordpress.org/extend/plugins/content-slide/
スライドに使用する画像ファイルの準備
今回は、5枚の画像ファイルを使用してみました。
画像ファイルを、WordPress管理画面左メニューのメディア
→ 新規追加 からまとめてアップロードすると楽です。
「編集」画面に入り、名前など判りやすく適宜変更してもOKです。
「WordPress Content Slide」の設定
「General Settings」の欄で、画像のサイズを入力します。
デフォルトでは「Image Width:500px / height:300px」となっているので、
ここを実際に表示するスライドのサイズに変更します。
そのほか必要に応じてオプション設定できます。
Border width: スライドの縁取り線の太さ
Border Color: スライドの縁取り線の色
まず表示させるスライドの画像枚数を「Number of custom Images」の欄に数字で入力します。入力したら、Save Settingsをクリックします。すると、すぐ下の画像指定欄の数が、入力した個数分だけ増減します。ここでスライドに使用する画像ファイルのURLを入力します。
画像ファイルは1枚以上、何枚でもスライドに使用できます。（100枚としても設定できたので、恐らく上限無く・・？！）
Custom Image 1
Image 1 SRC ・・・1枚目スライド画像ファイルのURL
Image 1 Link ・・・スライド画像をクリックしたときのリンク先URL
Custom Image 2
Image 2 SRC ・・・2枚目スライド画像ファイルのURL
Image 2 Link ・・・スライド画像をクリックしたときのリンク先URL
以下同様に、指定した枚数分の画像URLとリンク先URLを指定します。
リンク先URLは、不要の場合（リンクさせない場合）は空欄でOKです。
Open Images/Links In New Window? ・・・リンク先ページを別ウインドウで開く
Order Images Randomally? ・・・画像を、順序ランダムで表示する
入力が完了したら、Save Settingsをクリックします。
スライドの表示方法
トップページなどテンプレートファイル内に、スライドを表示したい場所に下記コードを記述します。
<?php if(function_exists('wp_content_slider')) { wp_content_slider(); } ?>
画像にキャッチコピーや説明文をのせる方法
「Images Source Settings」の欄にあるオプションの中で、「Display Heading and Text?」のところを「YES」に変更し、Save Settingsをクリックすると、すぐ下の画像ファイルURL入力欄に、キャッチコピーと説明文を入力する欄が追加されます。
画像一枚それぞれに入力指定できます。
キャッチコピーの文字サイズ、文字色、背景色などは、上記「General Settings」の欄で指定できます。
Font family:表示させるキャッチコピー文字の種類（全一律で共通）
Text font size: 説明文フォントサイズ
Text color: 説明文フォントの色
Heading font size: キャッチコピーフォントサイズ
Heading color: キャッチコピーフォントの色
Background color: キャッチコピー部分に敷く背景色（薄く透過）
スライドエフェクト･アニメーション設定
Squares per width:エフェクトのスクエアの横幅
Squares per height:エフェクトのスクエアの縦幅
Delay between images in ms:画像と画像の切り替え時間
Delay beetwen squares in ms:エフェクトの速さ
Opacity of title and navigation:透過度
Speed of title appereance in ms:テキストが現れる速度
Effect:画像切り替え時のエフェクト（アニメーション効果）選択
Mouse Over Pause ( Stop Animation on mouseover.)
:マウスをあてると画像切替アニメーションをストップさせるか否か
Navigation Previous/Next ( Previous/Next buttons on image.)
:[前へ（＜）][次へ（＞）]ボタンの表示をするか否か
Navigation Buttons ( Square buttons at bottom )
:スライド枠の下に■■■■□のようなナビボタンを表示するか否か
Navigation Buttons Color ( Square buttons at bottom )
：ナビボタンの色
こちら↓wp-content-slide 説明ページで、実装表示見本を見ることができます
http://wptuts.info/wp-content-slide/
相性・・？
・WordPressに、「jQuery Colorbox（画像リンク：lightBox系のjQueryプラグイン）」が入って有効化されていると、うまくうごきませんでした。（「jQuery Colorbox」が正常な動作をしなくなりました）
・なぜか、Navigation Buttons (■■■■□のようなナビボタン）が表示されませんでした
確認時 WordPress Content Slide Version 1.4.2 / WordPress 3.5