Upload
chi-nacim
View
2.078
Download
6
Tags:
Embed Size (px)
DESCRIPTION
Créer une extension WordPress.
Citation preview
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');