画像をタップするとQRコードが表示される仕組みを実装する方法

WordPressで「画像をタップしたらQRコードを表示したい」という場面は意外と多いはず。

イベントの案内
SNSリンクの共有
店舗のアクセス情報
PDFや外部ページへの誘導

しかし、デザインを崩したくない… そんなときに便利なのが、画像タップでQRコードをふわっと表示するUIです。

この記事では、SWELLテーマを使って コピペだけで実装できるQRコードポップアップの作り方を紹介します。

CONTENTS

QRコード画像を用意する

Google Chromeの「共有 → QRコードを作成」などで簡単に作れます。
作成した画像を WordPress のメディアにアップします。

※「ファイルのURL」はコピーしておきましょう。後で使用します。

タップされる画像にクラスを付ける

ブロックエディタで画像を選択し、
右側の「高度な設定 → 追加CSSクラス」に以下を入力します。

show-qr

追加CSSクラスの場所は下の写真を見ればわかるかな。

QRコードのポップアップHTMLをフッターに追加

SWELL設定 → 高度な設定 → カスタムスクリプト（フッター） に貼ります。
※QRコードの画像には「ファイルのURL」をコピーして貼り付けましょう。

<div id="qr-popup">
  <img src="QRコード画像のURL" alt="QRコード">
</div>

プラグイン「Simple Custom CSS and JS」を使っている方は

カスタムHTMLを新規で追加
上のHTMLコードを貼り付ける
オプションを「フッター」にして公開

WordPress.org 日本語

Simple Custom CSS and JS 最高のエディタで、ウェブサイトに独自の CSS や JS を簡単に追加できます。

JavaScriptを追加

次にフッターに以下のJavaScriptを記入します。

<script>
document.addEventListener('DOMContentLoaded', function() {
  const triggerImages = document.querySelectorAll('.show-qr');
  const popup = document.getElementById('qr-popup');

  triggerImages.forEach(img => {
    img.addEventListener('click', () => {
      popup.classList.add('active');
    });
  });

  popup.addEventListener('click', () => {
    popup.classList.remove('active');
  });
});
</script>

プラグイン「Simple Custom CSS and JS」を使っている方は

カスタムJSを新規で追加
上のJavaScriptコードを貼り付ける
オプションを「フッター」にして公開

CSSでフェードイン表示を作る

外観 → カスタマイズ → 追加CSS に以下を追加します。

/*背景を暗く*/
#qr-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

/*QRコードの大きさの設定*/
#qr-popup img {
  width: 260px;
  max-width: 80%;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

#qr-popup.active {
  opacity: 1;
  pointer-events: auto;
}
/*カーソルをポインターに*/
.show-qr {
  cursor: pointer;
}

プラグイン「Simple Custom CSS and JS」を使っている方は