絞れば、出てくる、アイディア。

Elementorで投稿一覧を表示!Post Gridの使い方【Essential Addons for Elementor】​

Elementorで記事一覧を表示!Post Gridの使い方【Essential Addons for Elementor】

Elementorのプラグイン「Essential Addons for Elementor」(エッセンシャル・アドオンズ フォー・エレメンター)は、無料で多くの機能を使うことができるとっても便利なプラグインです。

今回は、Elementorで投稿一覧を表示することができる「Post Grid」の機能について、使い方とカスタマイズ方法を紹介します!

↓Essential Addons for Elementor の基本の使い方については、こちらの記事をご覧ください!↓

1. Post Grid とは??

Post Gridとは、Elementorで作成しているウェブサイトやブログの投稿や固定ページをグリッド形式で一覧で表示することができるウィジェットです。

Post Gridとは、Elementorで作成しているウェブサイトやブログの投稿固定ページグリッド形式一覧で表示することができるウィジェットです。

weblemonも、POSTページと各投稿の最下部のOTHER POSTでこの機能を使用しています!

記事のカテゴリやタグごとに分けて表示することも可能です。ただ、2024年1月現在でグリッド以外の表示形式(横長にするなど)はできません。

記事カテゴリタグごとに分けて表示することも可能です。ただ、2024年1月現在でグリッド以外の表示形式(横長にするなど)はできません。😭

しかし、Elementor Pro有料プラグイン入れず記事一覧を表示できるとても便利な機能です!

2. Post Grid の使い方

まず初めに、Post Grid有効化されているかを確認します。
※有効化されていないと、編集画面のウィジェットに表示されません。

ワードプレスのダッシュボードから、画面右側のメニュー「Essential Addons」をクリックします。そして、上部のメニュー左から2番目の「Elements」をクリックします。

↑ワードプレスのダッシュボードから、画面右側のメニュー「Essential Addons」をクリックします。そして、上部のメニュー左から2番目の「Elements」をクリックします。

Elementsの中央部分にある「Dynamic Content Elements」の中の「Post Grid」のボタンをON(紫色)にして、ウィジェットが使える状態にします。

Elementsの中央部分にある「Dynamic Content Elements」の中の「Post Grid」のボタンをON(紫色)にして、ウィジェットが使える状態にします。

ウィジェットが使える状態になったら、Post Gridを表示させたいページの編集画面に入ります。 画面右側の「要素」の検索欄に「Post」と入力し、「Post Grid」を表示させたい箇所に配置します。

↑ウィジェットが使える状態になったら、Post Gridを表示させたいページの編集画面に入ります。
画面右側の「要素」検索欄「Post」と入力し、「Post Grid」を表示させたい箇所に配置します。

投稿一覧が表示されました!
画面右側Post Grid編集画面が表示されています。

ここから、どの投稿(カテゴリやタグ、投稿者)を表示させるのか、カラム(表示させる数)や題名説明文投稿日などのカスタマイズをしていきます。

3. Post Grid のカスタマイズ

Post Gridは、表示させるコンテンツ、内容や画像、説明文の有無、グリッドの間隔やマウスオーバー時の動きなど様々なカスタマイズができます。

◇コンテンツのカスタマイズ

Post Grid を編集」の画面から、コンテンツ「Source」のプルダウンで表示させたいもの選択できます。
投稿固定ページのほかに、「Manual Selection」特定のURLのページを表示させることもできます。

表示させたいカテゴリーや、投稿(固定ページ)の「Order By」で並び順を変更することができます。

↑表示させたいカテゴリーや、投稿(固定ページ)の「Order By」並び順を変更することができます。

Layout Settingでは、「Column」で表示させる投稿のカラム数(列の数)を設定できます。
また、「Show Excerpt」では、各投稿の説明文の表示をするかどうかを設定することができます。

Show Excerptで表示される説明は、投稿の編集ページ「抜粋」の箇所が表示されます!

◇スタイルのカスタマイズ

「Post Grid を編集」の画面から、スタイルをクリックします。投稿の背景色、グリッドの間隔、グリッドの枠線のスタイルや幅、色をカスタマイズできます。

「Post Grid を編集」の画面から、スタイルをクリックします。
投稿の背景色グリッドの間隔グリッドの枠線スタイルをカスタマイズできます。

Hover Card Styleでは、各グリッドのサムネイルにマウスオーバーした時の動きを設定できます。 アイコンやアイコンのサイズ、マウスオーバー時のアニメーションをカスタマイズできます。

Hover Card Styleでは、各グリッドのサムネイルにマウスオーバーした時の動きを設定できます。
アイコンアイコンのサイズマウスオーバー時のアニメーションをカスタマイズできます。

「Read More」のスタイルも設定する事ができます。 テキストの色やフォント、右寄せ、左寄せなどもカスタマイズ可能です。

「Read More」のスタイルも設定する事ができます。
テキストの色フォント、右寄せ、左寄せなどもカスタマイズ可能です。

まとめ😆

今回は、Essential Addons for Elementor の「Post Grid」ウィジェットについて紹介しました。
Elementorでブログやウェブサイトを作成していて、記事の一覧ページを作りたいと思っている方は、ぜひこの方法を試してみてください!

無料で使えて、便利なウィジェットがたくさんの「Essential Addons for Elementor」ウィジェット紹介シリーズは今後も連載✏️予定です!!

Essential Addons for Elementor 使い方シリーズ