Atelier de Création d’extensions WordPress
Par Samir IZZA
samirmember@gmail.com
 TP1: Hello World
 TP2: Compteur de visites
 TP3: Création du bouton « j’aime » de
Facebook
 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.
 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
*/
?>
 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');
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.
 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');
}
/* 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');
}
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
<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>
 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');
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');
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' );
 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:
<?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/>';
?>
<?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>
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.
 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>
 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.
 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');

Atelier WordPress: Création d&rsquo;extension WordPress

  • 1.
    Atelier de Créationd’extensions WordPress Par Samir IZZA samirmember@gmail.com
  • 2.
     TP1: HelloWorld  TP2: Compteur de visites  TP3: Création du bouton « j’aime » de Facebook
  • 3.
     Choisir unnom 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 extensiondoit 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 unfichier 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 sion 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 lorsquele 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 fonctionadd_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> <formmethod="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 unfichier 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 fonctioncompteur_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 fonctioncompteur_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 <divclass="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 unfichier 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 defacebook 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');