Wordpress DAY - création d'extensions

  • 2,063 views
Uploaded on

Créer une extension WordPress.

Créer une extension WordPress.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,063
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
18
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 dexécution, ou lorsque des événements spécifiques se produisent (action). Votre plugin peut spécifier que lune 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 lajouter à la base de données ou de lenvoyer au navigateur. Votre plugin peut spécifier que lune 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 */ ?>
  • 8.  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);
  • 9. Explication: Notre "hook" va accrocher notre fonction hello_world au contenu de larticle/page. Nous récupérons le contenu de larticle/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 à laide de is_single() qui permet de déterminer si on est sur une page darticle ou pas. Activez votre extensions sur Wordpress, et vérifiez vos pages du site.
  • 10.  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); }
  • 11. /* Sexécute lorsque le plugin est activé */register_activation_hook(__FILE__,hello_world_install);/* Sexé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);}
  • 12. 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
  • 13. <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>
  • 14.  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);
  • 15. 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);
  • 16. /* 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
  • 17.  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:
  • 18. <?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/>; ?>
  • 19. <?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>
  • 20. 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.
  • 21.  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>
  • 22.  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.
  • 23.  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.