ワードプレスでポップアップ画像を表示するスクリプトコード

2024年9月28日

ワードプレスでポップアップ画像を表示するスクリプトコード

このスクリプトのURLを自身の画像のURLに変更すれば、パソコンやスマホで読み手に何らかのアクションをして欲しい時にポップアップ画像が表示されるようになります。

<Head>と</HEAD>タグの間に設置します。

以下のスクリプトです。

<script>
document.addEventListener("DOMContentLoaded", function(){
setTimeout(function(){
var callBox = document.createElement("div");
callBox.id = "callBox";
callBox.style.position = "fixed";
callBox.style.top = "50%";
callBox.style.left = "50%";
callBox.style.transform = "translate(-50%, -50%)";
callBox.style.cursor = "pointer";

var callImage = document.createElement("img");
callImage.src = "https://○○○.jp/wp-content/uploads/2024/01/XXXX.jpeg"; // 画像のパスを設定
callImage.style.maxWidth = "100%";
callImage.style.maxHeight = "100%";
callImage.style.width = "400px"; // パソコン表示サイズ
callImage.style.height = "500px"; // パソコン表示サイズ
callImage.onclick = function() {
window.location.href = "tel:0120428250";
};

// メディアクエリを使用してスマートフォン表示時のサイズを調整
var mediaQuery = window.matchMedia("(max-width: 768px)");
if (mediaQuery.matches) {
// スマートフォン表示サイズ
callImage.style.width = "900px"; // 幅を900pxに設定
callImage.style.height = "auto"; // 高さを自動調整（縦横比を維持）
}

var closeButton = document.createElement("div");
closeButton.textContent = "X";
closeButton.style.position = "absolute";
closeButton.style.top = "-14px"; // 位置を調整
closeButton.style.right = "-14px"; // 位置を調整
closeButton.style.cursor = "pointer";
closeButton.style.fontSize = "28px"; // フォントサイズを70%に調整
closeButton.style.backgroundColor = "#f5f5f5"; // 色は白に近いグレー
closeButton.style.borderRadius = "50%";
closeButton.style.padding = "7px"; // パディングを70%に調整
closeButton.onclick = function() {
callBox.remove();
};

callBox.appendChild(callImage);
callBox.appendChild(closeButton);
document.body.appendChild(callBox);
}, 8000); // 8秒後に実行
});
</script>