ナビメニューからポップアップを起動するのは簡単です。
ポップアップの作成
- まず、ポップアップを作成します。
- Popup設定 >「高度な設定」> 「詳細」タブで、「Open By Selector」フィールドにクラス名（前にドットを付けたもの）を追加します。この例では、「.break-free」と入力します。
- ポップアップを公開し、「Display Conditions（表示条件）」を設定します。メニューがサイト全体のヘッダーにある場合は、「Display Conditions（表示条件）」を「Entire Site（サイト全体）」に設定します。メニューが特定のページにある場合は、「Display Conditions（表示条件）をそのページに設定します（「Singular」→「Pages」→「検索してページを選択」）。
- ポップアップにTriggers（トリガー）やAdvanced Rules（高度な設定）が設定されていないことを確認してください。
メニューアイテムの編集
- 次に、「外観」→「メニュー」にあるWordPressのメニューを編集します。
- 右上の「画面オプション」タブを開きます。
- 「CSS Classes」にチェックを入れます。これにより、任意のメニュー項目にCSSクラスを追加することができます。
- ポップアップのトリガーとなるメニュー項目を編集します。
- ポップアップで割り当てたクラス名を、そのメニュー項目の「CSS Classes」フィールドに追加します（前のドットは付けません）。この例では、「break-free」と入力します。
これで完成です。これで、ユーザーが「Break Free Now」メニューをクリックすると、あなたがデザインしたポップアップが表示されるようになりました。