24 enero 2010 0 Comments

Integrar jquery con wordpress

WordPress permite gracias a su api usar códigos de jquery, con esta libreria de javascript permitirás establecer una nueva forma de funcionamiento de las páginas web. Para usar jquery tendremos que invocar su código contenido en un archivo .js gracias a una serie de funciones que wordpress nos proporciona.


Para poder invocar el directorio del plugin, podemos usar el siguiente snnipet de wordpress:

$root_codigo = trailingslashit( WP_PLUGIN_URL.'/'. dirname( plugin_basename(__FILE__) ));

Ahora que ya tenemos establecida la url de la base donde se mantendrán distintos códigos, (como el .js con el jquery), podemos decir a wordpress que incluya susodicho código entre sus códigos:

function codigo() {
wp_enqueue_script('jquery');
wp_enqueue_script('un_nombre_script', $root_codigo.'/codigojquery.js', array('jquery'));
//Linea de código para pasar parametros al jquery
wp_localize_script('un_nombre_script', 'clase', array('algun_parametro' => 'valor'));
}
add_action('wp_print_scripts', 'codigo');

Usamos wp_localize_script para pasar los parámetros a la función jquery, en este caso la ruta del plugin, si quisieramos acceder en el jquery a dicho parámetro podemos usar la clase que enviamos asi: clase.algun_parametro.

Por último, un ejemplo de la estructura que podria tener codigojquery.js:

$(document).ready(function())
{
     $("a").click(function()
     {
          alert("Gracias por tu visita!");
     });
});

Por último, aquí un video de introducción sobre jquery:

Artículos relacionados:

  1. Añadir codigos al header en wordpress A menudo querremos integrar dentro de la estructura distintos códigos...

Leave a Reply