Atelier de Création d’extensions WordPressPar Samir IZZAsamirmember@gmail.com
 TP1: Hello World TP2: Compteur de visites TP3: Création du bouton « j’aime » deFacebook
 Choisir un nom unique pour votreextensions. Les fichiers de l’extensions sont dans lerépertoire wp-content/plugins/ deW...
 Toute extension doit avoir un header de laforme suivante:<?php/*Plugin Name: Nom de l’extensionPlugin URI: http://lien_p...
 Créez un fichier helloworld.php dans le répertoirewp-content/plugins/helloworld/ de Wordpress etajoutez votre header. A...
Explication: Notre "hook" va accrocher notre fonction hello_world aucontenu de larticle/page. Nous récupérons le contenud...
 Et si on paramétrais le message dans la console Wordpress? Pour cela, remplacez la ligne $text = "<p>Hello World</p>"; ...
/* Sexécute lorsque le plugin est activé */register_activation_hook(__FILE__,hello_world_install);/* Sexécute lorsque le p...
Explication: La fonction add_options_page ajoute un élémentau menu « Réglages » La fonction is_admin() retourne true si ...
<div><h2>Hello World Options</h2><form method="post" action="options.php"><?php wp_nonce_field(update-options); ?><table w...
 Créez un fichier compteur.php sur lerépertoire wp-content/plugins/compteur/ etajoutez votre Header. Collez ce code à vo...
function compteur() {global $wpdb;$browser_name = $_SERVER[HTTP_USER_AGENT];$compteurs = $wpdb->get_results("SELECT * FROM...
Explication: La fonction compteur_install créée une table et y insére unenregistrement et on l’accroche au code Wordpress...
 La fonction compteur_admin_actions estutilisée dans le Hook ‘admin_menu’ pourajouter un élément au menu Réglages deWordp...
<?phpif ($_GET[compteur]==reset) {$myrequest=("UPDATE ".$wpdb->prefix."compteur_visite SET visites = 0");$wpdb->query($myr...
<?php$results = $wpdb->get_results("SELECT * FROM “.$wpdb->prefix."compteur_visite");foreach($results as $result) {echo "L...
Explication: Le <div class="wrap"> pour avoir un affichagedans le même style que les pages de la consoleWordpress. <div ...
 Créez un fichier moi_jaime_facebook.php où« moi » sont vos initiales (Pour ne pas avoir lemême nom que d’autres extensio...
 L’API de facebook nous fourni des outils pourgénérer le code de notre bouton « j’aime »http://developers.facebook.com/do...
 Solution: Remarque: les boutons de partage de réseauxsociaux ne fonctionne pas en local, testez votre boutonen ligne.$m...
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
Prochain SlideShare
Chargement dans…5
×

Atelier WordPress: Création d&rsquo;extension WordPress

950 vues

Publié le

Initiation aux développement de plugin WordPress, inclus 3 tutoriels:
TP1: Hello World.
TP2: Compteur de visites.
TP3: Création du bouton « j’aime » de Facebook

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
950
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
14
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Atelier WordPress: Création d&rsquo;extension WordPress

  1. 1. Atelier de Création d’extensions WordPressPar Samir IZZAsamirmember@gmail.com
  2. 2.  TP1: Hello World TP2: Compteur de visites TP3: Création du bouton « j’aime » deFacebook
  3. 3.  Choisir un nom unique pour votreextensions. Les fichiers de l’extensions sont dans lerépertoire wp-content/plugins/ deWordpress. Encodez toujours vos fichiers en UTF-8 Testez toujours l’extension avec ladernière version de WordPress.
  4. 4.  Toute extension doit avoir un header de laforme 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*/?>
  5. 5.  Créez un fichier helloworld.php dans le répertoirewp-content/plugins/helloworld/ de Wordpress etajoutez 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);
  6. 6. Explication: Notre "hook" va accrocher notre fonction hello_world aucontenu de larticle/page. Nous récupérons le contenude larticle/page en argument ($content) et nous créonsune variable $text contenant un simple paragraphe enHTML. On souhaite afficher notre texte que sur les articles etpas autre chose comme les pages, on fait une conditionà laide de is_single() qui permet de déterminer si on estsur une page darticle ou pas. Activez votre extensions sur Wordpress, et vérifiez vospages du site.
  7. 7.  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 fichierhelloworld.php Ajoutez ce code en bas du fichierfunction hello_world_admin_menu() {add_options_page(Page Hello World, Menu HelloWorld, 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);}
  8. 8. /* 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);}
  9. 9. Explication: La fonction add_options_page ajoute un élémentau menu « Réglages » La fonction is_admin() retourne true si on estdans la console d’administration Wordpress. Les fonctions add_option et delete_optionAjoute/supprime un enregistrement à la tablewp_options de Wordpress Pour la fonction hello_world_html_page(), créezun fichier hello-world-form.php et ajoutez lecode suivant pour créer le formulaire dans lemenu de la console Wordpress
  10. 10. <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 echoget_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>
  11. 11.  Créez un fichier compteur.php sur lerépertoire wp-content/plugins/compteur/ etajoutez 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 NULLAUTO_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);
  12. 12. 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_visiteSET 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 devisite", 1, "compteur-de-visite", "compteur_menu");}add_action(admin_menu, compteur_admin_actions);
  13. 13. Explication: La fonction compteur_install créée une table et y insére unenregistrement et on l’accroche au code Wordpress avecle Hookadd_action(‘activate_nomduplugin/fichierduplugin.php’,’nom_fonction’) pour l’exécuter lors de l’activation del’extension. La fonction compteur met à jour le nombre de visites pourchaque 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 );
  14. 14.  La fonction compteur_admin_actions estutilisée dans le Hook ‘admin_menu’ pourajouter un élément au menu Réglages deWordpress avec nom de fenêtre ‘Compteur devisite’, nom du menu ‘Compteur devisite’, accessible par‘administrator’, l’identifiant du menu est‘compteur-de-visite’ et qui exécute lafonction ‘compteur_menu’. La fonction compteur_menu appelle le fichiercompteur-admin.php pour afficher la pagedu menu qui contient le code suivant:
  15. 15. <?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><?phpglobal $current_user;echo Bonjour . $current_user->user_login . "<br/>";echo <br/>;?>
  16. 16. <?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>
  17. 17. Explication: Le <div class="wrap"> pour avoir un affichagedans le même style que les pages de la consoleWordpress. <div id="message"> pour afficher les messagesdans le même style de la console Wordpress. Et enfin le dernier Hook du fichier compteur.phpregister_deactivation_hook qui sera exécutélorsque vous désactivez votre extensions poursupprimer la table préalablement créée.
  18. 18.  Créez un fichier moi_jaime_facebook.php où« moi » sont vos initiales (Pour ne pas avoir lemême nom que d’autres extensionsWordpress) et ajoutez votre Header. Ajouter le code d’importation des fichier JS defacebook 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>
  19. 19.  L’API de facebook nous fourni des outils pourgénérer le code de notre bouton « j’aime »http://developers.facebook.com/docs/reference/plugins/like/ grâce à cet outils, générezvotre code. Remplacez le lien de data-href par la fonctionthe_permalink() de Wordpress (pour récupérerl’URL de la page actuelle). Utilisez le Hook ‘the_content’ qu’on à déjàutiliser dans le 1er TP pour afficher ce boutondans toutes les pages de vos articles.
  20. 20.  Solution: Remarque: les boutons de partage de réseauxsociaux ne fonctionne pas en local, testez votre boutonen 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);

×