Quizás os hayáis planteado añadir un poco de JavaScript a vuestro tema o plugin de Wordpress fácilmente gracias a algún framework como jQuery, Scriptacolous, Prototype… o quizás simplemente nos interese añadir nuestro propio fichero de JavaScript!
Al hacerlo olvidaros de hacer “echo ‘<script type=”text/javascript>…</script>;’“… pues como quizás ya sepáis, Wordpress incluye algunas de estas librerías y podrías hacerlas entrar en conflicto (debido a que algún plugin o vuestro tema ya utilicen alguna de estas librerías).
Wordpress tiene una función llamada “wp_enqueue_script” que se encargará de importar en la cabecera del blog el JavaScript que queramos. Ésta misma función se encargará de ordenar los scripts en la cabecera automáticamente y, en caso de ser un script creado por nosotros, deberemos indicar qué escripts van delante de éste (para hacer así un fichero de funciones externo para jQuery, por ejemplo).
1 | wp_enqueue_script( 'handle', 'src', 'deps', 'ver'); |
Y sus parámetros:
- handle: Nombre del script, en minúscula.
- src: (opcional) Ruta al script desde el directorio raíz de Wordpress. Ejemplo: ‘/wp-contents/themes/nombredeltema/lib/functions.js’. Este parámetro solo es requerido para los scripts que no están incluidos en wordpress. Por defecto está como false.
- deps: (opcional) array conteniendo los “handle” de los cuales este escript depende (es decir, aquellos escripts que deben ser cargados antes que el nuestro). Éste parámetro sólo lo utilizaremos para importar ficheros JavaScript desconocidos para Wordpress (nuestro fichero de funciones, por ejemplo). Falso por defecto.
- ver: (opcional) Cadena con la versión del script. Por defecto en falso.
Algunos de los “handle” que podéis utilizar son:
Podéis ver una lista completa en el Codex de Wordpress.
Dado que últimamente estoy trasteando con jQuery os mostraré un pequeño ejemplo de cómo importarlo en nuestro tema e importar nuestro fichero de funciones.
Primero de todo importemos jQuery en nuestro tema. Abramos el fichero “header.php” y antes de llamar a la función “wp_head();” llamemos a wp_enqueue_script:
1 2 3 | <?php wp_enqueue_script('jquery'); wp_head(); |
Con esto Wordpress insertará una etiqueta
Lo siguiente que haremos es importar nuestro código con las funciones que tengamos que utilicen jQuery, pero antes deberemos evitar posibles conflictos entre otros frameworks distribuidos con Wordpress como Prototype, SWFUpload… (los “hamdle” anteriormente mencionados).
Esto es porque, por ejemplo, Prototype y jQuery utilizan el mismo método de llamada, el dólar “$”. Debemos cambiar éste método en jQuery para que funcione correctamente el código, para ello utilizaremos el método nonConflict de jQuery, así:
1 2 3 | <script type='text/javascript'> $miMetodoDeLlamadaJquery = jQuery.noConflict(); </script> |
Evidentemente no es nada recomendable poner un método de llamada tan largo ;) Yo utilizaría $jQ:
1 2 3 4 5 6 7 | <script type='text/javascript'> $jQ = jQuery.noConflict(); $jQ(function(){ $jQ('div#search').hide(); } </script> |
Este pequeño ejemplo, insertado en nuestra cabecera del tema, ocultaría la capa con id=”search”.
Imaginemos que en lugar de estar insertado en la cabecera quisiéramos tener nuestro código en un fichero a parte, guardado en alguna carpeta del tema, o del plugin. Por supuesto, lo primero que haríamos es eliminar las etiquetas “script” de nuestro código, dado que será un fichero .js. Una vez guardado nuestro código en un fichero js y éste subido a alguna carpeta en el servidor (en principio en la carpeta del tema o plugin) lo importamos con wp_enqueue_script:
1 2 3 4 | <?php wp_enqueue_script('jquery'); wp_enqueue_script('misfunciones','/wp-content/themes/mitema/lib/functions.js',array('jquery')); wp_head(); |
Recordad que si estáis programando una extensión de jquery debéis pasar un array como tercer parámetro (deps) a la función indicando los ficheros de los que depende vuestra librería. Si hubierais programado una extensión de una extensión deberíais indicarlo así:
1 2 | <?php wp_enqueue_script('misfunciones','/wp-content/themes/mitema/lib/functions.js',array('jquery','extension-jquery')); |
Espero que os sirva, salud!
Páginas de referencia:
