Fancyboxを使用すると、絵などをさまざまな方法でライトボックスの形で開くことができます。 特に外部URLのページをポップアップ形式で開くことができます。 WordPressはLightboxプラグインがたくさんありますが、ほとんどの画像に使用されて外部URLに使用されるものではResponsive Lightboxプラグインがありますが、テストしてみると、最新の WordPressではうまくいかないようです。
この記事はずっと前に書かれています。 現在、Responsive Lightbox & Galleryなど、さまざまな無料および有料のライトボックスプラグインを使用できます。 プラグインを使用すると、簡単にライトボックス機能を実装できます。 CSSだけを使ってポップアップ（ライトボックス）機能を実装したい場合[CSS]テキストをクリックすると、divがポップアップで表示されるようにする方法「を参照できます。
WordPressでFancyboxを使用して、外部URLのページをライトボックスで開く
Fancyboxは、単一の画像、ギャラリー、外部URLは、YouTube、Vimeoなどの動画をライトボックスの形で開きます。 ここで、いくつかの実行を確認することができます。
WordPressでFancyboxを使用するには、以下の手順に従ってインストールします：
- Fancyboxサイトを訪問して、ファイルをダウンロードします。
- ファイルを解凍し、 fancybox フォルダを丸ごとテーマフォルダの下の js フォルダ内にコピーします。 （.../wp-content/themes/テーマ フォンダー/js/fancybox/...)
- このページのガイドラインを参考に WordPress 関数ファイルにjsファイルとcssファイルをenqueue（フック）させます。 フックさせる方法は、 WordPress Codexページを参照してください。
- ここで、次のコードをコピーして、jsファイルを作成して貼り付けます。
$(document).ready(function(){ $(".fancybox").fancybox({ openEffect : 'none', closeEffect : 'none', iframe : { preload: false } }); $(".various" ).fancybox({ maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', : }); $('.fancybox-media').fancybox({ openEffect : 'none', closeEffect : 'none', helpers : { media : {} } }); }); //Source: http://www.lets-develop.com/
新しく作成したjsファイルもテーマ関数ファイルに登録してEnqueueさせるようにします。
Fancybox enqueue例：
function fancybox_scripts() { wp_enqueue_script( 'fancyboxmouswheel', get_stylesheet_directory_uri() . '/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js', array('j51150410'), array('jquery'), array('jquery') wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() . '/js/fancybox/source/jquery.fancybox.pack.js', array('jquery'), '51150411', true ); wp_enqueue_script( 'fancyboxbutton', get_stylesheet_directory_uri() . '/js/fancybox/source/helpers/jquery.fancybox-buttons.js', array('jquery'), '51150412', true wp_enqueue_script( 'fancyboxmedia', get_stylesheet_directory_uri() . '/js/fancybox/source/helpers/jquery.fancybox-media.js', array('jquery'), '51150413', true ); wp_enqueue_script( 'fancyboxthumbs', get_stylesheet_directory_uri() . '/js/fancybox/source/helpers/jquery.fancybox-thumbs.js', array('jquery'), '51150414', ' wp_enqueue_script( 'fancyboxvarious', get_stylesheet_directory_uri() . '/js/fancybox/fancybox_scripts.js', array('jquery'), '51150415', true ); wp_enqueue_style('fancyboxcss', get_stylesheet_directory_uri().'/js/fancybox/source/jquery.fancybox.css'); wp_enqueue_style('fancyboxcssbuttons', get_stylesheet_directory_uri().'/js/fancybox/source/helpers/jquery.fancybox-buttons.css'); wp_enqueue_style('fancyboxcssthumbs', get_stylesheet_directory_uri().'/js/fancybox/source/helpers/jquery.fancybox-thumbs.css'); } add_action（ 'wp_enqueue_scripts'、 'fancybox_scripts'）;
今 このページのHow to use Fancybox showing media部分の使い方を参考にライトボックス機能を使用することができます。
コメントを残す