リンク文字列をクリックすると、画面に被せてポップアップを表示させるショートコードの機能解説ページです。
本プラグインには似た機能を持つ以下のショートコードがありますが、若干用途が異なります。
上記リンク先ページで解説しているショートコードは、投稿と同じような編集画面を使って作成したコンテンツを単独のショートコードとして機能させるもので、通常使用ではこちらで問題ありません。
ただ、ポップアップコンテンツの中に元の投稿のIDを取得するようなケース、例えば問い合わせフォームなどで、投稿のタイトルなどをメールで送信する場合などでは、このショートコードコンテンツのIDが採用されてしまうという問題がありました。
これを解消するため、追加で囲み型ショートコードにしたのが本ページのショートコードです。
ポップアップショートコード(囲み型)の使い方
投稿編集画面からブロックの追加を行い、「すべて表示」→「パターン」を選択し、「HAUコンテンツ追加ショートコード」を選択すると表示される「ポップアップコンテンツ(囲み型ショートコード)」をクリックしてショートコードを呼び出すと以下のショートコードがエディター内に挿入されます。
[ha-inline-popup title="" width=""]
[/ha-inline-popup]
この2つのショートコードの間に入れたブロックがポップアップ表示される内容になります。
このショートコードには「title」「width」という2つのパラメーターがあり、以下のような役割を持ちますので設定して利用してください。
- title・・・ポップアップ表示させるためのリンク文字列です。この文字列をクリックするとポップアップ表示されます。
- width・・・ポップアップ表示される画面の幅をピクセル単位(数字のみ)で指定します
※未指定の場合はtheme.jsonのlayout→contentSizeで指定された幅が適用されます
以下が実際にこの機能を使った表示デモです。
<< この文字列をクリックするとポップアップ画面が表示されます >>
コメントを残す