ブログなどサイトを運営する際、コンテンツを充実させるために画像を多用する場合があります。
そんなとき、画像のデザイン性を高めるとさらにコンテンツも魅力的になります。

そんな画像コンテンツの充実を図る目的として、今回ご紹介するのはWordPressプラグイン「WordPress Content Slide」です。
これを導入することで、画像に動きが生まれるスライドショーを表示出来るようになります。

注)プラグインの設定方法はWordPressのバージョンアップで変わることがあり
解説とは異なる場合がございますので、予めご了承下さい。

ContentSlide
 

 

 

 

 

WordPress Content Slideとは?

WordPress Content Slideを使えば、サイトページに簡単にスライドショーが出来るコンテンツを設置出来ます。
スライドショーとは、時間経過など特定の条件で同じ個所にある画像が次々に入れ替わる事。
このプラグインを使ったスライドショーの実際のサイトがコチラ⇒【Wordpress Tutorials】

 

これがあれば見る人を楽しませることも出来、サイトの滞在時間を増やす効果もあります。
また、このプラグインにより他者とも差別化が図れますので、サイトの充実化のためにもオススメなプラグインです。

 

WordPress Content Slideのインストール方法

インストール方法は他のプラグインと同じですので
こちらを参照してインストールを行って下さい。
参照記事:【WordPressプラグインの基本的なインストール方法】

 

WordPress Content Slideの設定方法

WordPress Content Slideをインストールし有効化すると、WordPressの管理画面(ダッシュボード)から「設定」⇒「Content Slide」をクリックします。


 

「Content Slide」をクリックすることで設定画面が表示されますので
ここでスライドショーをする画像の設定を行っていきます。

 

スライドショーの基本設定「General Seting」

下図を参考にスライドショーをする画像のサイズ(赤枠部分)を設定します。


 

なお、上図「General Seting」の設定項目は以下のようになっています。


  • 「Image width」:スライド画像の横幅
  • 「Image height」:スライド画像の縦幅
  • 「Border width」:スライド画像の枠線の太さ
  • 「Border color」:スライド画像の枠線の色

スライド画像の設定であれば、その他の項目を変更する必要はありません。

 

以下、設定項目がいくつかありますが、スライドショー画像であれば特に設定は必要ありませんので解説を割愛させていただき、「Images Source Settings」の部分のご説明をします。
ここで入力が必要なのは、下図の「Custom Image」の部分です。


  • 「Image ○ SRC」:スライド画像ファイルのURL
  • 「Image ○ Link」:スライド画像をクリックしたときのリンク先URL

「Image ○ SRC」および「Image ○ Link」の○は1~5まで。
つまり最大5枚まで画像をスライド表示出来ます。
なお、リンク先URLはリンクしない場合は設定の必要はありません。

 

ちなみに、画像ファイルのURLというのは、WordPressの編集時に「メディア追加」時に画像を取り込んだ時に付けられるURLです。

(下図参照)


 

以上、スライド画像の設定が終わったら「Save Settings」をクリックして保存して下さい。

 

スライドエフェクト・アニメーションの設定「Effects & Animation Settings」

ここで実際のスライドショーの表示スピードやエフェクト(アニメーション効果)などの細かい設定が出来ます。


以下、設定項目の内容を記載します。

  • 「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」:マウスをスライド画像に当てた時、画像切替アニメーションを停止させるか否かを選択
  • 「Navigation Previous/Next」:ボタン表示(「前へ(<)」「次へ(>)」)させるか否かを選択
  • 「Navigation Buttons」:ナビゲーションボタンを表示させるか否かを選択
  • 「Navigation Buttons Color」:ナビゲーションボタンの色指定
 

スライド画像にコメント文を載せるための設定「Images Source Settings」

ここでは、スライド画像にタイトルや説明文などのコメントを付けたい場合に設定します。
まず、コメントを付けたい場合は下図のように「Display Heading and Text?」を「YES」に変更します。


 
  • 「Font family」:コメント文字の種類
  • 「Text font size」:テキスト文字のフォントサイズ
  • 「Text color」:テキスト文字のフォント色
  • 「Heading font size」:タイトル文のフォントサイズ
  • 「Heading color」:タイトル文のフォント色
  • 「Background color」:タイトル文の背景色(透過)
 

WordPress Content Slideの使い方

Content Slideの使い方は、サイトページのスライドショーを表示させたい箇所のテンプレートファイル内に、以下のタグを設置するだけです。


<div align="center">
<?php
if(is_front_page())
{
if(function_exists('wp_content_slider')) { wp_content_slider(); }
}
?>
</div>
 

これにより、後は自動でスライドショーが表示されるようになります。