• Like
  • Save
Javascript y AJAX en Wordpress
Upcoming SlideShare
Loading in...5
×
 

Javascript y AJAX en Wordpress

on

  • 1,231 views

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

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

Statistics

Views

Total Views
1,231
Views on SlideShare
1,225
Embed Views
6

Actions

Likes
0
Downloads
16
Comments
0

2 Embeds 6

http://www.linkedin.com 3
https://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript y AJAX en Wordpress Javascript y AJAX en Wordpress Presentation Transcript

    • Javacript y Ajax en Wordpress Artvisual Formación 2012 sesión 5
    • Índice 1.Cargar JS 2.Localizar JS en Wordpress 3.jQuery Ajax 4.Ajax en Wordpress 5.Ejemplo 6.Ejemplo 7.Referencia
    • 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'); ?>
    • 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 });
    • 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 ...
    • 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();
    • 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' });
    • 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)
    • 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>';
    • 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 } });
    • 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(); }
    • 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); }); }
    • 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().
    • 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