中に入れたブロックがクリックでポップアップ表示されるショートコードの作り方

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

WordPress Create Shortcodes | Personal WP Customization Notes (PWCN)

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



リンクをクリックするとショートコード内に挿入したブロックがポップアップ表示される機能を追加するコード例です。

本ページの機能を実装することで以下のようなことができるようになります。

  • 囲み型ショートコードで囲んだ部分をポップアップ表示させる
  • ショートコードに設定した文字列リンクをクリックすることでポップアップ画面が表示される
  • ポップアップ画面内にある「×」ボタンをクリックするとポップアップが閉じる
  • ショートコード内に挿入した別のショートコードも動作するようにする
  • ページ内に複数のポップアップ用ショートコードがあっても独立して動作するようにする

ブロック編集が主流のWordPressですが、ブロックを作る知識がなくても、従前からあるショートコードを使えばいろいろな表現をプラグインなしで実装することができますね。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

ポップアップショートコードの作り方

コードの詳細な解説は後述する「コード解説」を読んでいただくとして、ひとまず動作するコードを紹介しますが、本機能でボタンクリック時の動作をさせる部分でjQueryを使用しています。お使いのテーマでjQueryを読み込ませるファイルや環境が存在しない場合には以下のページなどを参考にjQueryが読み込まれるようにしないと動作しませんのでご注意ください。

このコードを使うと以下のようなポップアップコンテンツを作ることができますので試してみてください

=== ここをクリックすると内容がポップアップ表示されます ===

functions.phpへコードを追加する

以下のコードを有効化しているテーマのfunctions.phpへ追加します。

function pwcn_inline_popup_shortcode($atts , $content = null){
	// ショートコード属性を取得
	$atts = shortcode_atts(array(
		'title' => '',
		'width' => '',
    ), $atts);

	$title = wp_kses_post($atts['title']);

	//幅を変数化
	if(!empty($atts['width'])){
		$wide = $atts['width'].'px';
	}else{
		$wide = 'var(--wp--style--global--content-size)';
	}	

	// ページ内に複数のショートコードがあっても動作するようそれぞれ独立したIDを生成
	$popup_id = uniqid('inline-popup_'); 

	//出力する変数の初期化
	$output_before = '';
	$output_after = '';

	//出力する内容
	$output_before .= '<a href="#'.esc_attr($popup_id).'"  class="pwcn-inline-popup-trigger" data-popup-id="' . esc_attr($popup_id) . '">';
	$output_before .= wp_kses_post($title);
	$output_before .= '</a>';
	$output_before .= '<div id ="'.$popup_id.'" class="pwcn-inline-popup" style="display:none;width:'.$wide.'">';
	$output_before .= '<div class="pwcn-inline-popup-content">';

	//ポップアップショートコードの中にショートコードがあっても実行するようにする
	$content = do_shortcode( shortcode_unautop( $content ) ); 

	$output_after .= '<span class="pwcn-inline-popup-close">&times;</span>';
	$output_after .= '</div>';
	$output_after .= '</div>';

	//コンテンツを出力
	return $output_before.$content.$output_after;
}
add_shortcode('pwcn-inline-popup','pwcn_inline_popup_shortcode');

jQueryを追加する

前述したようにポップアップの表示/非表示の動作にjQueryを使用します。テーマに読み込ませる環境のない方は前述の参考ページなどを見て環境を整えてください

jQueryが読み込み可能なファイルへ以下のコードを追加します。

jQuery(document).ready(function($) {
	$('.pwcn-inline-popup-trigger').on('click', function(e) {
		e.preventDefault();
		var popupId = $(this).data('popup-id');
		var $popup = $('#' + popupId);
		$popup.css('display', 'block'); // 開く時に表示する
		setTimeout(function() {
			$popup.addClass('show'); // showクラスを追加
		}, 10); // 少し遅延させてアニメーションを適用
	});

	$('.pwcn-inline-popup-close').on('click', function() {
		var $popup = $(this).closest('.pwcn-inline-popup');
		$popup.removeClass('show'); // showクラスを削除
		// アニメーション終了後にポップアップを非表示にする
		setTimeout(function() {
			$popup.css('display', 'none'); // 完全に非表示にする
		}, 300); // アニメーションの時間に合わせる
	});

	$('.pwcn-popup-close-btn').on('click', function() {
		var $popup = $(this).closest('.pwcn-inline-popup');
		$popup.removeClass('show'); // showクラスを削除
		// アニメーション終了後にポップアップを非表示にする
		setTimeout(function() {
			$popup.css('display', 'none'); // 完全に非表示にする
		}, 300); // アニメーションの時間に合わせる
	});
});

追加して保存後は確実に動作させるため、キャッシュのクリア(Ctrl+F5)を行ってください

スタイルコードを追加する

以下のコードを有効化しているテーマのstyle.cssへ追加します。

.pwcn-inline-popup {
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	background: white;
	border: 1px solid #ccc;
	z-index: 1000;
	padding: 20px;
	transition: transform 0.3s ease, opacity 0.3s ease;
	opacity: 0;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	max-width:80%;
	max-height:80%;
	overflow-y:auto;
}

.pwcn-inline-popup.show {
	display: block;
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.pwcn-inline-popup-content {
	position: relative;
	padding-right: 30px;
}

.pwcn-inline-popup-close {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	font-size: 20px;
	color: #777;
}

.pwcn-inline-popup-close:hover {
	color: #000;
	font-weight:bold;
	transform: scale(1.2);
}

以上でコードの追加は完了です。このコードでうまく動作しないトラブルで一番多いのが、ブラウザキャッシュの問題ですので、一度表示画面側(トップページなどを表示させて)で「Ctrl」+「F5」を押してキャッシュをクリアしておくといいでしょう。

コードの追加が終わったら、以下のショートコードを追加して、間にポップアップ表示させたい内容(ブロック)を入れれば完成です。

[pwcn-inline-popup title="" width=""]
ここにポップアップ表示させたいブロックを入れる
[/pwcn-inline-popup]

このショートコードではtitleとwidthという2つのパラメーターを持たせていますので、それぞれ以下のように指定してください。

  • title・・・ポップアップ表示させるためのリンク文字列です。
          ※投稿で利用できるHTMLタグが許容されるようにしています
  • width・・・ポップアップ画面の幅をピクセル単位(指定するのは数字のみ)で指定します
          ※未指定の場合はtheme.jsonのlayout→contentSizeで指定された幅が適用されます

どこかの投稿などで実際にこの仕組みを使ってポップアップ表示されるのを確認できたら、ぜひ次項でどのようなコードなのかを確認ください。

QA Analytics QA Analytics

コード解説

こうしたカスタマイズコードは結構自身のサイトに導入したものの動作しなかった..ということが多いと思いますので、まずは動作することを確認されてからと思い、コード解説を後回しにしました。

本ページで紹介したコードはPHP、jQuery、CSSが相互に関連しており、以下のような流れで動作するようになっています。

  1. PHPコードで表示される内容(リンク・ポップアップの内容)とパラメーター条件を指定
  2. CSSでポップアップ画面を初期では非表示にする
  3. jQueryでリンクがクリックされた時に非表示を解除してポップアップ画面を表示(表示する位置や色などはCSSで指定し、幅はPHP内で処理)
  4. jQueryでポップアップ画面内の「×」がクリックされた、または、「pwcn-popup-close-btn」という追加CSSクラスを設定したボタンブロックがクリックされたらポップアップ画面を閉じる(再び非表示にする)

これを踏まえて各プログラムの内容を以下に紹介します。

PHPコードについて

PHPコードは標準的なパラメーターを付きの囲み型ショートコードを作り、以下の内容を書いています。

ショートコードの作り方については以下を参照ください。

出力されるコンテンツとして以下のものを含めています。

  • titleパラメーターに指定した文字列をリンクとして表示させる部分
  • $contentという変数を初期設定で空にし、出力内容の中に入れることで、間に挟んだ内容を出力(この内容の中に別のショートコードがあっても動作するようにしています)
  • 「×」を表示する部分

jQuery

詳細はコードをじっくり眺めて解読していただければと思いますが、以下のようなことをさせています。

  • pwcn-inline-popup-triggerというCSSクラスを持つリンクがクリックされたら、pwcn-inline-popupというCSSクラスを持つ要素へshowというクラスを追加する
  • pwcn-inline-popup-closeクラスを持つリンク(×ボタン)、またはpwcn-popup-close-btnというクラスを持つリンクがクリックされたらpwcn-inline-popupというCSSクラスを持つ要素からshowというクラスを外す

CSS

スタイルコードは以下のようにして表示・非表示を切り替えています。

  • pwcn-inline-popupクラスのみを持つコンテンツはdisplay:none;で非表示にする
  • pwcn-inline-popupとshowクラスを持つコンテンツはdisplay:block;で表示させる(showクラスの付け外しはjQueryで処理)

あとは色・位置の指定などを行っています。

補足

このコードではPHPのプログラムの中で、ショートコードが挿入されたコンテンツに対して固有のIDを付与しています(以下の部分)。

	// ページ内に複数のショートコードがあっても動作するようそれぞれ独立したIDを生成
	$popup_id = uniqid('inline-popup_'); 

.......

	//出力する内容
	$output_before .= '<a href="#'.esc_attr($popup_id).'"  class="pwcn-inline-popup-trigger" data-popup-id="' . esc_attr($popup_id) . '">';
.......

こうしておくことで、ページ内に同じショートコードが複数あっても別のIDを持つ要素として別々に認識させることができ、それに呼応して以下のjQueryで固有のIDを持つ要素に対して処理をするようにしてページ内のポップアップを別々に操作することができるようにしています。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Create Shortcodes | Personal WP Customization Notes (PWCN)
特定のカスタムタクソノミーを紐づく投稿の数順に一覧表示させるショートコード