03Feb 2012 3 Comments */?>

Como incluir scripts en ciertas páginas de WordPress

Categorías: JQuery, Tutoriales, Wordpress - Tags: ,

Cuando uno trabaja con templates de WordPress hay ocasiones en las que necesitamos incluir una hoja de estilo o un archivo de javascript. Para incluir dichos archivos de forma correcta WordPress nos brinda las herramientas necesarias que son:

Antes de explicar como incluir scripts o hojas de estilo en páginas concretas voy a explicar brevemente como se usan estas funciones para quien no las conozca.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
  • $handle Es el nombre de nuestro script (no necesariamente del archivo) . Este nombre es obligatorio pero no cobra mucho sentido si no usamos la función wp_register_style o si no hay scripts que dependen de este
  • $src es la dirección url de nuestro archivo
  • $deps son el archivo o archivos del cual depende nuestro script. Si nuestro script es de jQuery, depende de dicha librería. Por lo que pasaríamos un array con el $handle de jQuery como muestro en el ejemplo a continuación
  • $ver es la versión del archivo, pero es opcional
  • $infooter Si ponemos este valor a true los scripts se cargaran en el footer y no en el header

Podemos cargar un script entonces de la siguiente manera:

wp_enqueue_script( 'cufon-yui', get_bloginfo('stylesheet_directory').'/js/cufon-yui.js' , array('jquery') );

Para las hojas de estilo es prácticamente igual:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
  • $handle Es el nombre de nuestra hoja de estilo (no necesariamente del archivo) . Este nombre es obligatorio pero no cobra mucho sentido si no usamos la función wp_register_style
  • $src es la dirección url de nuestro archivo
  • $deps son el archivo o archivos del cual depende nuestra hoja de estilo.
  • $ver es la versión del archivo, pero es opcional
  • $media es el medio destinado como screen , print, etc

Ahora veamos como incluir un script o hoja de estilo en una sola página.

Si hemos creado un archivo de jQuery para un formulario que hemos echo nosotros , no queremos que dicho archivo se cargue en todas las páginas de wordpress ya que sería en vano.
Para cargarlo en un página en concreto sin embargo necesitaremos usar un action hook ya que de por si la función is_page() no funciona dentro de functions.php

Si nuestra página es por ejemplo http://www.masquewordpress.com/ayuda deberemos hacer lo siguiente:

function mqw_scripts_paginas(){
		if(is_page('ayuda')) wp_enqueue_script('forms',get_bloginfo('stylesheet_directory').'/js/forms.js',array('jquery'));
}
add_action('template_redirect','mqw_scripts_paginas');

Básicamente lo que hacemos es llamar a la función is_page una vez que los archivos del template han sido cargados para que así funcione correctamente.

Espero que les haya servido de ayuda. Saludos!!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus