JetEngineで「関連記事」を表示する方法（Query Builder）
ブログサイトを見ていると、一般的に実装されている「関連記事」の機能。
自力で作ってみたくありませんか？
関連記事機能は、ブログ読者が関心を持ちそうな記事を表示することでサイト滞在時間を伸ばすための機能です。
サイト回遊率もUPし、SEO対策としても有効と言われます。
…とかなんとか、そんな御託は置いておいて。
関連記事機能、作ってみたいなあ…という気持ちはありませんか？
クリエイターには、その気持ちだけあれば十分！
この記事では、WordPressとElementor、そしてJetEngineを用いて、完全ノーコードでブログ記事ページに関連記事を表示する方法を解説します。
正直に言いますと、そこそこ複雑で難しいですが、ステップバイステップで解説しますのでご安心ください！
「関連記事」の定義
「関連記事」機能を作ると言っていますが、「何を関連記事とみなすか」の定義が必要です。
この記事においては、「同カテゴリーに属する投稿」を関連記事とみなします。
まずは第一歩として、WordPressに標準搭載される「カテゴリー」を用いることで、関連記事を出力する方法を学びましょう。
前準備
今回機能を作成する環境では、以下の導入が済んでいることを前提とします。
- WordPressがインストールされている
- Elementorがインストールされている（有料・無料問わず）
- JetEngineがインストールされている
- JetThemeCoreがインストールされている
- 「投稿」に記事が複数作成されている
- 「カテゴリー」にカテゴリーが作成され、記事と関連付けられている
- 「投稿」を表示するためのリスティングが作成されている
- 「投稿」シングルページのテンプレートが作成されている
以下で実装手順を説明していきますので、同様の準備を済ませてから続きを読み進めてください。
基本設定
表示ロジックを作成する
1. WordPress管理画面のメニューバーから、「JetEngine」>「Query Builder」へアクセスします。
2. Query Builderの一覧画面に到達しますので、画面上部の「Add New」ボタンをクリックします。
3. 新規クエリ作成画面が開きますので、「General Settings」の「Name」を自由に設定してください。
（ここでは仮に、「関連記事」とします）
4. スクロールし、「Posts Query」設定の「General」タブを開きます。
5. 「Post Type」右手の入力欄をクリックし、「投稿」を選択してください。
6. 左手のタブから「Tax Query」を開きます。
7. 「Tax Query Clauses」の下にある「Add New」ボタンをクリックします。
8. 複数の設定項目が表れますので、以下の通りに設定してください。
- Field：Term ID
- Taxonomy：「カテゴリー(category)」
9. 「Terms」の入力欄右橋にあるデータベースアイコンをクリックし、「Current Terms」を選択してください。
10. 選択すると新たなポップアップが開きますので、「Taxonomy」の入力欄をクリックして「カテゴリー」を選択してください。
11. 以上の設定ができたら、画面右上の「Add Query」ボタンをクリックして保存します。
これによって、「現在読んでいる記事のカテゴリーと同じカテゴリーに属する記事を抽出する」というロジックができました。
次に、このロジックを用いて、記事ページに関連記事を表示させます。
シングルページに関連記事を表示する
1. WordPress管理画面のメニューバーから、「Croco Block」>「Theme Templates」へアクセスします。
2. 事前に作成している投稿シングルページのBodyテンプレートをElementorで編集します。
3. ビジュアルビルダーが開いたら、関連記事を表示したい箇所に「Listing Grid」ウィジェットを配置します。
4. 「Listing」に、事前に作成済みの投稿表示用リスティングを選択します。
同時に、「Columns Number」などをお好みの設定に変更し、表示レイアウトを整えます。
5. 「コンテンツ」タブ内をスクロールし、「Custom Query」を開きます。
「Use Custom Query」トグルをオンにし、「Custom Query」で先ほど作ったクエリを選択します。
6. ここまでの設定が完了したら、画面右上の「公開」を押して保存してください。
8. ビジュアルビルダーを閉じ、「投稿」に作成している記事を開いてみて、同じカテゴリーの記事が表示されていることを確認してください。
以上で、関連記事の表示が実現されました。
発展的な設定
ここまで作成してきて、実際に関連記事が表示されるかを確認された方は、次のようなことに気付かれたのではないでしょうか？
「関連記事の表示数が、Listing Gridで設定した数になっていない…」
「関連記事の欄に、今見ている記事も表示されてる…」
上の「基礎設定」では、完全に最低限の設定のみで「まずは関連記事を表示させる」ことにフォーカスし、細かなカスタマイズは説明しませんでした。
ここから、より細かく調整を加えていきます。
記事の表示数を制御する
「Listing Grid」ウィジェットで「Posts number」を設定したはずなのに、なぜ表示件数が思ったとおりに制御できていないのか？
その原因は、2つの要素が絡んでいます。
- Query Builderで設定した内容は、Listing Gridのすべての設定より優先される
- Query Builderで作成するクエリには、デフォルトで「投稿表示数：無制限」の設定が入っている
このため、Listing Gridで設定したはずの記事表示件数が無視されて、無制限に表示される設定へと切り替わってしまっている状況にあります。
解決するためには、「Query Builder」から表示件数の設定を行うことが必要です。
1. WordPress管理画面のメニューバーから、「JetEngine」>「Query Builder」へアクセスします。
2. 作成済みクエリ一覧が表示されるので、先ほど作ったクエリを選択し、再編集します。
3. スクロールし、「Posts Query」設定の「Pagination」タブを開きます。
4. 「Posts Per Page」という設定があるので、表示したい記事件数を入力します。
5. 画面右上の「Update Query」ボタンを押して、クエリを保存します。
6. 記事ページを確認すると、関連記事の表示件数が指定した通りに減っているのが確認できます。
これで、記事表示件数の制御が追加されました。
クエリをアップデートしてしまえば、対象のListing Gridへ再編集を行わなくても変更が反映されているので、後は思ったとおりに変更されているかチェックするだけでOKです。
なお、1点注意事項として、「カスタムクエリの結果は端末サイズごとに切り替えることができない」というものがあります。
レスポンシブ対応として、PC・タブレット・スマートフォンそれぞれで関連記事の表示数を変えたいと考えていたとしても、その要望に対応することはできませんので、念頭に入れておいてください。
現在読んでいる記事を除外する
続いて、「関連記事」に現在読んでいる記事が入ってしまう問題を解消します。
まずは、なぜこの問題が起きているかを解説します。
ここまで「Query Builder」で作成した関連記事表示ロジックでは、以下のような操作が行われています。
- 現在閲覧されている投稿のカテゴリーを動的に取得
- 取得したカテゴリーに属する投稿を、全投稿内から検索
- 検索取得された投稿を、「Posts Per Page」の数量に限定して表示
ここで注目いただきたいのは1.と2. の内容です。
今読んでいる記事のカテゴリーを取得した後、全ての記事内から同じカテゴリーに属する記事を検索しています。
当然、現在読んでいる記事は同じカテゴリーに属しているため、検索結果に含まれてしまいます。
つまり、「関連記事に現在読んでいる記事が含まれてしまうことを防ぐ」ためには、「現在読んでいる記事を検索除外するルールを新規追加する」という操作が必要になります。
では、その手順を解説します。
1. WordPress管理画面のメニューバーから、「JetEngine」>「Query Builder」へアクセスします。
2. 作成済みクエリ一覧が表示されるので、先ほど作ったクエリを選択し、再編集します。
3. スクロールし、「Posts Query」設定の「Post & Page」タブを開きます。
4. 「Post Not In」という設定があるので、右端のデータベースアイコンをクリックし、「Current ID」を選択してください。
5. 画面右上の「Update Query」ボタンを押して、クエリを保存します。
6. いずれかの記事ページを確認すると、閲覧中の記事が関連記事から除かれているのが確認できます。
これで、検索除外ルールが追加されました。
例のごとく、クエリのアップデートが完了すれば、Listing Gridを再編集しなくても変更が反映されているので、実際の記事ページをチェックしてみてください。
「記事の表示数を制御する」より難しい内容なので、より詳細に解説します。
「Post Not In」は、「入力欄に指定されているID以外の投稿を返す」という設定項目です。
例えば、1〜10のIDを持つ記事があったとして、「Post Not In」に「1, 10」と入力されていれば、ID 1と10の投稿は検索除外され、ID 2〜9の記事のみが返される結果となります。
今回の設定では、動的な値（データベースアイコンから選択できる値）で「Current ID」を「Post Not In」に挿入しました。
「Current ID」とは、「現在閲覧中の投稿のID」です。
これにより、現在閲覧中のページに表示される「関連記事」には、常に現在閲覧中のページが検索除外されるというルールを実現しています。
以上で、投稿表示数の制限、現在読んでいる記事を関連記事から除外という2つの機能を追加することができました。
終わりに
ここまで、ブログの関連記事機能をJetEngineにて実現する方法を紹介しました。
Elementorの編集画面を離れ、「Query Builder」というツールを使うことで、表示ロジックのみを別で組み立てるという手法であったため、慣れない方は混乱したのではないかと思います。
ですが、この「Query Builder」は簡単なロジックでも、もっと複雑なロジックでも、幅広いケースで利用できる強力なツールですので、ぜひご活用ください。
CFCがおすすめするプラグイン
こちらはアフィリエイトリンクです。
このバナーから購入サイトへ移動しプラグインをご購入いただくと、CFCへ紹介報酬が支払われます。
情報発信を続けるための財源となりますので、応援いただける方はぜひこちらからご購入ください。