Colocar referencia a estilos y scripts en el head de una web con WordPress

by

A partir de cierta versión de WordPress ya los colaboradores del código nos dieron a los desarrolladores web ciertas funciones para que no tengamos que entrar en el core de WordPress a hacer cambios en el head. O, peor aún, que no insertemos HTML directamente en el archivo header.php ya que eso inutilizaría el propósito del CSM.

Estas funciones son:

La forma de estas funciones a excepción de la última, y tomando como ejemplo wp_enqueue_style(), es:

wp_enqueue_style( string $handle, string $src = ”, string[] $deps = array(), string|bool|null $ver = false, string $media = ‘all’ )

Con esta función agregamos un referencia a una hoja de estilo que podrá contener:

  • El id (string $handle)
  • La ruta al archivo (string $src=””)
  • Los id de archivos que son dependencia (string[]$dep=array())
  • La versión del archivo (string|bool|null $ver = false)
  • Y el valor del parámetro media (string $media = ‘all’)

Estas funciones registran y sacan de cola las referencias que hacemos en el header a los diferentes y estilos y scripts.

Hay una lógica

Las referencias deben registrarse y ponerse en cola.

  • Si uso wp_register_script() solo registro el archivo en el sistema.
  • Si uso wp_enqueue_script() lo registro y lo pongo en cola o pongo en cola un archivo que ya estaba registrado, para eso último solo usaría el ID como único argumento dentro de la función.
  • Si uso wp_dequeue_script() solo saco el archivo de cola pero se mantiene registrado.
  • Si uso wp_deregister_script() lo saco de la cola y queda fuera del registro a la vez o saco del registro a un archivo que ya estaba fuera de la cola.

En los dos últimos casos solo uso el ID.

Para aclara, aquí un ejemplo:

function brigzen_enqueue_styles() {
    wp_enqueue_style( 'fa-allcss', content_url() . '/fontawesome/css/all.css', array(), '1.0', 'all' );
    wp_enqueue_style( 'critical-fa-allcss', content_url() . '/fontawesome/css/all.css', array(), '1.0', 'all')
}
add_action( 'wp_enqueue_scripts', 'brigzen_enqueue_styles' );

Las funciones que contengan a estas funciones dentro deben luego se incorporadas por medio de add_action() a la función wp_enqueue_scripts() (en plural) como se ve en el ejemplo anterior, esto es así sea para estilos o scripts, no existe wp_enqueue_styles(). Esta función va a incorporar todo lo que pase por allí al gancho wp_head. Esa gancho siempre debe estar incorporado en el head del archivo html generalmente por medio del archivo header.php.

Leave a Comment