WORDPRESS DAY ALGÉRIE

Création d’extensions WordPress

PROGRAMME

TP1: Hello World

TP2: Compteur de visites

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

PRÉREQUIS Connaître les bases des langages PHP

Être familiarisé avec les fonctions WordPress (Hooks: Actions et filtres)

Anglais

INTRODUCTION 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]);

INTRODUCTION 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]);

AVANT DE COMMENCER

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.

LE HEADER 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*/?>

TP1HELLO WORLD

TP1: HELLO 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:

function hello_world($content){ if(is_single()){

$text = "<p>Hello World</p>"; return $text.$content;

} else {return $content;

}}add_action('the_content', 'hello_world');

TP1: HELLO WORLDExplication: 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 fichierfunction 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');}

TP1: HELLO WORLDExplication: 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<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

TP2: COMPTEUR 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.phpfunction 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');

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

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

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

TP2: COMPTEUR DE VISITESExplication: 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

TP3: BOUTON « J’AIME » 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>

TP3: BOUTON « J’AIME » 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.

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