Cómo añadir CSS y jQuery en WordPress utilizando funciones

La manera más segura de añadir las hojas de estilo y los script en nuestro WordPress es utilizando las funciones wp_enqueue_style y wp_enqueue_script.

Añadiendo las hojas de estilo CSS con wp_enqueue_style

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Veamos la función en acción y luego explicaré cada parámetro por separado. Este código debe ir dentro de su archivo (previamente respaldado) functions.php.

LA FUNCIÓN EN USO

function dinvaders_theme_style() {
wp_enqueue_style(
 'mi_estilo',
 get_template_directory_uri() . '/css/miestilo.css',
 false,
 '1.2.5',
 'all');
}
add_action('wp_enqueue_scripts', 'dinvaders_theme_style');

Atención: La acción wp_enqueue_scripts no es lo mismo que la función wp_enqueue_script

LOS PARÁMETROS

$handle En este parámetro definiremos el nombre de la hoja de estilos. Por ejemplo 'mi_estilo', una string en minúsculas que puede contener guión bajo. Siempre tenemos que definir un nombre para nuestro .css ya que este parámetro es requerido.

$src El parámetro $src es opcional, y consiste en la URL de la hoja de estilos. Solamente es requerido si no ha sido declarado previamente, y WordPress no sabe de su existencia. Para utilizar la hoja de estilo por defecto de WordPress, style.css tendremos que utilizar la función get_stylesheet_uri().

Una buena práctica es emplear las funciones funciones plugins_url y get_template_directory_uri para los estilos locales.

$deps En este argumento informamos cuáles son las hojas de estilo que deberían ser cargadas antes que la nuestra, utilizando un array. Si el .css que estamos declarando no depende de ningún otro simplemente definimos como false.

$ver Especificaremos la versión del .css sólo cuando sea necesario ya que es un parámetro opcional. Un ejemplo de $ver sería: ’1.2.5′, una string. Especificar la versión del .css nos asegura que nuestros visitantes siempre cargarán la última hoja de estilos, sin importar el caché de su navegador.

$media Con este argumento especificamos los media-type para los cuales nuestra hoja de estilos ha sido definida. Algunos ejemplos son: ‘all’, ‘screen’, ‘print’. Por defecto será definida para todos los medios y dispositivos.

Añadiendo scripts con wp_enqueue_script

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Este código debe ir dentro de su archivo (previamente respaldado) functions.php. Cuatro de los argumentos funcionan del mismo modo que los parámetros de la función anterior.

Cabe destacar que muchos scripts jQuery ya vienen con WordPress y solamente necesitamos llamarlos por su handle y especificar la dependencia.

function dinvaders_script() {
wp_enqueue_script(
 'jquery',
 'json2',
 false);
}
add_action('wp_enqueue_scripts', 'dinvaders_script');

En este caso estamos llamando a jQuery, utilizaremos la librería cargada por WordPress y por eso estamos utilizando su handle, su dependencia y si será cargada en footer o header.

LOS PARÁMETROS

$handle En este parámetro definiremos el nombre del script.

  • Consultar la lista de scripts que vienen por defecto en WordPress

$src El parámetro $src es opcional, en caso de emplear los script que trae WP no es necesario especificar la URL.

$deps En este argumento informamos cuáles son las hojas de estilo que deberían ser cargadas antes que la nuestra, utilizando un array. Si el script no depende de ningún otro simplemente definimos como false. En el ejemplo marcamos a jquery dependiente de json2, ya que lo necesita para las llamadas a AJAX; es decir que cargará primero json2 y luego jquery. Si utilizáramos jquery-ui-accordion deberíamos especificar como $deps a jquery.
  • Consultar la lista de dependencias y sus paths

$ver Podemos definir este argumento como una string '2.3', como false (y en ese caso WordPress agregará automáticamente un número de versión igual a la versión de WP que usas) o como null (no se especificará versión).

$in_footer Si nuestros hook wp_head() y wp_footer() están colocados correctamente podemos elegir si el script se carga en uno o en el otro. En caso de definir $in_footer = true, se cargará el script antes de finalizar la etiqueta <body>. Si es false, dentro de la etiqueta <head>.

Modificado por última vez el día 24 de noviembre de 2012 a las 10:08
Scroll to top