Elementorで関連記事を表示する方法
Elementorで関連記事を表示させる方法についてです。
関連記事は「Wordpress Related Post」といったプラグインを使って対応するなど色々方法はありますが、実はElementorにはこの関連記事を表示させるウィジェットが標準機能として備わっているのです。
これを知っておけば余計なプラグインをインストールしなくてもいいのでサイトのスピードも向上しますし、Elementorで設定する方がより細かく記事の出し分けを「カスタマイズ」できますので、知っておいて損はないと思います。
（その分ちょっと作業は増えるんですけどね、、、）
前提条件
まず早速申し訳ないですが、関連記事を表示させるためには大きな壁を乗り越えなければなりません。
その壁とはずばりElementorの「有料版」へのアップグレードです（チーン）。
しかもElementorのPro版ってまぁまぁ高いので、ここは悩むところだと思います。
その辺は『Elementor Proは買いなのか？ 無料版とPro版での重要な3つの違いを解説』や他のブログを参考にしながらご自身で判断してみて下さいな。
一応Elementor Proの公式サイトは下記からアクセス可能なので、決意が付いたら購入してみましょう（ページは英語ですが）。
ここからはElementor Proをインストールした前提で話を進めていきます。
関連記事の表示方法
さて、では実際に関連記事を表示してみましょう。
1.使うのは「Post」ウィジェット
関連記事を表示させるウィジェットとしては「Post」を利用します。
実はElementorには関連記事を表示させるための専用ウィジェットがあるわけではなくて、この「Post」という記事を表示させるウィジェットの「クエリ」で表示ロジックを設定することで関連記事を表示させます。
まずは早速Elementorのメニューから「Post」を探してドラッグ＆ドロップで配置してみます。
2.メニューから設定を変更
このPostウィジェットですが、下図の通り大きく3つ設定が可能となっています。
上から、レイアウト、Query、Paginationです。
-レイアウト：表示させる記事のレイアウトを変更する。1行に何個の記事を表示させるのか、何個の記事を表示させるのか、記事のタイトルは表示させるのか、アイキャッチ画像は表示させるのかなど細かい設定が色々行えます。
-Query：表示ロジックを設定する。表示させる記事に含めるカテゴリやタグ、逆に表示させない記事を設定します。
-Pagination：記事が大量にある場合にページの遷移を設定できます。あまり気にしなくてもいいと思います。
関連記事を表示させるためには、その中でも「Query」を使います。
3.クエリを設定
関連記事を表示させるクエリの設定は、大きく「カテゴリー」で表示させるか、記事の「タグ」で表示させるかで設定が可能です。
例えば記事と同じ「カテゴリー」に属する記事を表示させたい場合は、Include Byのところに「Term」と入力し、Termの欄の下の検索ボックスに表示させたいカテゴリー名を検索して選択します。
すると、選択したカテゴリーに含まれている記事が表示されます。
逆に含めたくない記事も設定が可能で、これはクエリの中の「Exclude」から設定します。
例えば現在表示されている記事は除外したいので「Current Post」を除外しておきます。
その他にも特定の記事毎で除外設定が行えます。
これで完了です！
いかがでしたでしょうか？Elementorはかなり細かく設定やデザインを作り込めますし、その機能はどんどん進化しています。
Elementorを使ってこんだけサイトをカスタマイズできるならこれからは自分のメディアで発信することが益々重要になりそうですね。
興味があればElementor使ってみてくださいな！
トラ蔵
IT企業でWebマーケティングを担当しています。
趣味でElementorの使い方を紹介しています。
2 Comments