基本はElementor Proのポップアップモーダルを利用 投稿一覧からポップアップが開く！
e-addons e-Extendedで利用できるPopup Archive
e-addonsの特徴はなんといっても投稿、ポストごとに投稿の内容を使ったポップアップモーダルを作成できること。
今回はe-addonsで、タイトルだけの投稿リスト、ポストリストをクリックすると、タイトル、アイキャッチ画像、「投稿を見る」ボタンを設置する。もちろんボタンを押すと投稿の個別ページに遷移する…というのを作ってみたい。
序章…必要なアドオン
その１ e-addons for Elementor（e-addonsのコア部分／無料）
その２ e-addons QUERY POSTS（投稿一覧を表示するアドオン／無料）
その３ e-addons EXTENDED（e-addonsの拡張アドオン／有料）
上記のプラグインをインストールしておく。ポップアップモーダルを使うための「e-addons EXTENDED」は有料アドオン。
ちなみにe-addonsは一部無料で利用できる。詳細は下記を参照。
- 無料
e-addons for Elementor（本体コア）
e-addons COPY PASTE
e-addons DISPLAY
e-addons EDITOR
e-addons INSPECTOR
e-addons QUERY MEDIA
e-addons QUERY POSTS
e-addons TEMPLATE
e-addons TOKENS
e-addons TWIG - 有料
e-addons CREATIVE
e-addons DEVELOPER
e-addons EXTENDED
e-addons MAPS
e-addons PDF
e-addons PRO FORM ACTIONS
e-addons PRO FORM CONDITIONS
e-addons PRO FORM EXTENDED
e-addons PRO FORM FILTERS
e-addons PRO FORM STEPS
e-addons PRO PAYMENTS
e-addons QUERY
e-addons UI
①モーダルを作成する
e-addonsでポップアップモーダルを設定する場合は、まずポップアップモーダルのデザインが必要になってくる。デザインするのはElementor Proの機能を使って作成する。
ダッシュボードのテンプレート > Popupsでポップアップ一覧から「新規追加」をクリック。
②モーダルをデザインする
お次はポップアップモーダル内に表示される内容を配置してデザインしていく。ライブラリの選択になるので、デザインのもとを選ぶんだけど、「ElementorのPopupのデザインはキッチリ決まっててなんか面倒くさそう」と思いそうだがモーダル内のコンテンツは１つのセクションで構成されていればいい。別に、Popupカテゴリー以外のデザインを選んでも何の問題もない。
③ポップアップモーダル内の要素に動的タグを割り当てる
デザインが終わったらポップアップモーダル内の要素・エレメントに動的タグを設定していく。
「動的タグ」って言われても初心者は「？」と思うでしょうが…まあ、要するにWordPressの投稿に使われているタイトル、カスタムフィールドなどを設定するのが「動的タグを割り当てる」作業なんですね。同じデザインでも投稿が変われば、タイトルやアイキャッチ画像が変わって表示される…というWordPressの素晴らしい機能が、ポップアップモーダルで実現するわけです。動的タグの割り当てによって実現するわけです！
この素晴らしさが、偉い人にはそれがわからんのです！
とまあ、ここですんなりプレビューが表示がされると期待するのだが、自分が利用しているXserverではElementorとの相性の問題か、読み込み中のグルグルが表示されて続ける。
こんなときは、いったん保存してしまおう（Elementorメニューの右下の「公開」をクリックする）。保存が終わったらすかさずブラウザをリロードする。そうすると、きちんと表示がされる。
ブラウザのクラッシュの経験はないが、ElementorはUIがヘヴィーなので、こういったグルグル問題は多い。そんな時はあきらめて保存してからリロードしよう。
ただ、複数のアドオンを併用している場合にElementorメニューのグルグルが止まらなくなるときがある。これがもっとも致命的。100パーセント、新規で追加したアドオンが原因だ。あきらめるか、以前にインストールしたアドオンを外したり入れたりして相性を見てみる以外ない。
④ポップアップモーダルを表示させるページの作成
デザインが完成したら、次はポップアップモーダルを表示させる固定ページを作成する。
ダッシュボードのメニュー、「固定ページ > 新規追加」をクリック。今回はあくまでテストなので、適当な名称、適当なパーマリンクを設定したら「Elementorで編集」をクリック。
投稿一覧は画像がなくなって、タイトルと投稿日だけのシンプルなリストになる。でもってこの「タイトル」をクリックすると先ほどまで作っていたポップアップモーダルを表示するように設定する。
⑤動作確認
できあがったら、とりあえず動作確認。タイトル部分をクリックしてモーダルが開くか、モーダルのボタンがきちんと投稿に遷移するチェック！
