ポップアップショートコード(囲み型)の機能と使い方

公開日:2024(令和6)年12月17日/最終更新日:

WordPress plugin Hima Art UtilityWordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



リンク文字列をクリックすると、画面に被せてポップアップを表示させるショートコードの機能解説ページです。

本プラグインには似た機能を持つ以下のショートコードがありますが、若干用途が異なります。

上記リンク先ページで解説しているショートコードは、投稿と同じような編集画面を使って作成したコンテンツを単独のショートコードとして機能させるもので、通常使用ではこちらで問題ありません。

ただ、ポップアップコンテンツの中に元の投稿のIDを取得するようなケース、例えば問い合わせフォームなどで、投稿のタイトルなどをメールで送信する場合などでは、このショートコードコンテンツのIDが採用されてしまうという問題がありました。

これを解消するため、追加で囲み型ショートコードにしたのが本ページのショートコードです。

ポップアップショートコード(囲み型)の使い方

投稿編集画面からブロックの追加を行い、「すべて表示」→「パターン」を選択し、「HAUコンテンツ追加ショートコード」を選択すると表示される「ポップアップコンテンツ(囲み型ショートコード)」をクリックしてショートコードを呼び出すと以下のショートコードがエディター内に挿入されます。

[ha-inline-popup title="" width=""]
[/ha-inline-popup]

この2つのショートコードの間に入れたブロックがポップアップ表示される内容になります。

このショートコードには「title」「width」という2つのパラメーターがあり、以下のような役割を持ちますので設定して利用してください。

  • title・・・ポップアップ表示させるためのリンク文字列です。この文字列をクリックするとポップアップ表示されます。
  • width・・・ポップアップ表示される画面の幅をピクセル単位(数字のみ)で指定します
           ※未指定の場合はtheme.jsonのlayout→contentSizeで指定された幅が適用されます

以下が実際にこの機能を使った表示デモです。

<< この文字列をクリックするとポップアップ画面が表示されます >>



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress plugin Hima Art UtilityWordPress Customize Ideas | Personal WP Customization Notes (PWCN)
自動リンク機能の使い方