Magnific Popup を使って Youtube をポップアップ(モーダル)ウィンドウで表示する【WordPress】

Magnific Popup を使って Youtube をポップアップ(モーダル)ウィンドウで表示する【Wordpress】 WordPress

こんにちは、mickです。

Webサイトを作る中で、顧客から Youtube の動画を Webサイトを移動しないでポップアップで表示して欲しいとありました。

調べてみると、JavaScriptを使う方法が。
しかもやってみると超簡単。

参考にさせてもらったところは、非常にシンプルに書いてくれています。
それほど簡単でした。

参考URL:Magnific Popupで作るjQueryのモーダルウィンドウ

悩んだのは、ダウンロードした JavaScript のファイルをどこに設置しようかということくらい(笑)

使う JavaScript のファイル(ライブラリ)は、Magnific Popup です。
Webの環境は、Wordpress 5.8 です。

Magnific Popup を使って Youtube をポップアップ表示

Magnific Popup を使うと Jpeg などの画像ファイルをポップアップ(モーダル)ウィンドウで表示ができるようになります。
これは、画像ファイルだけではなくて、動画でもOK。
動画でやる場合は、iframe として扱って設定します。

Magnific Popup をダウンロード

Magnific Popup の配布サイトから Magnific Popup のファイル(ライブラリ)をダウンロードします。
ファイルを解凍して dist フォルダの中身だけ使います。

Magnific Popup の配布サイトから
Magnific Popup の配布サイトから
Source code をダウンロードする
Source code をダウンロードする
解凍したら、dist フォルダの中だけを使う
解凍したら、dist フォルダの中だけを使う

Magnific Popup を WordPress に設置

Magnific Popup のファイル(ライブラリ)を WordPress に設置します。
場所に悩んだら、assets フォルダを用意して、そこに設置するのがいいと思います。
WordPress の基本テーマ(Twenty Twenty など)がそういう造りになっているからです。

自分は、assets フォルダを用意してその中に Magnific Popup のファイルを設置した
自分は、assets フォルダを用意してその中に Magnific Popup のファイルを設置した

自分が悩んだのはここの設置場所くらい。

JQuery と Magnific Popup のライブラリを読み込む

JavaScript のライブラリは、wp_enqueue_script で。
CSS は、wp_enqueue_style で。
それぞれ functions.php で読み込む設定をします。

wp_enqueue_style('magnific-popup.min', /assets/css" . '/magnific-popup.css', false, version_num(), 'all');

wp_enqueue_script('jquery.min', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js', false, false, false);
wp_enqueue_script('jquery.magnific-popup.min', "/assets/js" . '/jquery.magnific-popup.min.js', false, version_num(), false);

JavaScript のコーディング

JavaScript のコーディングで、ポップアップ(モーダル)ウィンドウ表示させたい要素のクラス名を設定します。
ここでは .popup-iframe としています。
名前に悩んだらこのまま使ってください。

$(function(){
  $('.popup-iframe').magnificPopup({
    type: 'iframe',
    disableOn: 500, //ウィンドウ幅が500px以下だったらモーダル表示させずにリンク先へ遷移
    mainClass: 'mfp-fade',
    removalDelay: 200,
    preloader: false,
    fixedContentPos: false
  });
});

HTML のコーディング

HTML でのコーディングです。
さっき作った .popup-iframe を class で設定します。

<a class="popup-iframe" href="https://www.youtube.com/watch?v=YalIa0ywe68">YouTube動画</a>

まとめ。

Magnific Popup を使って Youtube をポップアップ(モーダル)ウィンドウで表示する方法を紹介しました。

Youtube の動画がポップアップ(モーダル)ウィンドウで表示されるだけで、洗練された感じがあります。
今回は、iframe を使っただけですが、Jpeg などの画像でもいけます。
参考URLにやり方があるので、置いておきますね。

参考URL:Magnific Popupで作るjQueryのモーダルウィンドウ

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/08/20

タイトルとURLをコピーしました