wp_add_inline_script sin dependencia

11

Tengo un fragmento de JavaScript que quiero inyectar en el pie de página de la página. Es un código de seguimiento, digamos similar a Google Analytics. No tiene dependencias, es un fragmento independiente.

Puedo hacer algo como esto

function render_tracking_code(){
    wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true );
    wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

Parece un poco estúpido (dummy.js es un archivo en blanco), pero funciona. ¿Hay alguna manera de saltear la dependencia?

javascript wp-enqueue-script jimlongo
fuente

Respuestas:

13

wp_add_inline_style() - sin dependencia

Se wp_add_inline_style()puede usar sin una dependencia del archivo fuente.

Aquí hay un ejemplo de @Flix:

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

donde conectaríamos esto a la wp_enqueue_scriptsacción.

wp_add_inline_script() - sin dependencia

De acuerdo con boleto # 43565 , similar contará con el apoyo de wp_add_inline_script()de la versión (gracias a @MarcioDuarte, @ dev101 y @DaveRomsey para la verificación de los comentarios):4.9.9 5.0

wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );

que mostrará lo siguiente en el encabezado , es decir, entre las <head>...</head>etiquetas:

<script type='text/javascript'>
console.log( "header" );
</script>

Para mostrarlo en el pie de página :

wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer'  );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );

El valor predeterminado del $positionargumento de entrada en wp_add_inline_script()es 'after'. El 'before'valor lo imprime arriba 'after'.

Birgire
fuente
El wp_add_inline_script()sin dependencia todavía está siendo considerado para 4.9.9, no significa necesariamente que se añadirá. Por lo tanto, es aconsejable esperar la confirmación antes de usar esta función.
Marcio Duarte
1
Estamos listos para partir de WP 5.0 .
Dave Romsey el
Alguien eliminó mi comentario desde aquí (confirme que birgire respondió que realmente funciona en WP 5.0+), y un mes después realmente necesitaba este código nuevamente, busqué en Google, encontré esta respuesta, barrí de un vistazo, no encontré mi comentario, y me mudé a otros resultados. Justo después de una hora, regresé aquí, dándome cuenta de que esta era la respuesta que estaba buscando. Para el moderador: NO elimine mis comentarios útiles, me sirven como referencias futuras y recordatorios, no solo para otros. Gracias.
dev101
Desafortunadamente tengo que seguir con la versión 4.9.x.
Lucas Vendramini
5

Actualización: WordPress agregó soporte para agregar scripts y estilos en línea sin una dependencia en v5.0. Vea la respuesta de @ birgire para implementaciones.

Cuando se usa wp_add_inline_script(), WP_Scripts::print_inline_script()finalmente se usará para generar scripts en línea. Por diseño, print_inline_script()requiere una dependencia válida, $handle.

Dado que no hay dependencia en este caso, wp_add_inline_script()no es la herramienta adecuada para el trabajo. En lugar de crear un archivo de dependencia falso (y una solicitud HTTP adicional no deseada), use wp_heado wp_footerpara generar el script en línea:

add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
  echo '<script>' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

En general, JavaScript debe agregarse a un .jsarchivo y colocarse wp_enqueue_script()en cola usando el wp_enqueue_scriptsgancho. Los datos pueden estar disponibles para el script usando wp_localize_script(). Sin embargo, a veces puede ser necesario agregar un script en línea.

Dave Romsey
fuente
0

Una forma de hacerlo es crear una función que haga eco de su secuencia de comandos dentro de una <script>etiqueta y engancharla a la wp_print_footer_scriptsacción. Debe tener cuidado de escapar de cualquier cosa que no controle estrictamente, pero este es un método generalmente seguro y fácil de lo contrario.

Por ejemplo:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
Morgan Estes
fuente