Fancybox 3를 Wordpress에 제대로 통합하려면 어떻게해야합니까?

내 WordPress에 Facybox 3를 통합하고 싶습니다 (게시물에만 해당). 작동하지만 코어 축소 된 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 질문은 다음과 같습니다.

1. 초기화가 핵심 멋진 js 전에로드를 초기화하는 것이 문제입니까?
2. 그것을 수행하는 적절한 방법입니까 아니면 절대적으로 초기화를 넣어야합니까? 별도의 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" );