Utilizar framework JavaScript en nuestro tema o plugin de WordPress
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).
Vemos la función:
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:
<?php
wp_enqueue_script('jquery');
wp_head();
?>
Con esto WordPress insertará una etiqueta <script> en la sección <head> de la página haciendo referencia a la librería jQuery.
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í:
<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:
<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:
<?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í:
<?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:
Muy acertada la explicación, fantástico!
Pero quería hacer una consulta, pues estoy preparando una web cuya los mismos usuarios puedan publicar posts, sin tener que ser usuarios registrados (es decir, cualquier persona anónima).
Es acertado utilizar la plataforma wordpress? Ya tengo conocimiento pero no sé si es factible, y además, cómo puedo hacerlo para abrir los permisos para todos los usuarios?
Intento evitar tener q programar la web desde 0 😉
Muchísimas gracias! vuestros artículos son muy explicativos
No creo que sea desacertado.. Es decir, si a ti se te da bien o conoces WordPress suficientemente como para tirarlo para adelante, pues adelante.
No le veo mucha complicación al asunto, simplemente tienes que mirarte las opciones del blog ya que me suena que hay una que indica que no hace falta estar registrado para postear. Si no es así (vamos, si me he inventado esa opción) siempre puedes cambiar un poco los permisos para conseguir esto. Si no puedes hacerlo desde el panel de control siempre puedes trastear la base de datos directamente.
Espero haber resuelto tu duda,
salu2
Hola muy buena pagina veo que conoces de Jquery te voy hacer una consulta es la siguiente
tengo este theme que usa jquery y en incluido un plugin llamado Featured Content Gallery el problema esta que me tiene conflicto con el plugin y no muestra el slider post
Luego descubri que al quitar esta linea de codigo del footer si muestra el slider post pero me deja de funcionar los menus ya que utlizan ese llamado del scritp
alguna solucion?
este es el theme
http://su-paginaweb.com/website/Polished2.zip
gracias de antemano