Le document décrit un atelier de création d'extensions WordPress, comprenant des projets tels que "Hello World", un compteur de visites et un bouton "J'aime" de Facebook. Chaque projet inclut des instructions sur la création de fichiers PHP, l'ajout de fonctionnalités spécifiques et l'activation des extensions sur WordPress. Des explications sont également fournies sur le fonctionnement des hooks et des interactions avec la base de données WordPress.

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');