Me gustaría integrar Facybox 3 en mi WordPress (solo en publicaciones). Funciona, pero me molestó un poco porque el script de inicialización se carga después de que el núcleo fancybox js minificado. Entonces, aquí está el código que agregué en mi hijo 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" ); Y aquí está el html de salida
<!--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> Mi Las preguntas son:
- ¿Es un problema que Initialize se cargue antes que el js de fantasía principal?
- ¿Es una forma adecuada de hacerlo o tengo que poner el initialize script en un archivo js separado y luego ponerlo en cola en la misma función donde cargo el archivo central? Como esto, quiero decir:
.
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" ); Responder
No debería haber problemas reales al hacerlo de esta manera, pero hay una forma más correcta, a saber, usando wp_add_inline_script , que está diseñado exactamente para situaciones en las que desea agregar algo a un archivo de secuencia de comandos. Lo usaría como esto:
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"); } Respuesta
Gracias a cjbj, aquí está el código de trabajo para agregar Fancybox a 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" ); He cargado el CSS en el pie de página ya que no es importante cuando se carga la página.
¡Además, tenga cuidado al mezclar comillas simples («) y comillas dobles («)!