Facybox 3をWordPressに統合したい（投稿のみ）。動作しますが、コアが縮小された後に初期化スクリプトが読み込まれるので少し面倒ですfancybox js。そこで、これが私の子供に追加したコードですfunctions.php：
// ENQUEUE FANCYBOX SCRIPT function fancy_scripts() { if ( is_single() ) { wp_enqueue_script( "fancybox-script", "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js", array(), "3.3.5", true ); } } add_action( "wp_enqueue_scripts", "fancy_scripts" ); // INITIALIZE function fancy_init(){ if ( is_single() ) { ?> <script> jQuery(document).ready(function($){ $("[data-fancybox]").fancybox({ buttons: [ "zoom", "fullScreen", "share", "thumbs", "close" ], protect: true }); $(document).on("click", ".fancybox-share a.fancybox-share__button", function(e){ e.preventDefault(); var url = $(this).attr("href"); window.open(url, "_blank"); }); }); </script> <?php } } add_action("wp_footer","fancy_init") ; // ENQUEUE CSS TO FOOTER function fancy_footer_styles() { if ( is_single() ) { wp_enqueue_style( "fancybox-style","https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" ); } }; add_action( "get_footer", "fancy_footer_styles" ); 出力htmlは次のとおりです
<!--FOOTER--> <script> jQuery(document).ready(function($){ $("[data-fancybox]").fancybox({ buttons: [ "zoom", "fullScreen", "share", "thumbs", "close" ], protect: true }); $(document).on("click", ".fancybox-share a.fancybox-share__button", function(e){ e.preventDefault(); var url = $(this).attr("href"); window.open(url, "_blank"); }); }); </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css?ver=81a38b5eb2a4df901367646a93448a94" type="text/css" media="all" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js?ver=3.3.5"></script> My質問は次のとおりです。
- コアファンシーjsの前にロードを初期化するのは問題ですか？
- それを行うのに適切な方法ですか、それとも絶対に初期化を行う必要がありますか？別のjsファイルにスクリプトを記述し、コアファイルをロードするのと同じ関数にそれをエンキューしますか？つまり、
。
function fancy_scripts() { if ( is_single() ) { wp_enqueue_script( "fancybox-script", "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js", array(), "3.3.5", true ); wp_enqueue_script( "custom-script", get_stylesheet_directory_uri() . "/js/custom-scripts.js", array( "jquery" ), true ); } } add_action( "wp_enqueue_scripts", "fancy_scripts" ); 回答
この方法で実際に問題が発生することはありませんが、より正しい方法、つまり wp_add_inline_script これは、スクリプトファイルに何かを追加する場合にぴったりです。次のように使用します。これ：
add_action ("wp_enqueue_scripts", "wpse302588_enqueue_add_script"); function wpse302588_enqueue_add_script() { $add_script = "jQuery(document).ready(function($){ .... });"; // your script as a string without <script> tags wp_enqueue_script ("fancybox-script", "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js", array(), "3.3.5", true); wp_add_inline_script ("fancybox-script", $add_script, "after"); } 回答
cjbjのおかげで、FancyboxをWordpressに追加するための作業コードは次のとおりです。
// ADD FANCYBOX SCRIPT add_action ("wp_enqueue_scripts", "add_fancybox_script"); function add_fancybox_script() { if ( is_single() ) { // LOAD ONLY FOR SINGLE POSTS $add_script = "jQuery(document).ready(function($){ $("[data-fancybox]").fancybox({ buttons: [ "zoom", "fullScreen", "share", "thumbs", "close" ], protect: true }); });"; wp_enqueue_script ("fancybox-script", "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js", array(), "3.3.5", true); wp_add_inline_script ("fancybox-script", $add_script, "after"); } } // ENQUEUE CSS TO FOOTER function fancy_footer_styles() { if ( is_single() ) { wp_enqueue_style( "fancybox-style","https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" ); } }; add_action( "get_footer", "fancy_footer_styles" ); ページの読み込み時には重要ではないため、フッターにcssを読み込みました。
また、単純引用符（ “）と二重引用符（”）の混合には注意してください！