Crear una extensión con Ajax y JSON

1. Configurar la extensión

Cree una carpeta my-mails en la carpeta plugins, con un archivo my-mails.php.

Inserte el siguiente comentario de encabezado, que permite mostrar información sobre la extensión, en la administración:

<?php 
/* 
Plugin Name: My Mails 
Description: Recupera las direcciones de correo usando un formulario 
Version: 1.0 
License: GPLv2 
 
This program is free software; you can redistribute it and/or 
modify it under the terms of the GNU General Public License 
as published by the Free Software Foundation; either version 2 
of the License, or(at your option) any later version. 
 
This program is distributed in the hope that it will be useful, 
but WITHOUT ANY WARRANTY; without even the implied warranty of 
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
GNU General Public License for more details. 
 
You should have received a copy of the GNU General Public License 
along with this program; if not, write to the Free Software 
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  
02110-1301, USA. 
 
Copyright {ano} {mi_nombre}(email: {mi_email}) 
 
*/ 
?> 

Debe ver esto en la administración:

Página Plugins, vemos aparecer el widget My Mails

2. Construir la clase

Cree la clase My_Mails e inserte los diferentes métodos en el archivo my-mails.php:

<?php 
if(!class_exists("My_Mails")) { 
 class My_Mails{ 
 function my_mails_install(){ 
 
 } 
 function init(){ 
 
 } 
 function my_mails_admin_page(){ 
 
 } 
 function my_mails_admin_header(){ 
 
 } 
 function my_mails_front_header(){ 
 
 } 
 function my_mails_shortcode(){ 
 } 
 //... más otras funciones de consulta 
 
 } 
} ...

1. Crear el shortcode

El shortcode debe mostrar un formulario con el nombre, la dirección de correo electrónico y un botón para validar la información. Hay una etiqueta <div>, que tiene como id el valor respuesta. Esto le permite mostrar un mensaje en JavaScript en caso de éxito o error. Dentro de la etiqueta <div> hay una etiqueta <span>, que le permite mostrar en JavaScript una imagen GIF animada (loader), al cargar.

Crea el formulario en HTML. El método my_mails_shortcode() se convierte en:

function my_mails_shortcode(){ 
echo " 
  <div id=\"mymails\" class=\"widget\"> 
 
    <h1>Petición de información</h1> 
 
    <input type=\"text\" value=\"su nombre\" id=\"name\" /> 
    <input type=\"text\" value=\"indique su dirección de e-mail\" id=\"mail\" /> 
    <input type=\"submit\" value=\"registrarse\" id=\"registro\" /> 
 
    <div id=\"respuesta\"><span></span></div> 
 
  </div> 
"; 
} 

Añada la función que crea el shortcode fuera de la clase con los hooks de acción:

if(function_exists('add_shortcode')){ ...

1. WordPress y Ajax

En WordPress, las peticiones en Ajax requieren varios parámetros:

Para usar una cadena de seguridad, estos tres parámetros se deben definir al mismo tiempo que la llamada al archivo JavaScript, que contiene la consulta Ajax en el método my_mails_front_header(), porque la clave de seguridad se debe generar en PHP y luego pasarla al archivo JavaScript.

2. Transmitir variables PHP al archivo JavaScript

En el método my_mails_front_header(), use la función WordPress wp_localize_script() que permite pasar variables a un archivo JavaScript. 

<?php wp_localize_script($handle, $name, $data ); ?> 

Aquí está...

1. Los hooks de acción wp_ajax_(action) y wp_ajax_nopriv_(action)

Llame al método my_mails_ajax() con los hooks de acción wp_ajax_(action) y wp_ajax_nopriv_(action), donde action es el nombre de la acción, fuera de la clase.

wp_ajax_(action) se usa para los usuarios conectados y wp_ajax_nopriv_(action), para usuarios que no han iniciado sesión. Si la solicitud se debe realizar tanto para un usuario registrado como para un usuario no registrado, utilice los dos hooks.

En su caso, la acción se llama my_mails y se puede usar tanto para usuarios registrados como no registrados, por lo que los hooks se convierten en wp_ajax_my_mails y wp_ajax_nopriv_my_mails.

Este es el código que debe ubicar con el resto de hooks, fuera de la clase:

if(isset($_POST['action'])){ 
 add_action(‘wp_ajax_nopriv_my_mails', array($inst_mails, 
'my_mails_ajax' )); 
 add_action(‘wp_ajax_my_mails', array($inst_mails, 
'my_mails_ajax' )); 
} 

Ahora puede recuperar la información en el método my_mails_ajax().

2. Verificar la clave de seguridad

Primero verifique la clave de seguridad con la función de WordPress:

  <?php check_ajax_referer($action, $query_arg, $die)?> 

Esta función comprueba si la clave de seguridad es válida. Si es diferente, la función detiene la ejecución del código. Es necesario comprobar que esta función se coloca al inicio del método antes de las peticiones...

1. Añadir un método que lista las direcciones de correo electrónico

Para mostrar las direcciones de correo electrónico en la administración, comience creando un nuevo método getmailslist(), que hará una consulta SQL SELECT y devolverá la lista de direcciones de correo electrónico. Debe llamar a la consulta directamente, porque no hay entradas. De lo contrario, puede aparecer un mensaje de error, por lo que no es necesario utilizar el método prepare.

function getmailslist(){ 
 global $wpdb; 
 $table_mails= $wpdb->prefix.'mymails'; 
 
 $sql = "SELECT * FROM ".$table_mails; 
 $mailslist = $wpdb->get_results($sql); 
 
 return $mailslist; 
} 

2. Crear una tabla con todas las direcciones de correo electrónico

Seguidamente, en el archivo template.php, llame al método getmailslist() y verifique que la tabla no esté vacía; de lo contrario, muestre el mensaje: No hay nadie registrado.

Usando un bucle PHP foreach (), muestre los datos como una tabla, con columnas para id, nombre, dirección de correo electrónico y un botón Eliminar.

Agregue una imagen para que el botón Eliminar sea más estético y prevea un <div> con la clase loader, para mostrar una imagen de carga. También agregue un <div> con el ID respuesta, mostrando un mensaje durante la eliminación.

Agregue el identificador de cada columna como un identificador HTML al <div> que engloba cada fila. Esto facilita la recuperación de la información de cada suscriptor con jQuery.

Personalice su tabla en el archivo admin-mails.css para que sea más estética...

1. Crear un evento JavaScript en el botón de eliminación

Para eliminar direcciones de correo electrónico, cree un evento mousedown de JavaScript en el botón Eliminar, en el document ready del archivo admin-mails.js.

Recupere el identificador del campo correspondiente, que se pasa como un identificador al <div> padre del botón Eliminar, para cada fila.

Confirme la eliminación con la función confirm() de JavaScript.

Si la respuesta es sí, ejecute una solicitud Ajax que eliminará al suscriptor. Cree la función deleteAjaxMails () y pásele el identificador del campo para eliminar.

Código del archivo admin-mails.js: 
jQuery(document).ready(function(jQuery) { 
 jQuery("#code").click(function(){ 
 this.select(); 
 }); 
 
 jQuery("#lista textarea").click(function(){ 
 this.select(); 
 }); 
 
 jQuery('.delete').mousedown(function(){ 
 var id= jQuery(this).parent().attr('id'); 
 if(confirm("¿Quiere eliminar este mail?")) { 
 deleteAjaxMails(id); 
 } 
 }); 
 
}); 

2. Transmitir las variables al archivo JavaScript

Para transmitir variables al archivo JavaScript, modifique el método my_mails_admin_header() en el archivo my-mails.php.

Use la función wp_localize_script() y pásele la acción, la URL y la clave de seguridad, como cuando registra direcciones de correo electrónico.

Aquí está el código del método my_mails_admin_header():

function my_mails_admin_header(){ 
 wp_register_style(‘wp_css_mails', plugins_url('css/  
admin-mails.css', __FILE__) ); 
 wp_enqueue_style(‘wp_css_mails' ); 
 wp_enqueue_script('wp_js_mails', plugins_url('js/  
admin-mails.js', __FILE__), array('jquery')); 
 wp_localize_script('wp_js_mails', 'deletemymails', array( 
 'ajaxurl'=> admin_url('admin-ajax.php'), ...