ポップアップで用語の説明内容を表示させる方法
ブログ記事作成中に、記事に使用している用語の説明を入れたい!!
だけど、画面の空いているサイズに収まらない、レイアウト変更が煩わしいなどと思ったことはありませんか!?
私がちょうどそのような場面に出くわした時、解決するために使用したのが、ポップアップで用語の説明内容を表示させる方法でした。
こんな感じに☆
(思いっきりゲームの記事ですが笑)

では、どのようにポップアップ表示させるのか!?
プラグインを使用するのですが、数種類の有名なプラグインがあるみたいです。
最初に私が気になったのは、インストール数、レビュー数ともにダントツに多かった以下の2つですが、初心者の私は、特にメジャー感の強い「PopupMaker」を選択しました☆(使ってる人が多いもの程、困っても検索するといろんな記事があるはず!?)

「Popup Maker」の使い方
さっそく、「Popup Maker」をインストールし、有効化!
WordPress管理画面は以下の図のようになっています。

新規ポップアップ作成(Add Popup)
まず、「Add Popups」からポップアップ画面を新規作成します!

①Popup Name
・入力必須
・PopupMakerのトップ画面(All Popups)のName列に表示される〔管理用の名称〕
・半角英数字での入力が(SEO的に!?)良い

②Popup Title
・入力は任意(空白でもOK)
・PopupMakerのトップ画面(All Popups)のTitle列に表示される
・入力すると、ポップアップ内容の「表題」として表示される
(=appears on front end inside the popup container)

③ポップアップさせて表示させる内容
・WordPressで記事を作成するのとほぼ同じように、ポップアップさせたい内容を入力します。
・ポップアップ画面は、縦スクロール可能なので、下にどんどん書き進んでも基本的には大丈夫です♪

④Popup Settings
次に、ポップアップさせる方法を選びます。
「Trigger」⇨「Add New Trigger」をクリックすると、3つのポップアップさせる方法の選択画面が表示されます。

これらの3つの方法から、希望の方法を選択して、「Add」をクリックします。
(Cookieの設定もできるみたいですが、特に設定なしでも問題ありません。)
これで新規ポップアップの作成は完了です!
最後に必ず「更新」ボタンを押下します。
以下、「Click Open」の表示方法を選択したものとして、説明を続けます。
作成済ポップアップの表示・編集(All Popups)
次に、「All Popups」に表示されているCSSクラスを使用して、作成したポップアップを記事内に挿入します。
作成したポップアップのCSSクラスは次の箇所で確認できます。
2種類ありますが、「popmake-●●●●」の方の「●●●●」(数値)のみを使用します。

ポップアップを挿入したい記事の該当箇所に、次のコードを使用して、「ショートコード」を新規に挿入します。
[popup_trigger id="●●●●" tag="span"]任意の文字を記入[/popup_trigger]
・「●●●●」→ All Popupsの画面で確認した「CSSクラスの数値」を入力
・「任意の文字を記入」→ 私は「★各項目の説明はこちら★」と入力しました。

ショートコードの挿入が完了すれば、プレビューで確認し問題なければ、これで終了です♪
最後までご覧いただきありがとうございました☆