Initiation aux développement de plugin WordPress, inclus 3 tutoriels: TP1: Hello World. TP2: Compteur de visites. TP3: Création du bouton « j’aime » de Facebook

1. Atelier de Création d’extensions WordPress
Par Samir IZZA
samirmember@gmail.com

2.  TP1: Hello World
 TP2: Compteur de visites
 TP3: Création du bouton « j’aime » de
Facebook

3.  Choisir un nom unique pour votre
extensions.
 Les fichiers de l’extensions sont dans le
répertoire wp-content/plugins/ de
Wordpress.
 Encodez toujours vos fichiers en UTF-8
 Testez toujours l’extension avec la
dernière version de WordPress.

4.  Toute extension doit avoir un header de la
forme suivante:
<?php
/*
Plugin Name: Nom de l’extension
Plugin URI: http://lien_pour_la_description
Description: Une brève description de l’extension
Version: 1.0
Author: Nom de l’auteur
Author URI: http://lien_de_l_auteur_de_l_extension
License: Nom de la license, ex. GPL2
*/
?>

6.  Créez un fichier helloworld.php dans le répertoire
wp-content/plugins/helloworld/ de Wordpress et
ajoutez votre header.
 Ajoutez la fonction suivante:
function hello_world($content){
if(is_single()){
$text = "<p>Hello World</p>";
return $text.$content;
} else {
return $content;
}
}
add_action('the_content', 'hello_world');

7. Explication:
 Notre "hook" va accrocher notre fonction hello_world au
contenu de l'article/page. Nous récupérons le contenu
de l'article/page en argument ($content) et nous créons
une variable $text contenant un simple paragraphe en
HTML.
 On souhaite afficher notre texte que sur les articles et
pas autre chose comme les pages, on fait une condition
à l'aide de is_single() qui permet de déterminer si on est
sur une page d'article ou pas.
 Activez votre extensions sur Wordpress, et vérifiez vos
pages du site.

8.  Et si on paramétrais le message dans la console Wordpress?
 Pour cela, remplacez la ligne $text = "<p>Hello World</p>"; par
$text = "<p>".get_option('hello_world_data')."</p>"; du fichier
helloworld.php
 Ajoutez ce code en bas du fichier
function hello_world_admin_menu() {
add_options_page('Page Hello World', 'Menu Hello
World', 'administrator', 'nom-unique-hello-
world', 'hello_world_html_page');
}
function hello_world_html_page() {
include 'hello-world.php';
}
if ( is_admin() ){
add_action('admin_menu', 'hello_world_admin_menu');
}

9. /* S'exécute lorsque le plugin est activé */
register_activation_hook(__FILE__,'hello_world_install');
/* S'exécute lorsque le plugin est désactivé */
register_deactivation_hook( __FILE__, 'hello_world_remove' );
function hello_world_install() {
/* Créé une champ dans la base de donnée */
add_option("hello_world_data", 'Text par default', '', 'yes');
}
function hello_world_remove() {
/* Supprime le champ de la base */
delete_option('hello_world_data');
}

10. Explication:
 La fonction add_options_page ajoute un élément
au menu « Réglages »
 La fonction is_admin() retourne true si on est
dans la console d’administration Wordpress.
 Les fonctions add_option et delete_option
Ajoute/supprime un enregistrement à la table
wp_options de Wordpress
 Pour la fonction hello_world_html_page(), créez
un fichier hello-world-form.php et ajoutez le
code suivant pour créer le formulaire dans le
menu de la console Wordpress

11. <div><h2>Hello World Options</h2>
<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); ?>
<table width="510">
<tr valign="top">
<th width="92" scope="row">Entrez votre texte</th>
<td width="406">
<input name="hello_world_data" type="text"
id="hello_world_data" value="<?php echo
get_option('hello_world_data'); ?>" />
(ex. Hello World)</td></tr>
</table>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options"
value="hello_world_data" />
<p><input type="submit" value="<?php _e('Enregistrer') ?>"
/></p>
</form>
</div>

13.  Créez un fichier compteur.php sur le
répertoire wp-content/plugins/compteur/ et
ajoutez votre Header.
 Collez ce code à votre fichier compteur.php
function compteur_install(){
global $wpdb;
$table = $wpdb->prefix."compteur_visite";
$structure = "CREATE TABLE $table (id INT(9) NOT NULL
AUTO_INCREMENT, nom_compteur VARCHAR(80) NOT NULL,
visites INT(9) DEFAULT 0,
UNIQUE KEY id (id) );";
$wpdb->query($structure);
// Inserer dans la base
$wpdb->query("INSERT INTO $table(nom_compteur)
VALUES('Compteur de visite')");
}
add_action('activate_compteur/compteur.php', 'compteur_install');

14. function compteur() {
global $wpdb;
$browser_name = $_SERVER['HTTP_USER_AGENT'];
$compteurs = $wpdb->get_results("SELECT * FROM “
.$wpdb->prefix."compteur_visite");
foreach($compteurs as $compteur) {
$wpdb->query("UPDATE ".$wpdb->prefix."compteur_visite
SET visites = visites+1 WHERE id = ".$compteur->id);
break; }
}
add_action('wp_footer', 'compteur');
function compteur_menu() {
global $wpdb;
include 'compteur-admin.php';
}
function compteur_admin_actions() {
add_options_page("Compteur de visite", "Compteur de
visite", 1, "compteur-de-visite", "compteur_menu");
}
add_action('admin_menu', 'compteur_admin_actions');

15. Explication:
 La fonction compteur_install créée une table et y insére un
enregistrement et on l’accroche au code Wordpress avec
le Hook
add_action(‘activate_nomduplugin/fichierduplugin.php’,’n
om_fonction’) pour l’exécuter lors de l’activation de
l’extension.
 La fonction compteur met à jour le nombre de visites pour
chaque affichage du footer en utilisant le Hook wp_footer
/* Supprimer la table lors de la désactivation du plugin */
function table_remove(){
global $wpdb;
$table = $wpdb->prefix."compteur_visite";
$wpdb->query("DROP TABLE $table");
}
register_deactivation_hook( __FILE__, 'table_remove' );

16.  La fonction compteur_admin_actions est
utilisée dans le Hook ‘admin_menu’ pour
ajouter un élément au menu Réglages de
Wordpress avec nom de fenêtre ‘Compteur de
visite’, nom du menu ‘Compteur de
visite’, accessible par
‘administrator’, l’identifiant du menu est
‘compteur-de-visite’ et qui exécute la
fonction ‘compteur_menu’.
 La fonction compteur_menu appelle le fichier
compteur-admin.php pour afficher la page
du menu qui contient le code suivant:

17. <?php
if ($_GET['compteur']=='reset') {
$myrequest=("UPDATE ".$wpdb->prefix."compteur_visite SET visites = 0");
$wpdb->query($myrequest);
?>
<div id="message" class="updated fade">
Compteur de visite <strong>réinitialisé</strong>.
</div>
<?php } ?>
<div class="wrap">
<h2>Compteur de visite</h2>
<?php
global $current_user;
echo 'Bonjour ' . $current_user->user_login . "<br/>";
echo '<br/>';
?>

18. <?php
$results = $wpdb->get_results("SELECT * FROM “.$wpdb-
>prefix."compteur_visite");
foreach($results as $result) {
echo "Le nom du compteur est: ".$result-
>nom_compteur."<br/>";
echo "Le nombre de visite est: ".$result->visites;
echo "<br/>";
}
?>
<br/>
<a href="?page=<?php echo $_GET['page'];
?>&compteur=reset">
Réinitialiser le compteur
</a>
</div>

19. Explication:
 Le <div class="wrap"> pour avoir un affichage
dans le même style que les pages de la console
Wordpress.
 <div id="message"> pour afficher les messages
dans le même style de la console Wordpress.
 Et enfin le dernier Hook du fichier compteur.php
register_deactivation_hook qui sera exécuté
lorsque vous désactivez votre extensions pour
supprimer la table préalablement créée.

21.  Créez un fichier moi_jaime_facebook.php où
« moi » sont vos initiales (Pour ne pas avoir le
même nom que d’autres extensions
Wordpress) et ajoutez votre Header.
 Ajouter le code d’importation des fichier JS de
facebook tout en bas de votre fichier:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

22.  L’API de facebook nous fourni des outils pour
générer le code de notre bouton « j’aime »
http://developers.facebook.com/docs/refere
nce/plugins/like/ grâce à cet outils, générez
votre code.
 Remplacez le lien de data-href par la fonction
the_permalink() de Wordpress (pour récupérer
l’URL de la page actuelle).
 Utilisez le Hook ‘the_content’ qu’on à déjà
utiliser dans le 1er TP pour afficher ce bouton
dans toutes les pages de vos articles.

23.  Solution:
 Remarque: les boutons de partage de réseaux
sociaux ne fonctionne pas en local, testez votre bouton
en ligne.
$mylink=the_permalink();
function jaime_facebook($content){
if(is_single()){
$text = "<div class="fb-like" data-href="$mylink" data-
send="false" data-layout="box_count" data-width="450" data-
show-faces="true"></div>n";
return $text.$content;
}
else{
return $content;
}
}
add_action('the_content', 'jaime_facebook');