Ahora se está más familiarizado con la creación de extensiones y la programación orientada a objetos. Continuamos con el uso del objeto wpdb, para crear una tabla en una base de datos y realizar consultas SQL.
En este caso se creará una clase con varios métodos que realizarán consultas SQL.
Para evitar sobrecargar la base de datos, se eliminará esta tabla durante la eliminación o desactivación de la extensión.
Se creará una extensión de Google Maps que permitirá mostrar un mapa en las páginas o artículos del sitio web, utilizando un shortcode. Se configurará este mapa usando dos parámetros indicados en la administración de contenidos: longitud y latitud. Esta información se guardará en la base de datos.
Estructura de archivos del plugin:
Contenido del código del archivo my-gmap.php:
<?php
/*
Plugin Name: My Gmap
Description: Crear mapas de Google Maps.
Version: 1.0
License: GPLv2
*/
if (!class_exists("My_Gmap")) {
class My_Gmap{
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 ,
`titulo` 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');
dbDelta($sql);
}
}
function gmap_uninstall(){
global $wpdb;
$table_site = $wpdb->prefix.'mygmap';
if($wpdb->get_var("SHOW TABLES LIKE '$table_site'") == $table_site){
$sql = "DROP TABLE `$table_site`";
$wpdb->query($sql);
}
}
function init(){
if (function_exists('add_options_page')){
$mapage=add_options_page("My Gmap", 'My Gmap', 'administrator', __FILE__, array($this,'gmap_admin_page'));
add_action('load-'.$mapage, array($this,'gmap_admin_js_css'));
}
}
function gmap_admin_page(){
$page= isset($_GET['p']) ? $_GET['p'] : null;
switch($page){
case 'map' :
require_once('template-map.php');
break;
default:
require_once('template.php');
break;
}
if(isset($_GET['action'])){
if($_GET['action']=='createmap'){
if((trim($_POST['Mg-title'])!='')&&(trim($_POST['Mg-latitud'])!='')&&(trim($_POST['Mg-longitud'])!='')){
$insertmap=$this->insertmap($_POST['Mg-title'],$_POST['Mg-latitud'],$_POST['Mg-longitud']);
if($insertmap==true) echo '<script> window.location = "'.get_bloginfo('url').'/wp-admin/options-general.php?page=my-gmap/my-gmap.php&map=ok'.'"; </script>';
else echo "Se ha producido un error";
}else{
echo '<p style="color:red;">Por favor, rellene los campos</p>';
}
}else if($_GET['action']=='updatemap'){
if((trim($_POST['Mg-title'])!='')&&(trim($_POST['Mg-latitud'])!='')&&(trim($_POST['Mg-longitud'])!='')&&(trim($_POST['Mg-id'])!='')){
$updatemap=$this->updatemap($_POST['Mg-id'],$_POST['Mg-title'],$_POST['Mg-latitud'],$_POST['Mg-longitud']);
if($updatemap==true) echo '<script> window.location = "'.get_bloginfo('url').'/wp-admin/options-general.php?page=my-gmap/my-gmap.php&p=map&id='.$_POST['Mg-id'].'&map=ok'.'"; </script>';
else echo "Se ha producido un error";
}else{
echo '<p style="color:red;">Por favor, rellene los campos</p>';
}
}else if($_GET['action']=='deletemap'){
if(trim($_POST['Mg-id'])!=''){
$deletemap=$this->deletemap($_POST['Mg-id']);
if($deletemap==true) echo '<script> window.location = "'.get_bloginfo('url').'/wp-admin/options-general.php?page=my-gmap/my-gmap.php&map=deleteok'.'"; </script>';
else echo "Se ha producido un error";
}
}
}
if(isset($_GET['map'])){
if($_GET['map']=='ok'){
echo "El mapa se ha guardado correctamente";
}else if($_GET['map']=='deleteok'){
echo "El mapa se ha eliminado correctamente";
}
}
}
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);
wp_enqueue_script('google_map_js','https://maps.googleapis.com/maps/api/js?key=AIzaSyAnxnxaEyIETWw9XpyDBNLVMKKwbur98L4&callback=initMap','','1.0',true);
}
function gmap_front_js_css(){
wp_enqueue_script('google_map_js','https://maps.googleapis.com/maps/api/js?key=AIzaSyAnxnxaEyIETWw9XpyDBNLVMKKwbur98L4&callback=initMap','','1.0',true);
}
function gmap_shortcode($att){
$maplist=$this->getmap($att['id']);
return '
<div id="map" style="width:400px;height:400px"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {lat: '.$maplist[0]->latitud.', lng: '.$maplist[0]->longitud.'},
zoom: 17
});
new google.maps.Marker({
position: {lat: '.$maplist[0]->latitud.', lng: '.$maplist[0]->longitud.'},
map,
title: "Hello World!",
});
}
</script>
';
}
function getmaplist(){
global $wpdb;
$table_map= $wpdb->prefix.'mygmap';
$sql = "SELECT * FROM ".$table_map;
$maplist = $wpdb->get_results($sql);
return $maplist;
}
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;
}
function insertmap($title,$lat,$long){
global $wpdb;
$table_map= $wpdb->prefix.'mygmap';
$sql=$wpdb->prepare(
"
INSERT INTO ".$table_map."
(titulo, latitud, longitud)
VALUES (%s,%s,%s )
",
$title,
$lat,
$long
);
$wpdb->query($sql);
if (!$sql) $insertmap = false;
else $insertmap = true;
return $insertmap;
}
function updatemap($id,$title,$lat,$long){
global $wpdb;
$table_map= $wpdb->prefix.'mygmap';
$sql=$wpdb->prepare(
"
UPDATE ".$table_map." SET
titulo=%s,
latitud=%s,
longitud=%s
WHERE id=%d
",
$title,
$lat,
$long,
$id
);
$wpdb->query($sql);
if (!$sql) $updatemap = false;
else $updatemap = true;
return $updatemap;
}
function deletemap($id){
global $wpdb;
$table_map= $wpdb->prefix.'mygmap';
$sql = $wpdb->prepare("DELETE FROM ".$table_map." WHERE id=%d LIMIT 1",$id);
$mapdelete = $wpdb->query($sql);
if (!$sql) $mapdelete = false;
else $mapdelete = true;
return $mapdelete;
}
}//fin de class
}//fin if class
if (class_exists("My_Gmap")){
$inst_map = new My_Gmap();
}
if (isset($inst_map)){
register_activation_hook(__FILE__, array($inst_map, 'gmap_install'));
add_action('admin_menu', array($inst_map, 'init'));
register_deactivation_hook(__FILE__, array($inst_map, 'gmap_uninstall'));
add_action('wp_enqueue_scripts', array($inst_map, 'gmap_front_js_css'));
if(function_exists('add_shortcode')){
add_shortcode('mygmap',array($inst_map, 'gmap_shortcode'));
}
}
?>
Contenido del archivo template.php:
<div class="wrap">
<h2>My Gmap</h2>
</div>
<div id="menumap">
<ul>
<li id="active">Crear un mapa</li>
<?php
$maplist=$this->getmaplist();
foreach($maplist as $getmap){
echo "<li><a href=\"?page=my-gmap/my-gmap.php&p=map&id=".$getmap->id."\">".$getmap->titulo."</a></li>";
}
?>
</ul>
</div><!--fin #menumap-->
<div id="contentmap">
<h3 class="title" >Cree un mapa:</h3>
<form action="?page=my-gmap/my-gmap.php&action=createmap" method="post"></p>
<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" /></p>
<p id="Mg-latitud-error" style="color:red;display:none;">Indique una latitud, por favor</p>
<p>Latitud* :<br /><input type="text" id="Mg-latitud" name="Mg-latitud" /></p>
<p id="Mg-longitud-error" style="color:red;display:none;">Indique una longitud, por favor</p>
<p>Longitud* :<br /><input type="text" id="Mg-longitud" name="Mg-longitud" /></p>
<p><input type="submit" class="button button-primary" id="bt-map" value="Guardar" /></p>
<small>* campos obligatorios</small>
</form>
</div><!--fin #contentmap-->
En el archivo de visualización del mapa se ha añadido la ventana de información al hacer click en el icono del marcador. Un objeto InfoWindow muestra contenido (por lo general, texto o imágenes) en una ventana emergente.
Contenido del archivo template-map.php:
<div class="wrap">
<h2>My Gmap</h2>
</div>
<div id="menumap">
<ul>
<li><a href="?page=my-gmap/my-gmap.php">Crear un mapa</a></li>
<?php
$maplist=$this->getmaplist();
foreach($maplist as $getmap){
if($_GET['id']==$getmap->id) $active=" id=\"active\" ";
else $active="";
echo "<li ".$active."><a href=\"?page=my-gmap/my-gmap.php&p=map&id=".$getmap->id."\">".$getmap->titulo."</a></li>";
}
?>
</ul>
</div><!--fin #menumap-->
<div id="contentmap2">
<?php $maplist=$this->getmap($_GET['id']); ?>
<h2 class="title" >Mapa: <?php echo $maplist[0]->titulo; ?></h2>
<div id="placecode">
Copie (ctrl+c) el código y péguelo (ctrl+v) en la página o artículo donde quiera que aparezca su mapa:
<input id="codemap" type="texte" value="[mygmap id="<?php echo $maplist[0]->id ?>" ]" readonly="readonly" />
</div>
<div class="left">
<h3 class="title" >Parámetros:</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 $maplist[0]->titulo; ?>" /></p>
<p id="Mg-latitud-error" style="color:red;display:none;">Indique una latitud, por favor</p>
<p>Latitud* :<br /><input type="text" id="Mg-latitud" name="Mg-latitud" value="<?php echo $maplist[0]->latitud ?>" /></p>
<p id="Mg-longitud-error" style="color:red;display:none;">Indique una longitud, por favor</p>
<p>Longitud* :<br /><input type="text" id="Mg-longitud" name="Mg-longitud" value="<?php echo $maplist[0]->longitud ?>" /></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="Actualizar" /></p>
<small>* campos obligatorios</small>
</form>
<form action="?page=my-gmap/my-gmap.php&action=deletemap" method="post">
<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 el mapa" /></p>
</form>
</div><!--fin .left-->
<div class="left">
<h3 class="title" >Vista previa:</h3>
<div id="map" style="width:400px;height:400px"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: <?php echo $maplist[0]->latitud ?>, lng: <?php echo $maplist[0]->longitud ?>},
zoom: 17
});
const contentString = '<div style="width:200px;height:auto;text-align:left;line-height:26px;padding:20px;padding: 4px;">Hola a <b>todos</b>.<br>Este es el punto seleccionado:<br><b><?php echo $maplist[0]->titulo; ?></b></div>';
const infowindow = new google.maps.InfoWindow({
content: contentString,
ariaLabel: "Uluru",
});
const marker = new google.maps.Marker({
position: {lat: <?php echo $maplist[0]->latitud ?>, lng: <?php echo $maplist[0]->longitud ?>},
map,
title: "Hello World!",
});
marker.addListener("click", () => {
infowindow.open({
anchor: marker,
map,
});
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
}
</script>
</div><!--fin .left-->
</div><!--fin #contentmap2-->
