Créer une extension WordPress.

1. Création d’extensions WordPress

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

3.  Connaître les bases des langages PHP
 Être
familiarisé avec les fonctions WordPress
(Hooks: Actions et filtres)
 Anglais 

4.  Les Actions: Les actions sont les crochets que
le noyau de WordPress lance à des points
spécifiques en cours d'exécution, ou lorsque
des événements spécifiques se produisent
(action). Votre plugin peut spécifier que l'une
ou plusieurs de ses fonctions PHP sont
exécutés à ces points.
 Syntaxe:
add_action('nom_hook', ‘nom_fonction', [priorité], [args]);

5.  Les filtres: Les filtres sont les crochets que
WordPress lance pour modifier le texte de
divers types, avant de l'ajouter à la base de
données ou de l'envoyer au navigateur. Votre
plugin peut spécifier que l'une ou plusieurs
de ses fonctions PHP est exécuté pour
modifier le contenu du texte ou des données.
 Syntaxe:
add_filter('nom_hook', 'votre_filtre', [priorité], [args]);

6.  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
 Testeztoujours l’extension avec la dernière
version de WordPress.

7.  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
*/
?>

9.  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');

10. 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.

11.  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');
}

12. /* 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');
}

13. 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

14. <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>

16.  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');

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

18. /* 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' );
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

19.  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:

20. <?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/>';
?>

21. <?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>

22. 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.

24.  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>

25.  L’API de facebook nous fourni des outils pour
générer le code de notre bouton « j’aime »
http://developers.facebook.com/docs/refer
ence/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.

26.  Solution:
$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');
 Remarque: les boutons de partage de réseaux sociaux ne
fonctionne pas en local, testez votre bouton en ligne.