Crear una extensión con PHP/MySQL

1. Crear la tabla

Para crear la tabla, el objeto wpdb es esencial para ejecutar la consulta SQL CREATE. Utilice la global $wpdb para esto. Compruebe que no existe una tabla con el mismo nombre, para evitar un posible conflicto. Para ello, utilice el método get_var() de la clase wpdb. También use el archivo upgrade.php y la función dbdelta, vistos en el capítulo WordPress y PHP.

Aquí está el código del método gmap_install(), que se usa para crear la tabla: 

function gmap_install(){ 
 global $wpdb; 
 $table_site = $wpdb->prefix.'mygmap'; 
 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 , 
 `título` TEXT NOT NULL, 
 `longitud` TEXT NOT NULL, 
 `latitud` TEXT NOT NULL 
 )ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci 
 ;"; 
 require_once(ABSPATH.'wp-admin/includes/upgrade.php'); ...

1. Añadir el submenú

Para agregar el submenú a la pestaña Ajustes, agregue la función add_options_pages() al método init(), como en el capítulo Crear una extensión sencilla en PHP, sección Crear una pestaña en el menú de administración.

function init(){ 
 if(function_exists('add_options_page')){ 
 add_options_page("My Gmap", 'My Gmap', 'administrator', __FILE__, 
array($this,'gmap_admin_page')); 
 } 
} 

__FILE__ es una constante mágica en PHP que devuelve la ruta completa y el nombre del archivo actual. También puede escribir el nombre del archivo directamente: 

function init(){ 
 if(function_exists('add_options_page')){ 
 add_options_page("My Gmap", 'My Gmap', 'administrator', 
'my-gmap.php', array($this,'gmap_admin_page')); 
 } 
} 

Añada el hook de acción admin_menu al exterior de la clase.

 add_action('admin_menu', array($inst_map, 'init')); 

A partir de este momento, el submenú aparece en el menú Ajustes.

Menú de la administración Ajustes, con el submenú My Gmap

add_options_page()...

1. Añadir los archivos

Para hacer el diseño más bonito, use un archivo CSS y para verificar los campos del formulario, use un archivo JavaScript.

Cree una carpeta css y otra js en la carpeta my-gmap. En la carpeta css, cree un archivo y dele el nombre admin-gmap.css. En la carpeta js, cree un archivo admin-gmap.js.

Llame a los archivos con las funciones de WordPress wp_register_style(), wp_enqueue_style() y wp_enqueue_script() en el método gmap_admin_js_css().

function gmap_admin_js_css(){ 
 wp_register_style('my_gmap_css', plugins_url('css/ 
admin-gmap.css', __FILE__)); 
 wp_enqueue_style('my_gmap_css'); 
 wp_enqueue_script('my_gmap_js', plugins_url('js/admin-gmap.js', 
__FILE__), array('jquery'),'1.0',true); 
} 

Para encontrar la ruta del plugin, use la función plugins_url() de WordPress. Dentro de una extensión, las funciones tienen como argumentos el nombre del archivo y la ruta del archivo (ver capítulo Personalizar el sitio con el archivo functions.php, sección Añadir hojas de estilo y scripts).

También puede crear una carpeta de imágenes, si desea recuperar imágenes en sus archivos. Esto es lo que aparece con el código CSS para el diseño:

Página Ajustes - My Gmap, para configurar la extensión con el archivo CSS

2. Llamar al hook de acción...

1. Recuperar y verificar las variables

Edite la función admin_gmap() y verifique que la URL contiene la variable action y que su valor es igual a createmap, con $_GET.

Si este es el caso, haga las verificaciones en PHP sobre las variables $_POST enviadas por el formulario. Muestre un error si uno de los valores $_POST está vacío; de lo contrario, haga la consulta SQL para guardar las variables en la base de datos.

El uso de la función trim() de PHP le permite eliminar espacios. Funciona de la misma manera que la función trim() en JavaScript.

function gmap_admin_page(){ 
 require_once('/template.php'); 
 if(isset($_GET['action'])){ 
 if($_GET['action']=='createmap'){ 
 if((trim($_POST['Mg-title'])!='')&&(trim($_POST['Mg-latitude'])! 
='')&&(trim($_POST['Mg-longitude'])!='')){ 
 
 //inserción en base 
 
 }else{ 
 echo '<p style="color:red;">Por favor, rellene todos los campos </p>'; 
 } 
 } 
} 
} 

2. Guardar...

1. Recuperar todos los mapas con una consulta SELECT

Para agregar los mapas al menú, obtenga los títulos de todos los mapas con una consulta SQL SELECT. Utilice el método get_results() del objeto wpdb.

Cree un nuevo método getmaplist() para recuperar la lista de mapas:

function getmaplist(){ 
 global $wpdb; 
 $table_map= $wpdb->prefix.'mygmap'; 
 
 $sql = "SELECT * FROM ".$table_map; 
 $maplist = $wpdb->get_results($sql); 
 
 return $maplist; 
} 

2. Crear el menú con un bucle

Modifique template.php y recupere esta lista llamando al método getmaplist(). Agregue el menú como una lista HTML con viñetas usando un bucle PHP foreach():

<div id="menumap"> 
  <ul> 
      <li id="active">crear un mapa</li> 
<?php 
 ...

1. Implementar una segunda plantilla

Cree un segundo archivo PHP en la carpeta my-gmap. Llámelo template-map.php. Este archivo mostrará la página de cada mapa.

Para llamar al archivo, modifique el método gmap_admin_page().

Al crear un mapa, debe mostrar template.php y cuando desee modificar un mapa, debe mostrar el archivo template-map.php. Para hacer esto, use la función PHP switch(), recuperando la variable p que se pasa en la URL: $_GET[’p’].

Modifique el código del método gmap_admin_page(). Sustituya:

require_once('template.php') 

por:

$page= isset($_GET['p']) ? $_GET['p']: null; 
 
switch($page){ 
 
  case 'map': 
      require_once('template-map.php'); 
  break; 
 
  default: 
      require_once('template.php'); 
  break; 
 
} 

Esto hace posible mostrar la plantilla correcta según el valor del parámetro p, que se pasa en la URL.

Puede usar una condición simple if/else en lugar de un switch(), pero para un mayor número mayor de páginas, una función PHP switch() es más adecuada.

1. Recuperar el identificador del mapa con una consulta SELECT

Obtenga el valor del identificador en la URL con la variable PHP $_GET [’id’]. Cree un nuevo método que contenga una consulta SQL SELECT, con el argumento $id.

function getmap($id){ 
 global $wpdb; 
 $table_map= $wpdb->prefix.'mygmap'; 
 
 $sql = $wpdb->prepare("SELECT * FROM ".$table_map." WHERE id=%d 
LIMIT 1",$id); 
 $map = $wpdb->get_results($sql); 
 
 return $map; 
} 

Utilice el método en el archivo template-map.php para recuperar la información en el mapa.

2. Añadir el código JavaScript de la API Google Maps

Para obtener una vista previa del mapa, siga las instrucciones de la documentación de Google Maps. Debe utilizar dos códigos JavaScript: el primero es un enlace que llama a la API de Google Maps. Se debe colocar antes de la etiqueta HTML de cierre </body>. El segundo código JavaScript se utiliza para visualizar el mapa y configurarlo. Se debe insertar donde deba aparecer el mapa.

También se debe registrar...

1. Crear el formulario para la actualización de los mapas

Cree el formulario de edición de mapas. Es comparable al formulario de creación de mapas.

Para identificar la actualización, durante la validación del formulario se necesita una acción que redirija a la página de la extensión con un argumento en la URL. Durante la creación de mapas, el parámetro action que se pasa en la URL, tenía el valor createmap; aquí asígnele el valor updatemap.

<form action="?page=my-gmap/my-gmap.php&action=updatemap" 
method="post"> 

Asigne los valores de longitud y latitud a los campos input correspondientes.

<input type="text" id="Mg-longitude" name="Mg-longitude"  
value="<?php echo $maplist[0]->longitud ?>" /> 

<input type="text" id="Mg-latitude" name="Mg-latitude"  
value="<?php echo $maplist[0]->latitud ?>" /> 

A continuación, cree un input hidden (invisible) cuyo valor sea el identificador del mapa. Esto permitirá identificar el mapa en la base de datos.

<input type="hidden" name="Mg-id" value="<?php echo  
$maplist[0]->id ?>" /> 

Este es el código completo:

<h3 class="title" >argumentos:</h3> 
<form action="?page=my-gmap/my-gmap.php&action=updatemap"  
method="post"> 
 
 <p id="Mg-title-error" style="color:red;display:none;">Indique un 
título, por favor</p> 
 <p>Título*:<br /><input type="text" id="Mg-title" name=  
"Mg-title" value="<?php echo...

1. Crear un botón para eliminar el mapa

Comience creando un formulario con una acción deletemap, luego un botón HTML submit en el archivo template-map.php. También cree un campo input hidden con el identificador, lo que le permite conocer el mapa a borrar. 

<form action="?page=my-gmap/my-gmap.php&action=deletemap"method="post"> 
  <p> 
      <input type="hidden" name="Mg-id" value="<?php echo $maplist[0]->id ?>" /> 
  </p> 
  <p> 
      <input type="submit" class="button button-primary" id="bt-map"  
value="Eliminar mapa" /> 
  </p> 
</form> 

Página Ajustes - My Gmap, pestaña Mapa de París, con el botón Eliminar mapa

2. Recuperar y verificar las variables

Haga las comprobaciones en el método gmap_admin_page(), añadiendo una condición a $_GET[’action’].

[...] 
}else if($_GET['action']=='deletemap'){ 
 if(trim($_POST['Mg-id'])!=''){ 
 
 //consulta delete 
 
 } 
} 

3. Eliminar el mapa con una consulta DELETE

Cree un nuevo método que permita...

1. Añadir la llamada JavaScript a la API Google Maps

Para mostrar un mapa, llame al archivo JavaScript de la API Google Maps en el método gmap_front_js_css (), para agregarlo antes de la etiqueta HTML de cierre </body>, no olvide insertar su clave de API Google:

function gmap_front_js_css(){ 
wp_enqueue_script('google_map_js','https://maps.googleapis.com/ 
maps/api/js?key=YOUR_API_KEY&callback=initMap','','1.0',true); 
} 

Después, añada el hook de acción wp_enqueue_scripts para llamar al archivo: 

add_action('wp_enqueue_scripts', array($inst_map, 
'gmap_front_js_css')); 

2. Crear shortcodes para cada mapa

Cree shortcodes pasándoles parámetros (consulte el capítulo WordPress y PHP, sección Los shortcodes). Pase el identificador en la función del shortcode. El resultado del shortcode se debería ver así:

[mygmap id = "id_del_mapa"] 

Agregue la función que crea el shortcode fuera de la clase, con los hooks de acción: 

if (function_exists ('add_shortcode')) { 
  add_shortcode ('mygmap', array ($ inst_map, 'gmap_shortcode')); 
} 

Cree el método gmap_shortcode(), use $att como argumento, luego recupere el identificador de esta manera:...