OnePressでMagnific Popupを使ってみた

どうも、くらりんです

今日は仕事でも使っている「Magnific Popup」をプラグイン無しで使えるようにする方法です！

Magnific Popupとは？

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device
公式サイトより

だそうです。

「Magnific Popup」はjQueryのプラグインで簡単にポップアップモーダルを作れてしまいます！

WordPressだとWP Magnific Popupというプラグインがありますが、
現状は写真しか対応していなくて、テキストなどインライン要素を表示するにはWPのプラグインだけでは実現できませんでした・・・

なので、今回はMagnific PopupをOnePressテーマに入れて
ポップアップを作っていきたいと思います！

必要なのは下記２つだけ！

①Magnific Popupのcss/jsファイルのダウンロード
②Magnific Popupのcss/jsファイルの読み込み

①Magnific Popupのcss/jsファイルのダウンロード

Magnific Popupの公式ページからファイルをダウンロードするだけ。
必要なのは、distフォルダ内にある２つのファイルのみ。
それ以外は削除しても大丈夫です！

jquery.magnific-popup.min.js
magnific-popup.css

②Magnific Popupのcss/jsファイルの読み込み

このファイルをサーバー上の適当なところに置いて、functions.phpでファイルを読み込みます。
僕は子テーマ配下にmagnific-popupフォルダを作成してそこにそれぞれのファイルを置きました。

あとは子テーマのfunctions.phpでエンキュー関数を使ってcss/jsファイルを読み込みます。

/**
 * Enqueue child theme style
 */
add_action( 'wp_enqueue_scripts', 'onepress_child_enqueue_styles', 15 );
function onepress_child_enqueue_styles() {
    wp_enqueue_style( 'onepress-child-style', get_stylesheet_directory_uri() . '/style.css' );

   ↓ここから追加
    //子テーマのstyle.css
	wp_enqueue_style( 'mp', get_stylesheet_directory_uri() . '/magnific-popup/css/magnific-popup.css' );
    //子テーマのstyle.css
	wp_enqueue_script( 'mp', get_stylesheet_directory_uri() . '/magnific-popup/js/jquery.magnific-popup.min.js' );
}

完成！

あとはJSのコードとHTML要素に任意のclass 名や id 名を付与して使えるようになります。

header.phpのwp_head()のあとに下記コードを追加。

<script>
jQuery(function($){    
    // 写真のポップアップ
    $('.image-popup-link').magnificPopup({ 
        type: 'image'
    });    
    // インライン要素のポップアップ    
    $('.popup-modal').magnificPopup({ 
        type: 'inline',
        preloader: false
    }); 
});
</script>

HTML

<a class="image-popup-link" href="path-to-image.jpg">popup写真</a>

popup写真

インライン要素でポップアップを出したいときのHTML

参考

<a href="#test-popup" class="popup-modal">Show inline popup</a>
<div id="test-popup" class="white-popup mfp-hide">
  Popup content
ここに好きなテキストとか写真とか入れらるよ！
</div>

Show inline popup

以上、magnific popupをwordpressで使う方法でした！

完成！

Leave a Reply Cancel reply