Comment intégrer correctement Fancybox 3 dans Wordpress

Je voudrais intégrer Facybox 3 dans mon WordPress (uniquement sur les articles). Cela fonctionne mais je suis un peu dérangé car le script dinitialisation est chargé après le noyau minifié fancybox js. Voici donc le code que jai ajouté à mon enfant 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" ); 

Et voici la sortie 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> 

Mon les questions sont:

1. Est-ce un problème dinitialiser les charges avant le noyau fancy js?
2. Est-ce une bonne façon de le faire ou dois-je absolument mettre le initialize script dans un fichier js séparé, puis le mettre en file dattente dans la même fonction que celle où je charge le fichier de base? En tant que ceci, je veux dire:

.

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" );