Cómo hacer llamadas AJAX correctamente en Wordpress y cómo llamar tus ficheros javascript en el template con ejemplos. Dentro de las sesiones de formación de Artvisual del 2012

1. Javacript y Ajax en Wordpress
Artvisual Formación 2012
sesión 5

2. Índice
1.Cargar JS
2.Localizar JS en Wordpress
3.jQuery Ajax
4.Ajax en Wordpress
5.Ejemplo
6.Ejemplo
7.Referencia

3. 1. Cargar JS en Wordpress
wp_enqueue_script( $handle, $src ,$deps ,$ver,$in_footer );
http://codex.wordpress.
org/Function_Reference/wp_enqueue_script
En el functions.php de vuestro template
<?php
function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.
min.js');
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'mi_js', ' .... ', array ( 'jquery') )
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

4. 1. Cargar JS en Wordpress
jQuery noConflict wrappers
In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used. For
example:
$(document).ready(function(){
$(#somefunction) ...
});
Becomes:
jQuery(document).ready(function(){
jQuery(#somefunction) ...
});
In order to use the default jQuery shortcut of $, you can use the following wrapper
around your code:
jQuery(document).ready(function($) {
// $() will work as an alias for jQuery() inside of this function
});

5. 1. Cargar JS en Wordpress
Default scripts included with WordPress
http://codex.wordpress.
org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress
wp_enqueue_script ( 'handle' );
jquery
jquery-form
jquery-color
jquery-ui-core (Att.: This is not the whole core incl. all core plugins. Just the base core.)
jquery-ui-widget
jquery-ui-accordion
jquery-ui-tabs
thickbox
...

6. 2. Localizar JS en Wordpress
<?php wp_localize_script( $handle, $object_name, $l10n ); ?>
http://codex.wordpress.org/Function_Reference/wp_localize_script
Carga contenido dinámico (variables, traducciones, ...) en tu JS.
En el functions.php:
$obj_config = array(
'url' => site_url(),
'ajaxurl' => get_bloginfo('wpurl') . '/wp-admin/admin-ajax.php',
);
wp_enqueue_script('mi-js', TPL_JS.'js.js', array('jquery'));
wp_localize_script('mi-js', 'config', $obj_config);
Dentro del JS:
jQuery(document).ready(function($) {
alert(config.url); // Mostrará site_url();

7. 3. jQuery Ajax
Ajax, acrónimo de Asynchronous JavaScript And XML
http://api.jquery.com/jQuery.ajax/
Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios
mientras se mantiene la comunicación asíncrona con el servidor en segundo plano
var data = {
action: 'insert_google_data'
};
jQuery.ajax({
type: 'POST',
url: config_source.ajaxurl,
data: data,
success: function(response) {
//alert('Got this from the server: ' + response);
$message_area.slideDown('slow');
},
dataType: 'json'
});

8. 4. Ajax en Wordpress
http://codex.wordpress.org/AJAX_in_Plugins
1. Se crear el markup/HTML
2. Se crea el JS que llamará al AJAX
3. Se crear la parte de servidor (el PHP)

9. 4.1 HTML
En el HTML se añade los elementos que harán la llama al
JS/jQuery (botones, selects, ...)
if (! $has_description)
echo '<div id="lazy_description" post-id="'. $post-
>ID.'"></div>';

10. 4.2 JS
Creamos una llamada a jQuery.ajax (.post, .get, .load).
Pasamos como parámetro la acción, url de destino admin_url
('admin-ajax.php') y los datos que necesitemos
$.ajax({
url: ajaxurl, // http://opiname.es/wp-admin/admin-ajax.php
type: "post",
data: {
action: 'nombre_de_la_accion',
nombre_de_paramtro: valor,
...
},
success: function( data ) {
// Modificar el HTML con la respuesta
}
});

11. 4.3 Server Side (PHP)
En el functions.php o en tu plugin:
1. Creas las acciones que van a llamar a la función.
add_action('wp_ajax_nombre_de_la_accion', 'nombre_de_la_funcion');
add_action('wp_ajax_nopriv_ nombre_de_la_accion ', '
nombre_de_la_funcion ');
2. Crear la función PHP que recibirá los parámetros por post
(importante que acabe en die())
function nombre_de_la_funcion () {
// Los datos vienen por $_POST
...
die();
}

12. 5. Ejemplo
En sidebar.php
<div id="ajax-sidebar"></div>
En el functions PHP.
/* Lazy Sidebar Loading */
add_action('wp_ajax_lazy_sidebar_action', 'lazy_sidebar');
add_action('wp_ajax_nopriv_lazy_sidebar_action', 'lazy_sidebar');
function lazy_sidebar() {
dynamic_sidebar('General');
die(); // this is required to return a proper result
}
En el js.js
if ( $("#ajax-sidebar").size() > 0 ) {
$.post(ajaxurl, {action: 'lazy_sidebar_action'}, function(response) {
$("#ajax-sidebar").html(response);
});
}

13. 6. Ejercicio
Cargar por ajax el título del post en el que estéis.
Pasos:
1. Crear una caja (div) en el single.php donde cargaréis el título del post en que estáis por ajax. Cread
un botón (un enlace) al que clicaréis para que se cargue la respuesta.
2. Cread el jQuery que llamará al AJAX. Tendréis que usar el jquery click http://api.jquery.com/click/ y
dentro de éste hacer la llamada al ajax (ajax, post, get) http://api.jquery.com/jQuery.post/. Este Ajax
cargará en vuestra caja la respuesta.
3. Cread la función (y sus correspondientes acciones) que retornarán el nombre del post. Tened en
cuenta que necesitaréis como parámetro en ID del post en el que estáis. Usad la función http:
//codex.wordpress.org/Function_Reference/get_the_title y recordad el die().

14. 7. Referencia
● Codex - Ajax en Wordpress http://codex.wordpress.org/AJAX_in_Plugins
● Codex - wp_enqueue_script http://codex.wordpress.
org/Function_Reference/wp_enqueue_script
● Codex - wp_localize_script http://codex.wordpress.
org/Function_Reference/wp_localize_script
● http://wp.smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress/
● Use wp_localize_script() to declare javascript global variables http://www.garyc40.
com/2010/03/5-tips-for-using-ajax-in-wordpress/#js-global