Créer une extension avec PHP/MySQL

1. Créer la table

Pour créer la table, l’objet wpdb est indispensable pour exécuter la requête SQL CREATE. Utilisez pour cela la globale $wpdb. Vérifiez qu’il n’existe pas une table du même nom, afin d’éviter un éventuel conflit, grâce à la méthode get_var() de la classe wpdb. Servez-vous également du fichier upgrade.php et de la fonction dbdelta (voir chapitre WordPress et les extensions - WordPress et php - Les classes de WordPress).

Voici le code de la méthode gmap_install(), qui sert à créer la table :

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 ,   
 `titre` TEXT NOT NULL,  
 `longitude` TEXT NOT NULL,   
 `latitude` TEXT NOT NULL   
 )ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci  
 ;";  
 require_once(ABSPATH.'wp-admin/includes/upgrade.php');  ...

1. Ajouter le sous-menu

Pour ajouter le sous-menu à l’onglet Réglages, ajoutez la fonction add_options_pages() à la méthode init().

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

__FILE__ est une constante magique en PHP renvoyant le chemin complet et le nom du fichier courant. Vous pouvez aussi écrire le nom du fichier directement :

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

Ajoutez le hook d’action admin_menu à l’extérieur de la classe.

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

Le sous-menu apparaît désormais dans le menu Réglages.

Menu de l’administration Réglages, avec le sous-menu My Gmap

add_options_page() fait appel à la méthode gmap_admin_page() qui contient le code HTML à afficher sur la page.

Pour optimiser le code...

1. Ajouter les fichiers

Pour rendre la mise en page plus jolie, utilisez un fichier CSS, et pour vérifier les champs du formulaire, utilisez un fichier JavaScript.

Créez un dossier css et un dossier js dans le dossier my-gmap. Dans le dossier css, créez un fichier et nommez-le admin-gmap.css. Dans le dossier js, créez un fichier admin-gmap.js.

Nommez les fichiers avec les fonctions WordPress wp_register_style(), wp_enqueue_style() et wp_enqueue_script() dans la méthode 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);  
} 

Pour trouver le chemin du plugin, utilisez la fonction WordPress plugins_url(). À l’intérieur d’une extension, les fonctions ont pour arguments le nom du fichier et le chemin du fichier.

Vous pouvez également créer un dossier images, si vous voulez appeler des images dans vos fichiers. Voici ce que cela rend avec le code CSS pour la mise en page :

Page Réglages - My Gmap, pour configurer l’extension, avec le fichier CSS

2. Faire appel au hook d’action load-(page)

Pour que la méthode d’ajout des fichiers CSS et JavaScript soit prise en compte, il est nécessaire de lier cette méthode au core de WordPress avec un hook d’action, en dehors...

1. Récupérer et vérifier les variables

Modifiez la fonction admin_gmap() et vérifiez que l’URL contient la variable action et que sa valeur est égale à createmap, avec $_GET.

Si c’est le cas, faites les vérifications en PHP sur les variables $_POST envoyées par le formulaire. Affichez une erreur si une des valeurs $_POST est vide, sinon faites la requête SQL pour enregistrer les variables en base de données.

L’utilisation de la fonction PHP trim() permet de supprimer les espaces, elle fonctionne de la même façon que la fonction 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'])!='')){  
  
 //insertion en base  
  ...

1. Récupérer toutes les cartes avec une requête SELECT

Pour ajouter les cartes au menu, récupérez les titres de toutes les cartes avec une requête SQL SELECT. Utilisez la méthode get_results() de l’objet wpdb.

Créez une nouvelle méthode getmaplist(), pour récupérer la liste des cartes :

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

2. Créer le menu avec une boucle

Modifiez template.php et récupérez cette liste en appelant la méthode...

1. Mettre en place un second template

Créez un second fichier PHP dans le dossier my-gmap, nommez-le template-map.php. Ce fichier permettra d’afficher la page de chaque carte.

Pour appeler le fichier, modifiez la méthode gmap_admin_page().

Lors de la création d’une carte, le fichier à afficher est template.php et lors de la modification d’une carte, le fichier à afficher est template-map.php. Pour ce faire, utilisez la fonction PHP switch() en récupérant la variable p passée dans l’URL : $_GET[’p’].

Modifiez le code de la méthode gmap_admin_page(). Remplacez :

require_once('template.php') 

par :

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

Cela permet d’afficher le template approprié en fonction de la valeur du paramètre p passé dans l’URL.

Vous pouvez très bien utiliser une simple condition if/else...

1. Récupérer l’id de la carte avec une requête SELECT

Récupérez la valeur de l’id dans l’URL avec la variable PHP $_GET[’id’]. Créez une nouvelle méthode contenant une requête SQL SELECT, avec pour argument $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;   
} 

Utilisez la méthode dans le fichier template-map.php pour récupérer les informations sur la carte.

2. Ajouter le code JavaScript de l’API Google Maps

Pour afficher un aperçu de la carte, suivez les instructions fournies dans la documentation Google Maps. Vous devrez utiliser deux codes JavaScript : le premier est un lien qui fait appel à l’API Google Maps, il doit être placé avant la balise...

1. Créer le formulaire pour la mise à jour des cartes

Créez le formulaire de modification de cartes. Il est comparable au formulaire de création de cartes.

Pour identifier la mise à jour, il faut, lors de la validation du formulaire, une action qui redirige vers la page de l’extension avec un paramètre dans l’URL. Lors de la création de cartes, le paramètre action passé dans l’URL avait pour valeur createmap ; ici donnez-lui la valeur updatemap.

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

Attribuez les valeurs de longitude et de latitude aux champs input correspondants.

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

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

Créez ensuite un input hidden (invisible) avec comme valeur l’id de la carte, cela permettra d’identifier la carte dans la base de données.

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

Voici le code complet :

<h3 class="title" >paramètres :</h3>  
<form action="?page=my-gmap/my-gmap.php&action=updatemap"  
method="post">  
  
 <p id="Mg-title-error" style="color:red;display:none;">Entrez un 
titre, svp</p>   
 <p>Titre* :<br /><input type="text" id="Mg-title" name=  
"Mg-title" value="<?php echo $maplist[0]->titre; ?>" /></p>  
  
 <p id="Mg-latitude-error"...

1. Créer un bouton pour supprimer la carte

Commencez par créer un formulaire avec pour action deletemap, puis un bouton HTML submit dans le fichier template-map.php. Créez également un champ input hidden avec l’id, cela permet de connaître la carte à supprimer. 

<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="supprimer la carte" />  
  </p>   
</form> 

Page Réglages - My Gmap, onglet Carte de Paris, avec le bouton supprimer la carte

2. Récupérer et vérifier les variables

Effectuez les vérifications dans la méthode gmap_admin_page() en ajoutant une condition à $_GET[’action’].

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

1. Ajouter l’appel JavaScript à l’API Google Maps

Pour afficher une carte, appelez le fichier JavaScript de l’API Google Maps dans la méthode gmap_front_js_css(), pour l’ajouter avant la balise HTML de fermeture </body>, n’oubliez pas d’insérer votre clé d’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);   
} 

Puis, ajoutez le hook d’action wp_enqueue_scripts pour appeler le fichier :

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

2. Créer des codes courts pour chaque carte

Créez des codes courts en leur passant des paramètres. Passez l’id dans la fonction du code court. Le résultat du code court doit être de cette forme :

[mygmap id="id_de_la_carte" ] 

Ajoutez la fonction créant le code court en dehors de la classe, avec les hooks d’action :

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

Créez la méthode gmap_shortcode(), utilisez $att comme argument...