今回はDivi専用の有料プラグイン、DTS Blog Module Proについてご紹介します。

一体全体どんなプラグインなのかというと、このプラグイン１つでほぼBlogの一覧ページはできちゃうという優れものです。

このプラグインを使って私が作ったサンプルページがこちらです。

サンプルページをみていただけるとお分かりの通り、デザインはシンプルですがとてもスタイリッシュです。ちなみにデザインに関してはほとんど手を加えておらず、デフォルトのデザインを使用しています。このままでも十分使えるデザインですね^^

プラグインを購入すると、Diviテーマで使えるブログモジュールと、サイドバーで使えるブログページ用のウィジェットが３つインストールされます。

■　プラグインスコア

プラグインの扱いやすさ　★★★★☆

カスタマイズ度　★★★☆☆

コストパフォーマンス　★★★★★

総合評価　★★★★☆

購入方法・プラグインの使い方については、以下で詳しくご紹介します^^

DTS Blog Module Proの使い方

プラグインの購入方法とインストール

まずはこちらのリンクをクリックして、プラグインのオフィシャルサイトに飛びます。

購入商品は$20のSINGLE LICENSEを選択します。

Produce On Cart! Go to Check Out!というボタンをクリックして、購入画面に進みます。

必要事項を記入したら、I’ve read and accept the terms & conditionsにチェックを入れて、PROCEED TO PAYPALボタンをクリックします。

決済には、Paypalアカウントが必要です。

購入すると、登録したアドレスにダウンロードのリンクとAPI Lisence Keyが届きます。

メール内にあるDownload Filesというリンクをクリックして、ダウンロードページに飛びます。次に、左サイドバーにあるAPI DOWNLOADSをクリックして、購入したプラグインをダウンロードします。

ダウンロードできる商品が表示されていない場合は、API KEYSというメニューをクリックして、先ほどメールで送られてきたAPI KEYを登録します。

次にWordpressのダッシュボードに戻り、プラグイン>>新規追加>>プラグインのアップロードの順にクリックし、ダウンロードしたzipファイルをアップロードします。

プラグインのインストールが成功したら、プラグインを有効化します。

モジュールの使い方

このプラグインは残念ながら、ビジュアルビルダーでのモジュール設定ができないので、Diviビルダーにてカスタマイズをします。

Diviビルダーの使い方が分からない方は、こちらで詳しく使い方について紹介しているので、ぜひご覧ください。

WordPress人気テーマ【Divi】チュートリアルシリーズ：Diviビルダーの使い方

ダッシュボードから固定ページ>>固定ページ一覧もしくは新規追加で編集したいページを選択したら、Diviビルダーを立ち上げます。

今回は後ほどウィジェットを使ったサイドバーをブログページに挿入するので、特別セクションを選択し、左バーとコラムがあるセクション構成を選択します。

左側のセクションには、１コラムを選択します。

次にコラムにモジュールを挿入します。一度プラグインをインストールすると、モジュール一覧の中にDTS Blog Module Proが追加されます。

モジュールの設定を行います。

まずはコンテンツの設定を行います。

投稿数: 投稿数を設定するとページごとに表示したい記事の数が選択できます。例えば10件を選択した場合、一覧には最大10記事が表示され、10記事を超えた場合は、一番下にページ送りのナビゲーションが表示され、次の10件または前の10件などに進むことができます。

カテゴリーを追加: 特定のカテゴリーのみを一覧表示させたい場合に、チェックを入れます。何もチェックを入れない場合は、全カテゴリーの記事が表示されます。

コンテンツ：　抜粋表示にするか、コンテンツ内容を全表示にするかを選択します。抜粋のデフォルトは270文字です。変更したい場合は、PHPファイルを直接編集する必要がありますが、ここでは省略します。興味がある方は、こちらのブログで詳しくやり方を説明していますので、ご覧ください（英語）。

オフセット数：ここに数字を記入すると、最新から指定の数字の数の記事が表示されません。例えば一番最新の記事だけ別のセクションで大きく表示させたいというときなどに使います。

要素では、カテゴリーや日付などブログ一覧に表示させたい情報を選択することができます。

次にレイアウトの表示を設定します。ここではフルワイドにするかグリッド表示にするかを選択することができます。

Alternate Positionをオンにすると、レイアウトがフルワイドになっている場合、記事のサムネイルが左と右交互に表示されるようになります。

具体的な表示の違いは、こちらのDemoをご覧ください。

オーバーレイを設定すると、カーソルをサムネイルに当てた時に、画像がオーバーレイ表示になります。また画像の上にアイコンを表示させることもできます。

例）

その他のヘッダーテキストなどの設定は他のモジュール設定と同じなのでここでは省略します。

変更が終了したら公開をクリックして、変更を保存・反映させます。

色の変更はモジュールの設定ウィンドウで変更することもできますが、モジュールカスタマイザーでも変更することができます。

ダッシュボードのDivi>>モジュールカスタマイザー>>Divi Custom Blog Layoutの順にクリックして設定画面を開くと各パーツの色の変更ができます。

ウィジェットの使い方

このプラグインには、３つのウィジェット機能、About me(プロフィール)、最新記事、人気記事の表示、が含まれています。

このウィジェットを左のサイドバーに表示させてみたいと思います。

まずは左サイドバーにウィジェットを設定します。ダッシュボードの外観>>ウィジェットからウィジェットの設定画面にいきます。

利用できるウィジェットにDCM-About, Divichild Latest Posts, Divichild Popular Postsの３つが新しく加わっているので、サイドバーの欄にドラッグ&ドロップします。

各ウィジェットにプロフィールや、ウィジェットのタイトル、または表示件数などを記入します。

サイドバーの設定が終わったら、先ほどの固定ページの編集に戻ります。

今度は右のサイドバーにサイドバーモジュールを追加します。

実際どのように表示されているかは、こちらのデモページをご覧ください。

まとめ

このプラグイン１つでブログページの作成には事足りるので、20ドルという価格はコストパフォーマンス的に◎ではないかなと思います。

扱いやすさの一方、デザインのカスタマイズ性は低いですが、このままのデザインで十分使えるレベル！

大体のブログモジュールは、ほとんど色を変えたりフォントサイズをするぐらいのカスタマイズしかできないので、まあこんなもんかなと思います。

ちなみにブログ一覧のデザイン変更は、Webのコード知識がいるので、初心者の方にはほとんど無理かも。。なので、自分でスクラッチで作るよりは、今回のDTSや以前このブログで紹介したDivi Article Cardなどのプラグインを使った方が余計な時間と労力を使わずにすみます。

今回も長々と最後までおつきあいいただきありがとうございました。

今回のチュートリアルに関してわからないところ、または質問等ございましたらお気軽にお問い合わせください。

また使い方を紹介してほしいWordpressのテーマ・またはプラグインのリクエストも大歓迎です^^

それではまた次回のチュートリアルでまたお会いしましょう！ See you later<3