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
TP2: Compteur de visites
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');
TP2: Compteur de visites
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
TP2: Compteur de visites
/* 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:
TP2: Compteur de visites
TP2: Compteur de visites
<?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/>';
?>
TP2: Compteur de visites
<?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.
TP2: Compteur de visites
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.
TP3: Bouton « J’aime »
Solution:
Remarque: les boutons de partage de réseaux sociaux ne fonctionne pas en local, testez votre bouton en ligne.
TP3: Bouton « J’aime »
$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');
Top Related