Crear un plugin con Ajax y JSON en WordPress

20/03/2023


Consiste en un plugin para recoger los datos de un formulario con un shortcode. El formulario está del lado del usuario y la visualización de los datos del lado del administrador.

Se guarda la información con una consulta SQL La información está en un array JSON que se transmite mediante una consulta AJAX. Esto significa que no hay una recarga de la página después de hacer click en el botón enviar.

<?php
/*
Plugin Name: My Mails 
Description: Formulario para guardar datos de email.
Version: 1.0
License: GPLv2
*/
if (!class_exists("My_Mails")) {    
	class My_Mails{
		
		function my_mails_install(){  
		  
			global $wpdb; 

			$table_site = $wpdb->prefix.'mymails';

			if($wpdb->get_var("SHOW TABLES LIKE '$table_site'")!= $table_site){

				$sql="CREATE TABLE `$table_site`(
				`id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY , 
				`nom` TEXT NOT NULL,
				`mail` TEXT NOT NULL          
				)ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci
				;";
				require_once(ABSPATH.'wp-admin/includes/upgrade.php');
				dbDelta($sql);

			}
		  
		}  
		function init(){

			if (function_exists('add_options_page')){ 

				$mapage=add_options_page("My Mails", 'My Mails', 'administrator', 'my-mails.php', array($this,'my_mails_admin_page'));

				add_action('admin_head-'.$mapage, array($this,'my_mails_admin_header')); 

			}
		  
		}
		function my_mails_admin_page(){ 

			require_once('template.php');

		}
		function my_mails_ajax(){
      
			check_ajax_referer('my_mails_nonce', 'nonce');
				   
			$verif=$this->verifmails($_POST['mail']);
					   
			if($verif[0]->mail==''){
				   
				$insertmails=$this->insertmails($_POST['name'],$_POST['mail']);
				if($insertmails==true){
					$msg='Su solicitud se ha guardado correctamente';
					}else{
					$msg="se ha producido un problema, vuelva a realizar su solicitud";
				}
			}else{
				$msg="Usted ya está inscrito";
			}             
			  
			echo json_encode($msg);
		  
			exit;  
		}
		function my_mails_ajax_delete(){
      
			check_ajax_referer('delete_my_mails_nonce', 'nonce'); 

			$delete=$this->deletemails($_POST['id']);

			if($delete==true){ 
			$msg='Esta dirección de correo se ha eliminado correctamente';
			}else{ 
			$msg="Se ha producido un error, vuelva a realizar su solicitud"; 
			}

			echo json_encode($msg);

			exit;  
		}
		function my_mails_admin_header(){		// ADMIN
      
            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'),
				'action'	=> 'delete_my_mails',
				'nonce'		=> wp_create_nonce('delete_my_mails_nonce')
			));  
        
		}
		function my_mails_front_header(){		// FRONT
      
            wp_register_style( 'wp_css_mails', plugins_url('css/front-mails.css', __FILE__) );
            
            wp_enqueue_style( 'wp_css_mails' ); 
              
            wp_enqueue_script('wp_js_mails', plugins_url('js/front-mails.js', __FILE__), array('jquery')); 
            
            wp_localize_script('wp_js_mails', 'mymails', array(
    				'ajaxurl'  => admin_url('admin-ajax.php'),
    				'action'	=> 'my_mails',
    				'nonce'		=> wp_create_nonce('my_mails_nonce')
    				));   
                      
		}
		function my_mails_shortcode(){
			return "<div id=\"mymails\"><h1>Solicitud de información</h1>
			<input type=\"text\" value=\"Nombre\" id=\"name\">
			<input type=\"text\" value=\"Email\" id=\"mail\">
			<input type=\"submit\" value=\"Enviar\" id=\"inscrire\">
			<div id=\"reponse\"><span></span></div>
			</div>";
		}
		function getmailslist(){ 
      
			global $wpdb;  
			
			$table_mails= $wpdb->prefix.'mymails';         
			$sql = "SELECT * FROM ".$table_mails;  
			$mailslist = $wpdb->get_results($sql);     
							
			return $mailslist;
             
		}
		function verifmails($mail){ 
      
			global $wpdb;  
			
			$table_mails= $wpdb->prefix.'mymails';         
			$sql = $wpdb->prepare("SELECT mail FROM ".$table_mails." WHERE mail=%s",$mail);  
			$mail = $wpdb->get_results($sql);     
							
			return $mail; 
      
		}
		function insertmails($name,$mail){
      
			global $wpdb;  

			$table_mails= $wpdb->prefix.'mymails';         
			$sql=$wpdb->prepare( 
				"
				INSERT INTO ".$table_mails."
				(nom, mail)
				VALUES (%s,%s )
				", 
				$name,
				$mail               	
			);
			$wpdb->query($sql);
        
        
			if (!$sql) $insertmap = false;
				else $insertmap = true;
        
			return $insertmap;
      
		}
		function deletemails($id){
      
            global $wpdb; 
              
            $table_mails= $wpdb->prefix.'mymails';   
            $sql = $wpdb->prepare("DELETE FROM ".$table_mails." WHERE id=%d LIMIT 1",$id);               
            $maildelete = $wpdb->query($sql); 
                                 
            if (!$sql) $maildelete = false;
				else $maildelete = true;
              
			return $maildelete;  
      
		}
      
	}//fin de class
}//fin if class

if (class_exists("My_Mails")){  
    $inst_mails = new My_Mails();      
} 

if (isset($inst_mails)){

    register_activation_hook(__FILE__, array($inst_mails, 'my_mails_install'));
    add_action('admin_menu', array($inst_mails, 'init'));     
    add_action('wp_head', array($inst_mails, 'my_mails_front_header')); 
    
    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' ));
      add_action( 'wp_ajax_delete_my_mails', array($inst_mails, 'my_mails_ajax_delete' ));     
    } 
            
    if(function_exists('add_shortcode')){  
      add_shortcode('mymails', array($inst_mails, 'my_mails_shortcode'));
    } 
}
?>


Aquí comprobamos los datos que se envían en las variables después de hacer click en Enviar.

Teniendo en cuenta el código de la función my_mails_front_header():

function my_mails_front_header(){       // FRONT
       
            wp_register_style( 'wp_css_mails', plugins_url('css/front-mails.css', __FILE__) );
             
            wp_enqueue_style( 'wp_css_mails' ); 
               
            wp_enqueue_script('wp_js_mails', plugins_url('js/front-mails.js', __FILE__), array('jquery')); 
             
            wp_localize_script('wp_js_mails', 'mymails', array(
                    'ajaxurl'  => admin_url('admin-ajax.php'),
                    'action'    => 'my_mails',
                    'nonce'     => wp_create_nonce('my_mails_nonce')
                    ));   
                       
        }


Comprobamos también el valor del objeto mymails en la consola:

Aquí se muestra el código jQuery para ejecutar ajaxMail() después de enviar los datos o hacer click en el botón Enviar:


Puedes descargar el archivo del plugin con todos los archivos y el código completo para funcionar en tu web:

Descarga archivo-plugin.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.