予め作成しておいたポップアップ表示の内容をショートコードで呼び出せるようにするポップアップショートコードの解説ページです。
この機能を使うことで、何かの規約などを別ページへ遷移することなく表示させる、小さな画像に対して拡大画像をクリックで表示させる、通常のメニューの位置に設置することで、メインメニューをクリックするとポップアップでサブメニューが表示される、いわゆるメガメニューに似た機能を持たせることができます。
作成するポップアップの内容は、通常の投稿と同様にブロックエディターで自由に作れるのが便利です。
レイアウトは保持されません(縦並びになる等)がありますが、モバイル環境でも動作します。
ポップアップショートコードのデモ
ポップアップショートコードの表示デモです。
以下の「ポップアップを表示させる」リンクをクリックしてみてください。
ポップアップを表示させるためのリンクポップアップショートコードでできないこと
このショートコードはポップアップ表示させる内容を登録するカスタム投稿タイプ(投稿や固定ページとは別の投稿の集まり)の内容を表示させる機能で、ポップアップ用コンテンツの中に別のショートコードを挿入しても動作します。
ただし、そのコンタクトフォームのメール送信機能で、その投稿のIDやタイトルを添付して送信する場合など、「その投稿」に関する情報はポップアップコンテンツのものが引用され、ポップアップを挿入した元ページの内容とならないことにご注意ください。
例えば有名なプラグインであるContact Form 7でフォームのポップアップをさせたい場合は以下のようなサードパーティプラグインを使用してください(下記のプラグインが正常に動作するかは検証していません)。
ポップアップショートコードの使い方
管理画面から「HA Utility」→「追加コンテンツ」を開き、「ショートコード」タブの中の「HA Utilityショートコードを使う」を有効にしてください。
有効にすると、「HA Utility」メニューの中に「ポップアップ」というメニューが追加されますので、クリックして通常の投稿と同じようにポップアップ画面の内容として表示される内容を編集して公開します。
「ポップアップ」メニューをクリックすると、公開済のポップアップコンテンツの一覧が表示されますので、ショートコードの部分をクリックしてコピーし、ポップアップコンテンツを設置したい投稿や固定ページへ挿入すれば完成です。
ポップアップ表示させるためのリンク文字列について
「ポップアップ」内で作成したポップアップコンテンツのタイトルがリンク文字列として使われますが、このタイトルではHTMLが使用できないため、アイコンや独自のスタイルなどを追加したい場合には、下図のように編集画面の下に表示される「ポップアップのリンク文字列」欄でHTMLコードを含めて入力してください。

「Popupリンクタイトル」欄に入力がなければタイトルの文字列がリンクとして利用されます
なお、Hima Art Utilityプラグインでは、以下のアイコンが使用できますので、文字列の前後などにHTMLで入力することでマークを表示させたりすることができます。
ショートコードパラメーターについて
本機能で生成されるショートコードには以下のパラメーターがありますので、任意に指定してください。
パラメーター | 初期値 | 機能や備考 |
---|---|---|
ids | 投稿ID | 一覧からショートコードをコピーした場合には設定は不要です |
width | 通常コンテンツ幅 | theme.jsonで指定されているコンテンツ幅とは異なる幅でコンテンツを表示させたい場合にpx単位で指定します |
type | なし | 1または何かの文字列を入れると、コンテンツ全体がnavタグで囲まれます |
パラメーターの補足事項
「width」パラメーターで何も指定しない場合には、theme.json上の「contentSize」の値を元にポップアップ表示するコンテンツが表示されます。
theme.jsonを持たない、あるいは「contentSize」が指定されていないテーマではこの値を指定する必要があります
「type」パラメーターで「1」などを指定すると、ポップアップリンクおよびポップアップコンテンツがすべてnavタグで囲まれます。これにより、HTML上ではナビゲーション(メニュー項目)と認識され、アクセシビリティの向上(読み上げ機能などを使っている方にそのコンテンツを判別しやすくする)に役立ちます。
「×」マーク以外に閉じるボタンを表示させて機能させたいときは
このショートコードでは、ポップアップ表示されるコンテンツの右上に「×」マークが表示され、クリックすると画面が閉じるようになっていますが、中には独自にボタンブロックを挿入して閉じるアクションをさせたいケースもあると思います。
その場合には、ボタンブロックの追加CSSクラスに「ha-popup-close-btn」を指定するか、パターンの追加から「HAUブロックパターン」カテゴリの中にある「ポップアップを閉じるボタン」のパターンを挿入し、色や文字などは通常のボタンブロックと同じように調整してください。
コメントを残す