Elementor無料版では記事一覧でサムネイルを表示した記事一覧のウィジェットは残念ながら無いみたいです…。もちろんPRO版にはあるんですが…。
とはいえ、色々と調べて見たところどうやらプラグインを追加することで上記の問題は解決出来るようですので、ここは試しにとプラグインをインストールしてみることにしましたので、今回プラグイン「Essential Addons for Elementor」のお話となります。
Essential Addons for Elementor とは
無料でElementorに44のウィジェットを追加することが出来るプラグインです。
一部のウィジェットには有料版もございますのでご注意ください。
Essential Addons for Elementorの使い方
プラグイン > 新規追加 > Essential Addons for Elementorを検索し、インストール後に有効化を行います。
有効化後、Essential Addons for Elementoのページに遷移されます。
1.Configuration
基本的な機能のみ利用するので、「Basic (Recommended)」を選択して「Next」をクリック
ちなみに翻訳すると下記となります。
| Basic (Recommended) For websites where you want to only use the basic features and keep your site lightweight. Most basic elements are activated in this option. | 基本（推奨） 基本的な機能のみを使用し、サイトを軽量に保ちたいWebサイトの場合。このオプションでは、ほとんどの基本要素がアクティブになります。 |
| Advanced For advanced users who are trying to build complex websites with advanced functionalities with Elementor. All the dynamic elements will be activated in this option. | 高度 Elementorを使用して高度な機能を備えた複雑なWebサイトを構築しようとしている上級ユーザー向け。このオプションでは、すべての動的要素がアクティブになります。 |
| Custom Pick this option if you want to configure the elements as per your wish. | カスタム 必要に応じて要素を構成する場合は、このオプションを選択してください。 |
違いとしましては、次のページの必要な要素にチェックが入っているか・入っていないかの違いになるようです。
2.Elements
必要な機能を選択します。
このままで良い場合は「Next」をクリック。
必要なアドオンを選択する場合は、各アドオンにチェックを入れ（場合によっては外す）てから「Next」をクリック。
私はDynamic Content ElementsのPost GridとPost Timelineにチェックを入れました。今回使う機能はこれかな？と思いまして。。。
3.Go PRO
無料版のみ利用したいのでここは「Next」をクリック。
有料版を使いたい方は「Upgrade to PRO」をクリックしてください。
4.Templately
テンプレートを利用する場合は「Install Templately」をクリック。使わない場合は「Next」をクリック。
5.Integrations
他のサービスを利用したい場合は、各サービスのInstallをクリック。
必要ない場合は、下にある「Next」をクリック。
6.Finalize
翻訳してみるとどうやらメールでプラグインの情報やクーポンなどを配布してくれるみたいです。
| Make Essential Addons more awesome by being our Contributor We collect non-sensitive diagnostic data and plugin usage information. Your site URL, WordPress & PHP version, plugins & themes and email address to send you the discount coupon. This data lets us make sure this plugin always stays compatible with the most popular plugins and themes. No spam, we promise. |
| コントリビューターになることで、エッセンシャルアドオンをさらに素晴らしいものにします 機密性の低い診断データとプラグインの使用情報を収集します。割引クーポンを送信するためのサイトのURL、WordPressとPHPのバージョン、プラグインとテーマ、および電子メールアドレス。このデータにより、このプラグインが最も人気のあるプラグインやテーマと常に互換性があることを確認できます。スパムはありません、約束します。 |
メールマガジンを希望するかしないか？という選択のようですので私は必要無いので「No,Thanks」をクリック。
ダッシュボード
Essential Addons に切り替わります。
問題なくEssential Addonsを設定することが出来ましたね。
「Elements」タブからでも各機能を有効化/無効化を選択することが出来ますので、編集の邪魔にならないように必要ないものは無効化にしていったりしましょう！
固定ページを制作する
それではいよいよ、今回の記事のタイトルでもある記事一覧を固定ページに作っていきたいと思います。
固定ページをクリックし新規追加または既存のサイトを利用したい場合は固定ページ一覧からタイトルをクリックしてください。
今回はフロントページに最新記事一覧を表示したかったのでホームを編集していきます。
マウスを重ねると表示される「Elementorで編集」をクリック。
ESSENTIAL ADDONSのウィジェットが追加されてますね。
それではここから、一覧を表示できるようにしましょう。
Post Gridをドラッグします。
これだけで最新記事が表示されるようになります！
あとは左のメニューからデザインなどを変更していくだけです！簡単ですね！
とはいえ、こちらは無料版…機能が制限されていることももちろんありますので、そちらはご理解の上、納得の行く形になるように修正していきましょう！
一つずつ説明すると長くなってしまうので、編集した箇所のみ箇条書きで説明させてもらいます。
コンテンツ（タブ）
Query
| Posts Per Page | 掲載したい数字を入力 |
Layout Settings
| Show Load More | SHOWに変更 |
| Label Text | 「もっと見る」と入力 |
| Excerpt Words | 数字をなしに変更 |
| Show Read More Button | 「detail」と入力 |
| Show Post Terms | HIDEに変更 |
| Show Meta | HIDEに変更 |
スタイル（タブ）
Post Grid Style
| Post Background Color | 透明になるように透明度を0に |
| ボックスシャドウ | 透明になるように透明度を0に |
Color, Typography & Spacing
| Title Color | 黒になるように設定 |
| Title Hover Color | 半透明になるように設定 |
| Excerpt Color | 青になるように設定 |
Read More Button Style
| Alignment | 右寄せに設定 |
| 書体 | ペンアイコンをクリックして、装飾を下線に選択 |
| （NORMAL）Text Color | 黒に設定 |
| （HOVER）Text Color | 半透明に設定 |
一旦ここで更新をクリックして、プレビューしてみます。
気になる部分としましては、下記記事のコンテナに枠が入っている事と、ページネーションがどのよなデザインなのかが今の設定では分からない事くらいでしょうか。
と、言うわけで再度設定し直して少し詰めて行きたいとおもみます。
まずは枠線を消しましょう。
追加の微調整
スタイル（タブ）
Post Grid Styleのボーダータイプはなしになってますが表示されているので手を加えます。
ボータータイプから直線を選択し、表示された色を透明になるように透明度を0にします。
無事に見えなくなりましたね。とりあえずはこれで良しましょう。
それから、ページネーションがどのようなデザインか動きをするかを確認したいので、一度設定を変更します。
コンテンツ（タブ）
コンテンツ（タブ）のPosts Per Pageを1にしてみます。
すると「もっと見る」リンクが表示されました。
カラーリンクが今のサイトに合っていないので、変更します。
スタイル（タブ）のLoad More Buttonをクリック。
| Padding | 上20 右80 下20 左80 |
NORMAL
| 書体 | ペンアイコンをクリックして太さをBoldを選択 |
| Text Color | 黒を設定 |
| Background Color | 白を設定 |
| ボーダータイプ | 直線を選択 |
| 幅 | 全て2に設定 |
| 色 | 黒を設定 |
HOVER
| Text Color | 半透明に設定 |
| Border Color | 半透明に設定 |
1.2.3…と言ったページネーションではありませんが、デザインは大体良いでしょう。
この辺は後で調べて対応可能ならしていきたいと思います。
先程変更した、記事の投稿数を元に戻してくださいね。
まとめ
箇条書きにしたんですが、だいぶ長くなってしまいましたね。すみません。
簡単にまとめますと、Elementor無料版でもEssential Addons for ElementorのPost Gridウィジェットを使えば記事一覧の機能を追加することができるというお話でした。
機能は制限されてはおりますが、それでも十分に使えるかと思いますので、記事一覧でお悩みの方は一度試してみては如何でしょうか？
次はそうですね…。投稿後のシングルページを制作してみたいと思います！
