Dónde y cómo poner js en línea en las páginas

Estoy revisando el código fuente de functions.php del tema Twenty Seventeen y dejaron un patrón para insertar script (o cualquier cosa) en el documento con prioridad, mostrado aquí generalizado usando una función nombrada:

function add_inline_script() {
  echo "<script>/* haz cosas increíbles */</script>\n";
}
add_action( 'wp_head', 'add_inline_script', 0 );

Podrías querer hacer esto, por ejemplo, si estás cargando un script async como el alternativo de Google Analytics fragmento de seguimiento async, permitiéndote iniciar solicitudes de script no bloqueantes tan pronto como el documento comienza a analizarse (si se coloca por encima de solicitudes bloqueantes).

Además de async, los navegadores modernos también nos permiten gestionar dependencias async aprovechando la Fetch API, ofreciendo la capacidad de cargar dependencias externas asincrónicamente en paralelo sin riesgo de condiciones de carrera.

La siguiente imagen y ejemplo ilustran el uso de esta técnica para reducir el tiempo de carga de la página mediante la carga de scripts sin bloqueo en el tema Twenty Eleven usando Fetch Inject:

Figura 1: Scripts del tema Twenty Seventeen más lazysizes cargando asincrónicamente en paralelo.

Aprovechando una pregunta sobre interpolación de cadenas. Úsala mientras colocas bloques arbitrarios de contenido en la página con echo usando NOWDOC o HEREDOC y asignaciones global e interpolación de cadenas con Fetch Inject, como se muestra aquí:

/**
 * Carga scripts usando Fetch Inject en lugar de wp_enqueue_script
 * para tiempos de carga de página más rápidos y menor latencia percibida.
 *
 * @since WordCamp Ubud 2017
 * @link https://wordpress.stackexchange.com/a/263733/117731
 * @link https://github.com/jhabdas/fetch-inject
 *
 */
function add_inline_script() {
  $twentyseventeen_l10n = array(
    'quote' => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ),
    'expand' => __( 'Expandir menú hijo', 'twentyseventeen' ),
    'collapse' => __( 'Colapsar menú hijo', 'twentyseventeen' ),
    'icon' => twentyseventeen_get_svg( array( 'icon' => 'angle-down', 'fallback' => true ) )
  );
  $jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
  $jquery_dependent_script_paths = [
    get_theme_file_uri( '/assets/js/global.js' ),
    get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
    get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ),
    get_theme_file_uri( '/assets/js/navigation.js' )
  ];
  $lazysizes_path = get_theme_file_uri( '/assets/js/lazysizes.min.js' );
  $screen_reader_text_object_name = 'twentyseventeenScreenReaderText';
  $twentyseventeen_l10n_data_json = json_encode($twentyseventeen_l10n);
  $jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
  $inline_script = <<<EOD
window.{$screen_reader_text_object_name} = $twentyseventeen_l10n_data_json;
(function () {
  'use strict';
  if (!window.fetch) return;
  /**
   * Fetch Inject v1.6.8
   * Copyright (c) 2017 Josh Habdas
   * @licence ISC
   */
  var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` debe ser un array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` debe ser una promesa"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
  fetchInject(
    $jquery_dependent_script_paths_json
  , fetchInject([
    "{$jquery_script_path}"
  ]));
    fetchInject(["{$lazysizes_path}"])
})();
EOD;
  echo "<script>{$inline_script}</script>";
}
add_action('wp_head', 'add_inline_script', 0);

Reduce la latencia percibida en un tema Twenty Seventeen estándar en aproximadamente un 50 por ciento. Puede aplicarse a cualquier tema.

¿Cómo funciona?

• Reemplaza todos los scripts encolados con wp_enqueue_script para que se muestren más rápido usando Fetch Injection. (Nota: Consulta la documentación de Fetch Inject para compatibilidad con navegadores antiguos).
• Usa HEREDOC para mostrar todo en una etiqueta script en el head.
• Define una variable global en window que el tema necesita.
• Carga todos los scripts asincrónicamente en paralelo como se muestra en la imagen anterior, pero espera a que jQuery termine de cargarse antes de ejecutar las dependencias (ya descargadas).
• Realiza todo el trabajo en un IIFE para evitar que cualquier variable libre se filtre al ámbito window.

HEREDOC es ideal para controlar la salida cuando necesitas mantener avisos de copyright u otro formato mediante plantillas mixtas. También ayuda a aumentar la velocidad de depuración de scripts cuando no tienes el código minificado a mano o solo quieres insertar algo en el documento para pruebas.

Si deseas asegurarte de que los elementos se agreguen solo una vez, consulta esta respuesta: https://wordpress.stackexchange.com/a/131640/117731

Finalmente, si deseas agregar al pie de página en lugar del encabezado, puedes reemplazar wp_head en la llamada add_action con wp_footer.

EDIT: Después de investigar más, encontré esta publicación en el blog de David Walsh, sugiriendo que al menos la inserción simple ha estado disponible desde al menos 2012. ¡Diviértete!

wp_enqueue_script() es la única forma correcta de agregar JavaScript a tu sitio. Esto te permite a ti y a otros plugins declarar dependencias e incluso eliminar scripts si es necesario. Como se mencionó hoy en un hilo diferente, los plugins de caché no pueden comprimir o minificar tus scripts si no utilizas la técnica adecuada de WordPress.

Si revisas la página del Codex, verás que puedes controlar si el script se carga en el encabezado o en el pie de página.

Aunque mrwweb tiene razón y esa técnica debería usarse, en la realidad nada es perfecto y hay ocasiones en las que se utilizan scripts y estilos en línea. Puedes usar wp script is para verificar un script y mostrarlos en el encabezado o pie de página usando wp_head o wp_footer.

Puedes consultar la respuesta de scribu en esta publicación, wp enqueue inline script debido a dependencias