wp_enqueue – Scripts y CSS en WordPress

Cuando desarrollamos páginas web, muchas veces se requieren de frameworks o llamadas  a ficheros externos que implementan las funciones necesarias para que nuestro código funcione debidamente. Generalmente éstos suelen ser javascripts y hojas de estilos. Para ello WordPress integra una función preparada para realizar este proceso mediante wp_enqueue.

En este código de ejemplo se cargan los scripts de Jquery desde las librerías CDN (Content Delivery Network) de Google y de Bootstrap cargamos tanto el script como su hoja CSS.

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>

<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

La forma guarra de añadir estos enlaces sería copiando estas lineas de código en alguna parte, como el encabezado o en algún lugar que nos interese ejecutarlos. Podemos enlazarlos desde un servidor remoto como el de Google, pero también podemos ejecutarlos desde un directorio en nuestro servidor.

De todas formas hay una manera mucho más limpia para hacer esto y  es utilizando las funciones propias de WordPress; wp_enqueue_script() y wp_enqueue_style().

Estas funciones se han de crear dentro de el archivo functions.php de nuestro Theme precedido de la ejecución add_action(). Hay que especificar el hook como ‘wp_enqueue_scripts’;  fijaos que sirve para las dos funciones ya sean script o style y como segundo atributo se introduce la función donde se declaran los wp_enqueues.

add_action( 'wp_enqueue_scripts', 'Theme_scripts' );

add_action('wp_enqueue_scripts', 'Theme_styles');

Al final habrá de quedarnos un código parecido al siguiente:

function Theme_scripts() {
if (!is_admin()) {  /* solo hace la carga si no estamos
 en el área de configuración de WordPress,
 o sea, para el usuario de la página*/
   wp_enqueue_script('jquery', get_template_directory_uri().'/js/jquery-1.11.0.js');
   wp_enqueue_script('bootstrap', get_template_directory_uri().'/js/bootstrap.js');
   wp_enqueue_style('bootstrap', get_template_directory_uri().'/css/bootstrap.css');
   }
}
add_action( 'wp_enqueue_scripts', 'Theme_scripts' );

Es muy posible; según la plantilla que estemos utilizando; que ya se carguen algunos scripts alojados en algunas de sus carpetas; usualmente en la carpeta js y css. Por lo que si creamos nuestra propia función es posible que sustituyamos las anteriores, así que lo recomendable es probar nuestros desarrollos sin haberlas añadido previamente. Seguramente las que deberemos definir sean las css, ya que muchas aplicaciones permiten customizar el diseño como JQuery ThemeRoller.

Lo bueno de crear tu propia función es que la versión de un tema anterior pueda quedar desactualizada u obsoleta, por lo que en algunos casos es recomendable revisar su funcionamiento para desarrollos posteriores. Seguramente no se dé el caso, pero es bueno saberlo.

Hay que tener en cuenta que WordPress ya viene con algunos frameworks de serie disponibles en sus dependencias y para terminar copio exactamente la misma lista que publican en su página oficial.

---