ウェブサイト検索

GridBuilderWP のベスト レビュー: 柔軟なグリッドとフィルター

座ってサッカーの試合を観戦すると、1マイル離れたところからでもスーパースターを簡単に見つけることができます。

彼らのスタイリッシュで洗練されたゲームは他とは一線を画しており、しばしば試合の結果を変えることもあります。ファンや監督が彼らを愛しているのは、彼らがプレーするとき、彼らは最高の状態でプレーできるからだ。

音楽業界のスーパースターにも同じことが当てはまります。通常、彼らは一生懸命仕事をして、私たちにヒット曲をセレナーデして、そしてまだ進み続けます。スターたちはその道の達人であり、私たちの想像力を限界まで押し広げます。

今日のレビューの対象である Gridbuilder WP と同じです。

これが入門書です。グリッド レイアウトの構築は気の弱い人、特に初心者には向きません。これは、ある程度経験のあるユーザーにとっても難しい作業です。

それでも、グリッド レイアウトは、WordPress Web サイト上のコンテンツを表示およびフィルタリングするための素晴らしい方法です。このようなもの：

またはこれ:

しかし、残念なことに、WordPress Web サイトのグリッド レイアウトを作成するのは簡単ではありません。 WordPress グリッド プラグインが登場する前はそうでした。

苦労せずに素晴らしいグリッド レイアウトを作成するには、シンプルかつ強力な WordPress グリッド プラグインが必要です。

このようなプラグインをお探しの場合は、Gridbuilder WP が最適です。

そして、今日のレビュー/ハウツー記事では、Gridbuilder WP が、ますます多くの WordPress ユーザーに選ばれるグリッドおよびフィルター プラグインである理由がわかります。私たちはプラグインの内部を見て遊んでいますので、それが楽しいことはすでにわかっています。

早速、袖をまくり上げて汚れを落としてみましょう。

Gridbuilder WP とは何ですか?

WP Grid Builder としても知られる Gridbuilder WP は、高度なグリッド レイアウトをすばやく作成できる美しい WordPress プラグインです。非常に使いやすい直感的なユーザーインターフェイスが特徴です。

このプラグインには、初心者にも開発者にも最適な美しい機能スイートが付属しています。初心者にとって、WP Grid Builder は、コーディングの知識がなくても、柔軟でフィルタリング可能なグリッド レイアウトを作成し、フィルタリングできる完全なソリューションです。あなたが開発者であれば、グリッド ビルダーには、忙しくしていられるたくさんのアクションと機能が付属しています。

すべての WordPress テーマで動作し、お気に入りのツールのほとんどとシームレスに統合します。さらに、このプラグインには、グリッド レイアウトと検索フィルター (ファセットと呼ばれる) を強化するアドオンが付属しています。

執筆時点では、WP Grid Builder のプレミアム バージョンのみが提供されていますが、将来的には変更される可能性があります。あるいは、開発者のロイック・ブラスコス氏は、私の問い合わせの直後に送った電子メールで次のように述べています。

それでも、年間 49 ～ 249 ドルのプランが 3 つあります。ニーズに合ったプランをお選びください。

購入にご満足いただけない場合、WP Grid Builder では 14 日間の返金保証を提供しています。さらに、更新には優れた割引 (ベーシック プランで 20%、プレミアム プランで 30%、アルティメット プランで 40%) が用意されています。

契約を有利にするために、WordPress の専門家は WP Grid Builder を賞賛しています。幸せなお客様の 1 名をご紹介します。

ユーザーにとっても開発者にとってもフレンドリーな Gridbuilder ᵂᴾ は素晴らしい製品であり、この種の機能の新しいパラダイムです。 WordPress Core に適切に統合されており、優れた管理 UX と非常に高速なフロントエンド エクスペリエンスを提供します。 – Jb Audras、WordPress コア開発者。

WordPress 界の大物の 1 人である Chris Lema でさえ、WP Grid Builder を称賛しています。

さらに、WP Grid Builder の広範囲にわたるインストールと構成に役立つ、世界クラスの迅速なサポートと詳細なドキュメントも提供されます。

何を扱うかがわかったので、WP Grid Builder の WP 機能をざっと見てみましょう。

Gridbuilder WP の機能

WP Grid Builder には、プロのようにグリッド レイアウトを作成するために必要なすべての機能が付属しています。競合他社とは異なり、このプラグインを使用すると、e コマース ストア、ポートフォリオ Web サイト、ブログ、ディレクトリなどのレイアウトを非常に簡単に作成できます。

WP Grid Builder のコピーには次の機能が期待できます。

  • WooCommerce、Easy Digital Downloads、SearchWP、Relevanssi、Polylang、WPML、Advanced Custom Fields、Gutenberg とのスムーズな統合
  • ライトボックスとカルーセルのタッチ サポートにより、100% 応答性が高くモバイル対応
  • SEO フレンドリー – WP Grid Builder は W3C に準拠しており、SEO のベストプラクティスを採用しています。
  • カスタム AJAX エンドポイントによる超高速パフォーマンス
  • 高度なフィルタリング システムにより、WordPress コンテンツを (カスタム) 分類用語、投稿フィールド、またはカスタム フィールドごとに効率的に並べ替えることができます。
  • ラジオ、チェックボックス、スライダー、選択、評価、スライダー、評価、読み込みボタン、リセット ボタンなどを含む 15 以上のファセット タイプにより、ユーザーは検索結果を絞り込むことができます
  • WP Grid Builder の設定を別のサイトに簡単に移動できるインポートおよびエクスポート機能
  • 内蔵ライトボックス
  • ドラッグアンドドロップグリッドビルダー
  • 20 を超える既製の簡単にカスタマイズできるグリッド カード。さらに、カードを最初から作成することもできます
  • 900以上のGoogleフォント
  • 250 個以上の SVG アイコンでグリッド カードを自由に装飾
  • ソーシャル共有のサポートにより、グリッドから直接ソーシャル ネットワーク上でコンテンツを共有できるようになります
  • 画像、ビデオ (YouTube などのサイトからの埋め込みを含む)、ギャラリー、オーディオ投稿形式のサポート
  • メーソンリー、ジャスティファイド、メトロを含む 3 つ以上のグリッド レイアウト
  • 遅延読み込み。ページの読み込み速度が向上します。
  • 20 以上の読み込みアニメーションにより、ユーザーが認識する読み込み時間を短縮します
  • 20 以上の公開アニメーション
  • 右から左方向で書かれた言語の RTL サポート
  • 直感的な管理者ダッシュボード
  • その他多くの設定

なんと印象的な機能リストでしょうか?ここで、WP Grid Builder をインストールし、他にはない Grid Builder で何が達成できるかをテストしてみましょう。

Gridbuilder WP をインストールする方法

ここからが楽しい部分です 🙂

WP Grid Builder のインストールは、A、B、C と同じくらい簡単です。プレミアム プラグインのインストール方法を知っていれば、WP Grid Builder を問題なくインストールできるはずです。プラグインを購入した後、アカウントまたは購入メールで WP Grid Builder ZIP フォルダーを見つけることができます。

まず、WP Grid Builder ZIP ファイルをコンピューターにダウンロードします。次に、WordPress 管理ダッシュボードにログインし、以下に示すように[プラグイン] > [新規追加]に移動します。

次に、[プラグインのアップロード] ボタンをクリックし、ダウンロードした WP Grid Builder ZIP ファイルを選択して、[今すぐインストール] ボタンを押して作業を開始します。プロセスの概要を示すスクリーンショットは次のとおりです。

次に、WP Grid Builder をアクティブ化します。

プラグインを有効にすると、Gridbuilder WP 項目が WordPress 管理メニューに追加されます。次に、以下で詳しく説明するように、Gridbuilder WP > ダッシュボード に移動します。

その後、ライセンスメールアドレスとライセンスキーを入力し、有効化プラグインボタンをクリックします。

自動更新を利用するには、ライセンスをアクティベートすることができます。これは、注文確認メールまたはアカウント ページで利用できます。

WP Grid Builder をインストールしてアクティブ化したので、最初のグリッド レイアウトを作成できます。

Gridbuilder WP を構成する方法

次のセクションでは、機能的なグリッドを作成する方法を学習します。 (すべてではないにしても) ほとんどの設定をカバーできるように最善を尽くします。素晴らしいニュースは、WP Grid Builder の機能について管理インターフェイスに明確な説明があることです。将来の参照のために、新しいグリッドに名前を付けることから始める必要があります。

新しいグリッドに名前を付ける

新しいグリッド レイアウトを作成するには、WordPress 管理者メニューの Gridbuilder WP > すべてのグリッド に移動します。

これにより、[すべてのグリッド] 画面が表示されますが、現時点では空です。次に、[グリッドの作成] ボタンをクリックします。

あるいは、wpgridbuilder.com からデモをインポートすることもできます。ただし、デモはレイアウト設定のみを目的としていることに注意してください。グリッドに表示されるコンテンツは、投稿、メディア、製品などによって異なります。

テスト目的のため、私は最初のオプションを使用して、新しいグリッドを最初から作成しました。 [グリッドの作成] ボタンをクリックすると、次のページが表示されます。

上の画面では、次のことができます。

  • グリッドに名前を付けます。この例では「テスト ギャラリー」を使用しています
  • カスタム CSS クラスを追加して生成するため、必要に応じてグリッドにカスタム スタイルを追加できます。
  • 結果が見つからなかった場合にユーザーに表示されるエラー メッセージを定義します

グリッドに表示するメディアを選択してください

グリッドに表示するメディアを選択します。そのためには、次のセクション、つまり、 以下に示すようにグリッド設定 >ソース コンテンツに移動します。

上に示すように、[ソースの種類] には 3 種類のソースがあります。

  • 投稿タイプ – 投稿、ページ、メディア ライブラリ、またはその他のカスタム投稿タイプからコンテンツを取得できます。
  • 用語 – カテゴリ、タグ、またはその他のカスタム分類用語に基づいて資料を調達できます。
  • ユーザー – このオプションを使用すると、特定の WordPress ユーザーからコンテンツを入手できます。

その下で、ページごとのアイテム数を設定できます。すべての投稿を表示するには、値「-1」を使用します。 WordPress 設定のページごとの投稿数のデフォルトはゼロ (0) です。

クエリされた投稿セクション

その下にはクエリされた投稿 セクションがあります。

  • 画像にマークされている [投稿タイプ] で投稿タイプを選択します。ブログ投稿のグリッドを作成する場合は、[投稿] を選択します。メディアのグリッドを作成している場合 (たとえば、ビジュアル ポートフォリオを作成したい場合)、上の例のように [メディア] を選択します。利用可能な他の投稿タイプはページです。
  • 投稿タイプの下で、グリッドに表示するコンテンツの投稿ステータスを選択できます。いくつかのオプションがありますが、公開済みを選択することをお勧めします。さらに、投稿作成者、MIME タイプを選択し、グリッドに特定のコンテンツを含めたり除外したりすることもできます。
  • 上の画像の項目番号 3 に示されているように、他のメディアを直接含めることができるため、特にグリッドを迅速に展開したい場合に、時間を大幅に節約できます。

画面の一番下までスクロールすると、グリッドのコンテンツを値、タグ、カスタム フィールドで並べ替えるのに役立つオプションが表示されます。これらのオプションは、グリッドを微調整する場合にのみ必要になります。

余談: 進行状況を誤って失わないようにするため、グリッドを作成するときに [変更を保存] ボタンをクリックします。メディア形式を設定しましょう。

メディア形式

[グリッド設定] > [メディア形式] に移動します。

グリッドで使用したいメディア形式を選択できます。 WP Grid Builder は、ギャラリー、ビデオ、オーディオをサポートしています。画面の下部では、コンテンツが欠落している場合に備えて、各グリッド カード (またはタイル) にデフォルトのサムネイルを設定できます。

同じ画面で、投稿の最初のメディアを自動的にキャプチャすることを選択できます (コンテンツが欠落している場合に備えて)。また、グリッド カード内でギャラリー スライドショーを有効にしたり、埋め込みビデオのポスターを使用したり、グリッド カードの代わりにライトボックスでビデオを開いたりすることもできます。

グリッドスタイル

上に示すように、[グリッド設定] > [グリッド スタイル] に移動してグリッドをカスタマイズします。デフォルトでは、Masonry、Metro、Justified の 3 つのグリッド スタイルがあります。説明のために石積みを使用しています。また、以前にメディア ライブラリに画像を公開していました。 WP Grid Builder は写真をグリッドに自動的に追加します。

それ以外にも、グリッドの動作、カード サイズのオーバーライド、応答性の制御などのオプションを制御できます。グリッド スタイルの選択とカード サイズのオーバーライドを除けば、設定にはほとんど触れません。グリッド スタイルを選択して、次のセクションに進みます。

グリッドレイアウト

ここにはあまり見るべきものはありません。グリッドには 2 種類のレイアウトがあります。標準の垂直デザインとカルーセル レイアウト。さらに、グリッドを全幅にすることもできます。私は標準デザインで作業しており、グリッドは全幅です。

進んでいきます。

グリッドコンポーザー

Grid Composer は、フィルター、評価、検索、チェックボックス、読み込み、ページネーションなどのファセットを使用してグリッドをカスタマイズするときに便利です。

画面の下部には、ドラッグ アンド ドロップのグリッド レイアウト ビルダーがあります。たとえば、日付によるフィルタ、検索、さらに読み込むボタンの 3 つのファセットを備えた例を以下に示します。

この時点でグリッドを公開すると、完全に機能する 3 つのファセットを備えた次のグリッドが表示されます。

悪くないです 🙂 全然悪くありません。話の要点は理解していただけたと思いますが、これでまだ終わりではありません。 WP Grid Builder の管理エリアに戻りましょう。

カードのスタイル

上に示した「カード スタイル」セクションでは、グリッド カードをカスタマイズできます。グリッド カードは、グリッドを構成する単純な長方形または正方形のタイルです。 WP Grid Builder の使用を開始するときは、上の画像に示すように、デモをインポートする必要がある場合があります。ただしカードを最初から作成することもでき、 無限の可能性が広がります。

そこで、すべてのカードをインポートし、デフォルトのカードをグリッドに割り当てました。その後、メディアを含む投稿の種類ごとにカードを選択しました。私はデフォルトカードとしてベリルを使用しています。

この WordPress グリッド ビルダーはかなり信頼できるようで、感銘を受けました。次にアニメーションです。

アニメーション

繰り返しになりますが、ここでは見るべきものは何もありません。ユーザーがスクロールするか [もっと読み込む] ボタンをクリックすると、グリッド内のカードが表示されるアニメーションがいくつかあります。この機能は非常に使いやすく、ユーザーのエンゲージメントを高める美しい効果を生み出します。

読み込み中

次に、上で詳しく説明したように、読み込みオプションがあります。画面上で遅延読み込みを切り替えて、グリッドの速度を大幅に向上させることができます。遅延読み込みでは、ユーザーのビューポートにあるメディアのみが読み込まれるため、グリッドの読み込みにかかる時間を短縮できます。

一方、読み込みバーやアイコンは、ユーザーが認識する読み込み時間を短縮します。ローダーは、ユーザーが一連の投稿をロードしているときに表示されます。これは、グリッド ページをロードするとき、およびユーザーがグリッドをフィルターまたは並べ替えるときに表示されます。これは、ユーザーをサイトに留めておくための便利でユーザーフレンドリーな方法です。

カスタマイズ

前にグリッドに追加したカスタム CSS クラスを覚えていますか?このクラスを使用して、グリッド設定 > カスタマイズ ウィンドウでプラグインの CSS スタイルを変更します。 CSS の使い方がわからない場合は、必要に応じて外部の助けを借りたほうがよいでしょう。

Gridbuilder WP アドオン

アドオンを使用すると、WordPress プラグインの機能を拡張できます。 WP Grid Builder には、[Gridbuilder WP > アドオン] に移動して簡単にインストールできるいくつかのアドオンが付属しています。 現在、WP Grid Builder には次の 4 つのアドオンが付属しています。

  • マップ ファセット – Google マップ、Mapbox、または Leaflet から地図を追加し、マーカーを表示できます。
  • キャッシュ – コンテンツとファセットをキャッシュすることでグリッドを高速化します。
  • LearnDash – コース情報をカードに表示します
  • 多言語 – WP Grid Builder を Polylang および WPML と統合

Gridbuilder のその他の WP 設定

WP Grid Builder の一般設定にアクセスするには、Gridbuilder WP > 設定 に移動します。画面には次のようなオプションがあります。

  • WP Grid Builder が Gutenberg でブロックをレンダリングできるようにする
  • 投稿フォーマットのサポートを有効にする
  • 投稿と用語のオプションを表示します (投稿の形式と用語の色)
  • キャッシュをクリアしてスタイルシートをパージする
  • グローバルカラーの変更
  • 追加の画像サイズを設定する
  • ライトボックスプラグインを設定する
  • プラグインのグローバル設定をリセットする

結論

WP Grid Builder は、初心者と開発者の両方に適した素晴らしい WordPress グリッドおよびフィルター プラグインです。レスポンシブなグリッド レイアウトの作成を簡単にする素晴らしい機能の広範なリストが付属しています。さらに、柔軟な価格体系と迅速なサポートを提供します。

Gridbuilder WP についてどう思いますか?何か見逃したでしょうか？以下のコメント欄でお知らせください。