【WordPress】PopupMakerを使って用語(略語)の説明内容を表示させてみた!

ポップアップで用語の説明内容を表示させる方法

ブログ記事作成中に、記事に使用している用語の説明を入れたい!!
だけど、画面の空いているサイズに収まらない、レイアウト変更が煩わしいなどと思ったことはありませんか!?

私がちょうどそのような場面に出くわした時、解決するために使用したのが、ポップアップで用語の説明内容を表示させる方法でした。

こんな感じに☆
(思いっきりゲームの記事ですが笑)

では、どのようにポップアップ表示させるのか!?

プラグインを使用するのですが、数種類の有名なプラグインがあるみたいです。

最初に私が気になったのは、インストール数、レビュー数ともにダントツに多かった以下の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」って!?

Trigger → 引き金 → スイッチ(ポップアップさせる方法)
みたいな感じですね。

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

ポップアップさせる方法
  • Click Open
    指定した文字・ボタンなどを「クリック」するとポップアップ表示
  • Time Delay/Auto Open
    指定した時間が経過すると同時に自動的にポップアップが表示
  • Form Submission
    お問い合わせや申し込みの入力フォームをポップアップ表示

これらの3つの方法から、希望の方法を選択して、「Add」をクリックします。
(Cookieの設定もできるみたいですが、特に設定なしでも問題ありません。)

これで新規ポップアップの作成は完了です!
最後に必ず「更新」ボタンを押下します。

以下、「Click Open」の表示方法を選択したものとして、説明を続けます。

Popup SettingsのTrigger以外の項目」について

これらは特に設定しなくても、ポップアップは起動できますが、参考に簡単に記載します。

〇Targeting
・特定の場合にポップアップさせるように設定
・モバイルやタブレットでのポップアップを無効にする設定

〇Display
・(Display Presets)ポップアップを表示させるデフォルトの場所を選択
・(Appearance)WordPressのテーマのように、Popupのテーマを選択
・(Size)ポップアップのサイズなどを設定
・(Animation)ポップアップのアニメーションタイプとその速度を選択
・(Sounds)ポップアップが開いたときに再生するサウンドを選択
・(Position)ポップアップが表示される場所を調整
・(Advanced )他のポップアップを開いたままにするなどの調整

〇Close
・閉じるボタン「Close」の表示を変更
・「ESC」キーや「F4」キーでポップアップを閉じる設定

作成済ポップアップの表示・編集(All Popups)

次に、「All Popups」に表示されているCSSクラスを使用して、作成したポップアップを記事内に挿入します。

作成したポップアップのCSSクラスは次の箇所で確認できます。
2種類ありますが、「popmake-●●●●」の方の「●●●●(数値)のみを使用します。

ポップアップを挿入したい記事の該当箇所に、次のコードを使用して、「ショートコード」を新規に挿入します。

[popup_trigger id="●●●●" tag="span"]任意の文字を記入[/popup_trigger]

・「●●●●」→ All Popupsの画面で確認した「CSSクラスの数値」を入力
・「任意の文字を記入」→ 私は「★各項目の説明はこちら★」と入力しました。

ショートコードの挿入が完了すれば、プレビューで確認し問題なければ、これで終了です♪

最後までご覧いただきありがとうございました☆

タイトルとURLをコピーしました