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

公開日: : 最終更新日:2014/10/15 webサービス, Wordpress , ,

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

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

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

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

Dynamic Content Galleryって?

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

こんなスライドができます

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

公式ページ(英語):Studiograsshopper

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

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

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が入力されていない場合に表示する画像を設定できるようなのですが、僕の環境では動作しませんでした。

Multi Optionモード

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

すべてのカテゴリーから好きな記事を選択できるのでこのモードは便利ですが、便利な分データベースには負担がかかります。
ひとつのカテゴリーを表示したいときは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が指定されていない場合に表示する画像を設定できます。

ID Methodモード

並び替えの指定

スライドの見た目を決める「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]ホバー時のフォント太さ

スライドのCSS1

スライドのCSS2

スライドのCSS3

画像の選び方を決めるImage Managementタブ

Image Managementタブではスライドに使われる画像を自動で取得するか、自身で指定するかを設定できます。

Image Managementタブ

その1 Auto

「Auto」を選択すると投稿の一番初めに出てきた画像をスライドに使用します。

ただし画像の選択は初回投稿時の1度だけしか行われず、記事を更新して画像を差し替えてもスライドに使われる画像ははじめのものから変わりません
画像を差し替えるには別のプラグインを使ってサムネイルを作り直す必要があります。

その2 Full URL

「Full URL」では各投稿編集画面の「Dynamic Content Gallery Metabox」で表示する画像の指定を行います。

画像URLの指定

「Image URL」に表示したい画像の絶対パスを入力すると、選択した画像がスライドに使われるようになります。

絶対パスって?

http://ホームページの名前/wp-content/…
のように目的のファイルまでの道筋を省略せずに表記する方式のこと。

その3 Partical URL

こちらは画像を階層フォルダで管理している場合に使うモードですが、現在使用が推奨されていないようです。
別のモードを使うようにしましょう。

本文の抜粋を決める「Descriptions」タブ

Descriptionsタブではスライドの下部に表示される記事説明文を管理できます。

記事説明文の設定

その1 Auto

「Auto」モードを選ぶと記事本文から指定した文字数を自動で抜粋し、プレビューを表示してくれます。
しかし僕の環境では文字数の指定が動作せず、本文すべてが引用されてしまいました。
このモードは文字数の指定がきちんと働くか確認した上で使いましょう。

Autoモード

その2 Manual

「Manual」モードでは記事編集画面で指定した文をプレビューに使用します。
記事編集画面のMetabox内「Slide Pane Description」に表示したい文章を入力してください。

記事説明文を入力

Metaboxに文章が書かれていない場合には管理画面に入力したデフォルト文章が表示されます。

デフォルト文章の指定

Metaboxに文章がなくデフォルト文章も指定されていない場合には、そのスライドは自動的に「Auto」モードになります。
文字数指定が効いていない場合本文すべてが表示されることになるので、デフォルト文章は必ず指定するようにしてください。

その3 None

プレビューを表示したくない場合に指定します。
Slide Paneにはタイトルのみが表示されます。

プラグインの実装コード

プラグインの実装はとても簡単です。
スライドショーを表示させたい位置に

<?php dynamic_content_gallery(); ?>

と記入するだけです。

さらに便利に

特定記事を除外

記事編集画面のMetaboxで「Exclude this Post/Page from gallery?」にチェックを入れるとその記事をスライド表示候補から除外します。

記事をスライドから除外

スライドに使っているカテゴリーの記事だけどこの記事だけは表示したくない、という場合に使えます。

ロード時間短縮

スライドがサイトのどのページに使われているかを指定することでjavascriptのロード時間を削減できます。
この設定はLoad Scriptsタブから行うことができます。
デフォルトではトップページにスライドがある場合に最適化されています。

ロード時間短縮

まとめ

Dynamic Content Galleryは一度設定を行えばそれ以降自動でスライドを生成します。

スライドを導入したいけれど更新が面倒」「サイトの表情を手軽に変えたい」という方は導入してみてはいかがでしょうか。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

 これは!と思ったらシェアして頂けると嬉しいです
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 111 follow us in feedly
Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PROFILE

Jimon Profile
Jimon
東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
お問い合わせ

About


おしゃれな小物とiPhone,Macの情報発信ブログ。
管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

PAGE TOP ↑