Diviプラグインのハイライト：Divi FilterGrid

Divi FilterGridは、新しいフィルター可能なモジュールをDiviBuilderに追加するサードパーティのプラグインです。 任意のカスタム投稿タイプの投稿を表示し、選択した分類法に従ってそれらを表示するカスタムフィルターを作成できます。 ブログの投稿、プロジェクト、製品の表示、ギャラリーの作成など。

このプラグインのハイライトでは、Divi FilterGridを見て、何ができるかを確認し、使いやすさを確認します。 プラグインは開発者のWebサイトから購入できます。

DiviFilterGridモジュール

DiviFilterGridモジュールがDiviBuilderに追加されます。 アイコンはカラーで、他のアイコンとは一線を画しています。

DiviFilterGridコンテンツタブ

[コンテンツ]タブには多くの機能が追加されています。 これらには、すべての背景色を調整するための投稿要素、クエリオプション、フィルターオプション、ページ付けオプション、および背景が含まれます。 また、標準のリンクと管理ラベルのオプションも含まれています。

投稿要素

[要素を投稿]オプションを使用すると、注目の画像を表示または非表示にして、サムネイルアクションを決定できます。 投稿にリンクしたり、ライトボックスやライトボックスギャラリーに画像を表示したり、ポップアップに投稿を表示したり、カスタムライトボックスギャラリーを開いたりすることができます。 この例では、ポップアップで投稿を表示しています。

これは、ライトボックスギャラリーで画像を開きます。 読者は矢印を選択して、すべての投稿の注目の画像を見ることができます。 投稿のタイトルをクリックしても、同じタブで投稿が開きます。

オーバーレイの色、アイコン、およびアイコンの色を変更することもできます。 上の画像でこれらをそれぞれカスタマイズしました。 また、タイトルの表示、タイトルへのリンクの追加、抜粋の追加、抜粋の文字数の制限、続きを読むボタンの表示、カスタムフィールドの追加などを行うこともできます。 抜粋を追加し、投稿メタを無効にしました。

クエリオプション

クエリオプションを使用すると、[基本]、[詳細]、および[カスタム]からクエリタイプを選択できます。 カテゴリ、投稿番号、オフセット番号、およびオプションによる順序を選択します。 この例では、1つのカテゴリを選択しました。

詳細オプションは、いくつかの新機能を提供します。 特定の投稿タイプ、分類法、用語を選択し、用語と分類法を除外します。 プライベート投稿やスティッキー投稿を表示することもできます。 上記の例では、分類法を設定しています。 使用する特定のカテゴリまたはタグを選択して、検索語との関係を指定できます。 子用語は同じように機能します。 これにより、カテゴリやタグに基づいて投稿を表示するだけでなく、さらに詳細な情報を取得できます。 分類法の投稿番号と注文オプションを設定することもできます。

カスタムクエリタイプを使用すると、カスタムコンテンツを使用できます。 これを設定する方法を学ぶことができるドキュメントへのリンクを提供します。 カスタムクエリは、functions.phpファイルのコードを使用して実行されます。 ドキュメントには、手順を説明するためのいくつかの例が含まれています。

フィルタオプション

フィルタオプションを使用すると、検索語でグリッドをフィルタリングできます。 デフォルトのフィルターを選択すると、投稿とプロジェクトのカテゴリとタグを選択できるモーダルが表示されます。 注文を設定し、ID、名前、またはカスタム注文でフィルタリングすることもできます。 カスタムオーダーの場合、値をカンマで区切って入力できるボックスが表示されます。

ページ付けオプション

ページネーションオプションを使用すると、ページネーションタイプを選択できます。 ページ付き、さらに読み込むボタン、またはスクロールでさらに読み込むボタンから選択します。 ページオプションでは、矢印、テキスト、およびリンクに表示されるページ数を選択できます。 この例では、テキストを追加して矢印を変更しました。

バックグラウンド

背景設定を使用すると、グリッド、フィルター、アクティブフィルター、ページ付け、およびアクティブページ付けの背景をカスタマイズできます。 また、Diviモジュールに期待される標準のバックグラウンドオプションも含まれています。 上記の例では、フィルター、グリッド、およびページ付けの背景色を調整しました。

DiviFilterGridデザインタブ

[デザイン]タブでは、レイアウトオプション、投稿タイトルテキスト、投稿メタデータテキスト、投稿コンテンツテキスト、フィルターテキスト、ページネーションテキスト、[続きを読む]ボタン、[さらに読み込む]ボタン、およびすべての標準Diviモジュールオプションをカスタマイズできます。

レイアウトオプション

レイアウトオプションを使用すると、レイアウト、スキンを選択し、アイテムの幅、列と行のガターサイズ、およびグリッドフォントサイズを設定できます。 アイテムの幅を狭くし、ガターを削除して、スキンにミッドナイトを選択しました。 フォントサイズも小さくしました。

これは左垂直フィルターです。 フィルタを左側の垂直スタックに配置します。 画像が大きくなるようにアイテムの幅を広げました。

これはオーバーレイのアイテムです。 このオプションでは、投稿が短くなります。

ズーム画像は、中央にオーバーレイとタイトルが付いた各画像を表示します。 ホバーすると画像が拡大します。

ライブラリは境界線のあるカードを表示し、画像の上にタイトルを配置します。

これは、デフォルトのスキンを使用したリストレイアウトです。

これは全幅です。 タイトル、メタ、抜粋を画像の下部に配置します。

DiviFilterGridモジュールの[詳細設定]タブ

[詳細設定]タブでは、モジュール内のほぼすべての要素に15個のカスタムCSSフィールドが追加されます。 CSSユーザーは、カスタマイズする特定の要素をターゲットにするのに問題はありません。

DiviFilterGridモジュールのスタイリング

レイアウトオプションは、いくつかの興味深いデザインを作成できます。 この例では、幅を減らして1行に表示しています。 メタと抜粋も削除しました。

今回はアイテム幅を広げました。 これにより、素敵なモザイクギャラリーデザインが作成されます。

これには、タイトル、すべてのメタ、抜粋、および続きを読むボタンを追加しました。 タイトルの色を変更し、すべて大文字にし、サイズを大きくし、中央に配置し、文字間隔を大きくしました。 また、[続きを読む]ボタンのサイズを小さくし、テキストのスタイルを白にしました。

続きを読むボタンにはたくさんのスタイリングオプションがあります。 これについては、デフォルトのサイズに戻しましたが、テキストを軽量にしました。 エッジを丸めて、背景にグラデーションを付けました。

エディタモードでは表示されませんが、ボタンに画像を追加することもできます。 画像を単独で、ソリッドオーバーレイを使用して、またはグラデーションオーバーレイを使用して追加できます。 この例では、緑のグラデーションの後ろに画像を追加しました。

投稿メタデータテキストは、すべての投稿メタをまとめて調整します。 色と行間隔を変更しました。

フィルタテキストを使用すると、フィルタのフォントのスタイルを設定できます。 フォントのサイズを大きくし、色を変更し、シャドウ効果を追加しました。 デフォルトのフィルタースタイルでは、選択したフィルターの色が異なります。 [コンテンツ]タブの[背景]オプションで個別に調整できます。

この例では、ページネーションテキストを調整しています。 色を変更し、サイズを大きくし、文字間隔を追加し、影を追加しました。 ぼかしの強さも調整しました。

さらに読み込むボタンには、基本的なスタイリングオプションも含まれています。 デフォルトのテキストを使用しています（コンテンツタブで変更できます）。 また、テキストを白に設定しました（デフォルトでは緑です）。

フォントサイズを大きくし、文字間隔を追加し、境界線を調整し、グラデーションを追加し、ホバー時にアイコンのみを表示することを無効にしました。

DiviFilterGridとカスタム投稿タイプ

カスタム投稿タイプで使いやすいことがわかりました。 クエリオプションで、[投稿タイプの選択]をクリックし、モーダルから投稿タイプを選択します。

元のフィルターは引き続き表示されますが、独自のフィルターを作成することも、無効にすることもできます。 フィルタオプションで、[分類法のフィルタ]をクリックし、リストから分類法を選択します。 [値の設定]をクリックします。

これで、WooCommerce製品用のカスタムフィルターができました。

これで、心ゆくまでスタイリングできるWooCommerce製品モジュールができました。

DiviFilterGridブログの例

この例では、DogWalkerレイアウトブログページのブログモジュールを置き換えました。 投稿の色、フォントスタイル、丸みを帯びた角に合わせてスタイルを設定しました。 次に、ブログリストに表示するWooCommerce製品を追加しました。 これは、ブログストリーム内にさまざまな種類のコンテンツを追加するための優れた方法です。

結果は驚くべきものに見えます。 フィルタ可能なブログを作成するか、フィルタを無効にしてコンテンツのみを表示することができます。

DiviFilterGridモジュールのドキュメントと価格

ドキュメントは開発者のWebサイトで入手できます。 ボタンをクリックして、高度な機能に関する特定の情報を表示します。 FAQページにアクセスするか、ここからサポートチケットを送信できます。 モジュール内のすべての機能の疑問符をクリックして、その使用方法の説明を表示することもできます。

DiviFilterGridを購入するには4つのオプションがあります。

• 単一サイト– $ 19
• 5サイト– $ 39
• 無制限のサイト– $ 59
• 生涯無制限のサイト– $ 129

プラグインは開発者のWebサイトから購入できます。

終わりの考え

DiviFilterGridは興味深いプラグインです。 これは、さまざまなタイプのコンテンツを表示するための優れたモジュールです。 実質的にすべての投稿タイプを表示し、複数の投稿タイプを一緒に表示できます。 フィルタリングオプションは、必要に応じて複雑にすることができます。

背景の色調整オプションがあるのが大好きです。 [コンテンツ]タブにカラーオプションがあるということは、カラーオプションが2つの異なる場所にあることを意味します。 これらの色調整を[デザイン]タブに移動すると、少し直感的になると思います。 ただし、色を個別にカスタマイズできるのは素晴らしいことです。

非常に直感的であることがわかりました。 すべてのオプションを確認するために探索することをお勧めします。 投稿タイプを表示するために強力なフィルターグリッドを追加することに興味がある場合は、DiviFilterGridをお勧めする簡単なプラグインです。

我々はあなたから聞きたい。 Divi FilterGridを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

Thepanyo /shutterstock.com経由の注目の画像