Atelier WordPress: Création d’extension WordPress

Semaine du web

WordPress Algérie

Atelier de Création d’extensions WordPress

Par Samir [email protected]

m

TP1: Hello World

TP2: Compteur de visites

TP3: Création du bouton « j’aime » de Facebook

Programme

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.

Rappels

Toute extension doit avoir un header de la forme suivante:

<?php/*Plugin Name: Nom de l’extensionPlugin URI: http://lien_pour_la_descriptionDescription: Une brève description de l’extensionVersion: 1.0Author: Nom de l’auteurAuthor URI: http://lien_de_l_auteur_de_l_extensionLicense: Nom de la license, ex. GPL2*/?>

Rappels

TP1Hello world

Créez un fichier helloworld.php dans le répertoire wp-content/plugins/helloworld/ de Wordpress et ajoutez votre header.

Ajoutez la fonction suivante:

TP1: Hello world

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.

TP1: Hello WOrld

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

TP1: Hello world

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

TP1: Hello World

/* 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

TP1: Hello world

TP1: Hello World<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>

TP2Compteur de visites

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’,’nom_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:



<?phpif ($_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.


TP3Création du bouton

« j’aime » de Facebook

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:

TP3: Bouton « J’aime »

<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/reference/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.


http://developers.facebook.com/docs/reference/plugins/like/



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

Technology

Atelier WordPress: Création d’extension WordPress