wp_add_inline_script sin dependencia

Question

wp_add_inline_script sin dependencia

23 mar 2018, 23:45:46

Vistas: 23.7K

Votos: 29

Tengo un fragmento de JavaScript que quiero inyectar en el pie de página. Es un código de seguimiento, 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', 'unMontónDeCódigoJavaScript' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

Parece un poco tonto (dummy.js es un archivo en blanco), pero funciona. ¿Hay alguna manera de omitir la dependencia?

jimlongo

393

javascript wp enqueue script

Todas las respuestas a la pregunta

Comentarios

La función wp_add_inline_script() sin dependencia todavía está siendo considerada para la versión 4.9.9, lo que no significa necesariamente que será añadida. Por lo tanto, es prudente esperar confirmación antes de utilizar esta característica.

Marcio Duarte

2 sept 2018 00:52:24

Estamos listos para usarlo a partir de WP 5.0.

Dave Romsey

23 ene 2019 04:22:42

Alguien borró mi comentario de aquí (confirmé la respuesta de birgire de que realmente funciona en WP 5.0+), y un mes después realmente necesité este código de nuevo, lo busqué en Google, encontré esta respuesta, la revisé rápidamente sin encontrar mi comentario, y seguí con otros resultados. Justo después de una hora, volví aquí, ¡dándome cuenta de que esta era la respuesta que estaba buscando! Para el moderador: por favor NO BORREN mis comentarios útiles, me sirven a MÍ como referencias futuras y recordatorios, no solo a otros. Gracias.

dev101

20 feb 2019 21:10:34

Desafortunadamente, tengo que mantenerme en la versión 4.9.x.

Lucas Vendramini

3 dic 2019 20:06:10

birgire 67.8K · Answer 1 · 2018-08-13T12:41:25Z

`wp_add_inline_style()` - sin dependencia

La función wp_add_inline_style() puede usarse sin un archivo fuente de dependencia.

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 engancharíamos esto en la acción wp_enqueue_scripts.

`wp_add_inline_script()` - sin dependencia

Según el ticket #43565, un soporte similar estará disponible para wp_add_inline_script() en la versión ~~4.9.9~~ 5.0 (gracias a @MarcioDuarte, @dev101 y @DaveRomsey por la verificación en los comentarios):

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 header, es decir, entre las etiquetas <head>...</head>:

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

Para mostrarlo en el footer:

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 por defecto del argumento $position en wp_add_inline_script() es 'after'. El valor 'before' lo imprime por encima de 'after'.

Dave Romsey 17.9K · Answer 2 · 2018-03-24T00:37:08Z

Actualización: WordPress añadió soporte para agregar scripts y estilos en línea sin una dependencia en la versión 5.0. Consulta la respuesta de @birgire para ver las implementaciones.

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

Dado que no hay una 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), usa wp_head o wp_footer para mostrar 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;
}

Generalmente, JavaScript debería agregarse a un archivo .js y encolarse usando wp_enqueue_script() en el hook wp_enqueue_scripts. Los datos pueden hacerse disponibles para el script usando wp_localize_script(). A veces aún puede ser necesario agregar un script en línea.

Morgan Estes 1.56K · Answer 3 · 2018-04-13T07:03:03Z

Una forma de hacer esto es crear una función que imprima tu script dentro de una etiqueta <script> y engancharla a la acción wp_print_footer_scripts. Debes tener cuidado de escapar cualquier cosa que no controles estrictamente, pero por lo demás este es un método generalmente seguro y sencillo.

Por ejemplo:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* tu código aquí */
        })();
    </script>
<?php 
} );

Morgan Estes

1.56K

13 abr 2018 07:03:03

wp_add_inline_script sin dependencia

wp_add_inline_style() - sin dependencia

wp_add_inline_script() - sin dependencia

`wp_add_inline_style()` - sin dependencia

`wp_add_inline_script()` - sin dependencia