WordPressスライダープラグインの決定版！「Dynamic Content Gallery」の使い方

ホームページのデザインで一番こだわりが出るのはやはりトップページではないでしょうか。
あまり派手すぎても見づらいし、地味すぎるとぱっとしない、頭の悩ませどころです。

僕の場合は大きなコンテンツスライダーを表示してページの見た目を引き締めています。
見るたびに違う画像が出てくると見ていて飽きませんし、スライドの色味がサイトの表情をがらっと変えてくれます。

今回は記事からコンテンツスライダーを自動生成してくれるプラグイン「Dynamic Content Gallery」を紹介していきます。

Dynamic Content Galleryって？

Dynamic Content Galleryは選択したカテゴリーから自動的にスライドを作成してくれるWordpressプラグインです。

記事を書くたびにスライダーの中身を自動で入れ替えてくれるので、手間を掛けず手軽にスライダーを作成できます。
またスライドに使う記事の選別方法などカスタマイズも豊富です。

公式ページ(英語):Studiograsshopper

プラグインをダウンロード

ダッシュボードのプラグインタブから「新規追加」をクリックすると下のような画面になります。
「Dynamic Content Gallery」で検索してプラグインをダウンロード、有効化してください。

有効化が完了すると「設定」タブにDynamic Content Galleryの管理ページが追加されます。

管理ページに入るとこのような画面になっています。

以下では各タブでどういった設定ができるのか説明していきます。

基本の動きを決める「Javascript Option」タブ

このタブではjavascriptフレームワークの選択やスライドの基本動作を設定します。

フレームワークの選択

Dynamic content Galleryでは「Mootools」か「jQuery」のどちらかを使ってスライドを動作させます。
ご自身のサイトでお使いになっている方をチェックしてください。
なお僕はjQueryを使っているので以下の説明はjQueryを用いた場合のものになっています。

基本の設定

下部の「jQuery Javascript configuration options (OPTIONAL):」で基本の設定を行います。
スライド各部の名称はこの様になっています。

各項目の設定内容は以下のとおりです。

「Show Carousel」	右上のカルーゼルの表示/非表示を設定します。デフォルトは表示です。カルーゼルをクリックするとスライドの内容一覧が表示されます。
「Carousel label」	カルーゼルに表示される文字を設定します。
「Show Slide Pane」	下部にスライドペインを表示します。
「Do not animate Slide Pane」	チェックを入れるとスライドペインが固定表示されます。チェックの入っていない状態では、スライドが切り替わるとスライドペインが下からにゅっと出てくるアニメーションがつきます。
「Slide Pane Opacity」	スライドペインの透明度を変更します。0.0が完全透過で1.0が完全不透過です。
「Show Arrows」	チェックを入れるとスライドの切り替えボタンが表示されます。
「Timed transitions」	チェックを入れると設定した時間でスライドが切り替わります。
「Transitons delay 」	スライドの切り替わり時間を指定します。単位がミリセカンドなので注意してください。1000ミリセカンドが1秒です。

スライドのカテゴリーを決めるGallery Methodタブ

Gallery Methodタブではスライドに用いるカテゴリーを選択します。
モードは3つ用意されており、各モードの詳細設定はページ下部で設定できます。

その1　Multi Option

「Multi Option」モードではすべてのカテゴリーから最大9枚のスライドを作成できます。
詳細設定では各スライドごとにカテゴリーを指定し設定を行います。
右側の数字は最新から何番目の記事を表示するかを表します。
たとえば「1」だと最新の記事、「2」だと最新から2番目の記事を表示します。

下部の「URL to default images folder:」ではMetaboxに画像URLが入力されていない場合に表示する画像を設定できるようなのですが、僕の環境では動作しませんでした。

常にこのモードじゃダメなの？

すべてのカテゴリーから好きな記事を選択できるのでこのモードは便利ですが、便利な分データベースには負担がかかります。
ひとつのカテゴリーを表示したいときはOne Categoryモードを使うようにしましょう。

また9枚もスライドが必要ないときは数字部分を消してスライドを非表示にしてください。

その2　One Category

「One Category」は1つのカテゴリーのみでスライドを作成したい場合に使うモードです。
“Select the Category”でカテゴリーを、”Number of Posts to display”で表示するスライドの数(2〜15枚)を指定します。

One Categoryモード

下部の「URL to default images folder:」はMulti Optionモード同様動作しませんでした。

その3　ID Method

「ID Method」モードはスライドに使う記事を個別に指定できるモードです。
指定した記事からスライドを作るので、記事を新たに投稿してもスライドには変化がありません。

「Page/Post ID numbers:」でスライドに使う記事のIDを設定します。
「Use Custom Image Order:」にチェックを入れると記事編集ページのMetaboxでスライドを並び替えることができます。
「Specify a default image:」に画像のパスを入力すると、Metaboxで画像URLが指定されていない場合に表示する画像を設定できます。

スライドの見た目を決める「Gallery CSS」タブ

このタブではスライドのサイズ、見た目を設定できます。
各項目の内容は以下のとおりです。

「Gallery Width」	スライドの横幅
「Gallery Height」	スライドの高さ
「Gallery Background」	スライドの背景色
「Gallery border width」	スライドの枠線の幅
「Gallery border colour」	枠線の色
「Slide Pane Height」	jQueryを使っている場合は変更できません。
「Slide Pane Background」	Slide Paneの背景色
「Heading font size」	ホームページ記事タイトルのフォントサイズ
「Heading font weight」	記事タイトルのフォント太さ、boldが太め
「Heading font color」	記事タイトルの文字色
「Heading Padding top and bottom」	記事タイトルの上下余白(Padding)
「Heading Padding left and right」	記事タイトルの左右余白(Padding)
「Heading Margin top and bottom」	記事タイトルの上下余白(Margin)
「Heading Margin left and right」	記事タイトルの左右余白(Margin)
「Description font size」	記事説明文のフォントサイズ
「Description font color」	記事説明文の文字色
「Description line height」	記事タイトル、記事説明文の高さ
「Description Padding top and bottom」	記事説明文の上下余白(Padding)
「Description Padding left and right」	記事説明文の左右余白(Padding)
「Description Margin top and bottom」	記事説明文の上下余白(Margin)
「Description Margin left and right」	記事説明文の左右余白(Margin)
「Description More link colour」	[more]の文字色
「Description More link font」	[more]のフォント太さ
「Description More link hover colour」	[more]ホバー時の文字色
「Description More link hover font weight」	[more]ホバー時のフォント太さ