Code is Poetry




WordPress Algérie : wpdz.org          Par Samir IZZA
Sommaire
                      
 Prérequis                    Réglages du Plugin
 Introduction                 Menu & Sous-Menu
 Avant de commencer           Page d’options
 Le Header                    Intégration WordPress
 Licence du Plugin            Tables Personnalisées
 Les fonctions Activate et    Désinstaller le Plugin
  Desactivate                  Sécurité du Plugin
 Internationalisation         Publier votre Plugin
 Les Constantes               Soumettre votre Plugin
 Actions & Filters
Prérequis
                
Avoir des notions dans le langage PHP

Avoir des connaissances rudimentaire à
 l’HTML

Un peu d’Anglais 
Introduction
            
WordPress populaire.
Facile à personnaliser.
Comprendre l’API de WordPress.
Avant de commencer
            
 Choisir un nom unique pour votre extensions.

 Les fichiers des plugins 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
                      
 Doit être au top
 Doit être seulement sur le fichier principal
 Exemple de Header
Licence du Plugin
               
 Quand on veut créer un plugin pour le public, il est
  recommandé d’inclure la licence du plugin juste en
  bas du Header.

 La licence n’est pas une garantie qui va vous lier au
  résultat que ça pourrai apporter aux différents sites
  qui utilisent votre plugin.
Licence du Plugin
        
Fonctions Activate & Desactivate
                      
 register_activation_hook




 register_deactivation_hook
Internationalisation
               
 L’internationalisation (i18n).
 L’internationalisation n’est pas obligatoire.
1. La fonction _ _():

2. La fonction _e():

3. La fonction _ _ngettext (pluriel): Disant que vous
   souhaitez traduire la phrase suivante:
Internationalisation
              

Ceci marche très bien si vous avez un seul
message, mais si vous avez plus qu’un message? C’est
là    que la fonction _ _ngettext résout ce problème.
Internationalisation
              
 Maintenant que vous avez préparé votre plugin à la
  traduction, vous devriez charger le fichier de
  localisation:
Les Constantes
              
 ➤ WP_CONTENT_URL: URL complet pour wp-
  content
 ➤ WP_CONTENT_DIR: Chemin du serveur du
  répertoire wp-content
 ➤ WP_PLUGIN_URL: URL complet pour le
  répertoire plugins
 ➤ WP_PLUGIN_DIR: Chemin du serveur du
  répertoire plugins
 ➤ WP_LANG_DIR: Chemin du serveur pour le
  répertoire langage
Actions & Filters
                
1. 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.
   Votre plugin peut spécifier que l'une ou plusieurs de
   ses fonctions PHP sont exécutés à ces points.
Syntaxe:
Actions & Filters
                
2. 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:
Actions & Filters
               
 Liste des Filtres:
  http://codex.wordpress.org/Plugin_API/Filter_Ref
  erence
 Liste des Actions:
  http://codex.wordpress.org/Plugin_API/Action_Re
  ference
 Un autre lien très recommandé:
  http://wordpress.org/extend/plugins/
Actions populaires
             
publish_post

create_category

switch_theme

wp_head

admin_head
Actions populaires
                
wp_footer

init

admin_init

user_register

comment_post
Filtres populaires
               
the_content
the_content_rss
the_title
comment_text
wp_title
the_permalink
Réglages du Plugin
              
1. Sauvegarde des options du Plugin: add_option et
   update_option


Récupérer une valeur:

Supprimer une valeur :
Réglages du Plugin
              
2. Tableau d’options :
Réglages du Plugin
              
 Pour récupérer les données de ces options, utilisez la
  fonction get_option
Menu & Sous-Menu
                         
1. Créer un menu principal:
   Plusieurs pages de réglages  utiliser la fonction
   add_menu_page comme suit:
Menu & Sous-Menu
                         
2. Créer un sous menu:
   Utilisez la fonction add_submenu_page
   comme suite :
Menu & Sous-Menu
                         
3. Ajouter un sous menu au menu principal:
Menu & Sous-Menu
                 
 add_dashboard_page
 add_posts_page
 add_media_page
 add_links_page
 add_pages_page
 add_comments_page
Page d’options
                         
  Sauvegarder des options facilement
  Comment créer des pages pour ces options ???

  Créer un menu facilement
  Et le contenu de sa page?

 Créer une page d’option = Créer la fonction de la
  page d’options que vous avez définit lors de la
  création de son menu.
Page d’options
     
Page d’options
                         
 Le hook ‘admin_init’ exécute la fonction
  wpday_register_settings comme suit:




  Définition des options
Page d’options
                         
 Création de la fonction de la page d’options:
Page d’options
     
Intégration WordPress
           
1. Meta Box

2. Sidebar

3. Widget

4. ShortCode
Meta Box
                    
1. Meta Box:
 Pour ajouter une meta box il faut utiliser la fonction
  add_meta_box en utilisant les 6 paramètres suivants:



 Chaque paramètre indique comment et ou votre
  meta box sera affiché.
Meta Box
                    
 $id: l’attribut ID CSS du meta box
 $title: Le titre affiché dans le header du meta box
 $callback: Nom de la fonction pour afficher vos
  informations de Meta Box
 $page: Ou vous voulez afficher votre Meta Box
  (’post’, ‘page’, or ‘link’)
 $context: La partie de la page que le Meta Box doit
  afficher (’normal’,‘advanced’, or ‘side’)
 $priority: La priorité dans le context d’affichage du
  Meta Box (’high’, ‘core’, ‘default’, or ‘low’)
Meta Box
                    




 Maintenant il faut créer la fonction
  wpday_meta_box
Meta Box
   
Meta Box
                    
 Création du Meta Box  OK
 Création du formulaire  OK
 Sauvegarder les données à chaque enregistrement d’une
  page  Pas encore : wpday_save_meta_box qui doit être
  déclencher après chaque action hook save_post
Meta Box
                   
 Affichage des valeurs de vos éléments MetaBox dans
  votre site:
Shortcodes
                     
2. Shortcodes:
Shortcodes
                   
 [mysite]  http://example.com
 Vous pouvez aussi utiliser les paramètres dans les
  fonction du Shortcode
 [mysite param=value]
Widget
               
3. Widget:
Widget
                     
 Pour commencer, il faut étendre la classe WP_Widget
  en créant une nouvelle classe avec un nom unique




 Il reste à créer le formulaire des réglages du Widget
Widget
  
Widget
                     
 Vous n’avez pas besoin d’ajouter la balise <form> ou
  le bouton de soumission, ceci est pris en charge par
  la classe de Widget.
  Il reste à sauvegarder les réglages de votre Widget:
Widget
                     
 La dernière fonction de votre classe
  wpday_widget, c’est celle qui affiche votre widget:
Tables Personnalisées
            

 Il faut développer la fonction wpday_install()
Tables Personnalisées
         
Désinstaller le Plugin
             
 Une fonctionnalité intéressante à inclure dans votre
  plugin




 Le meilleur scénario de désinstallation est de ne
  laisser aucune trace du plugin.
Sécurité du Plugin
               
 Si un plugin contient des failles de sécurité, il ouvre
  l'ensemble du site WordPress pour les pirates à faire
  des ravages. WordPress propose certains outils
  intégrés de sécurité que vous pouvez utiliser pour
  vous assurer que vos plugins sont aussi sûrs que
  possible.
Nonces
               
C’est quoi les Nonces?

Et comment créer manuellement et
 vérifier les nonces?
Nonces
  
Nonces
                       
Soumission de formulaire  vérifier votre clé secrète nonce
en utilisant la fonction check_admin_referer




Cette technique permet de se protéger contre le Cross-Site
Scripting ou XSS.
Validation de données
              
 Nommage standard des fonctions de validations:




1) esc_: le prefix de la fonction d’échappement
2) attr_: le contexte d’échappement (attr, html, js, sql, url, et url_raw)
3) _e: le suffix optionnel de traduction (_ _ et _e)
Publier votre Plugin
              
 Restrictions:
 Plugin doit être sous licence GPL
 Plugin ne doit pas faire quelque chose d'illégal ou
  moralement choquant
 Vous devez utiliser Subversion (SVN) pour héberger
  votre plugin
 Plugin ne doit pas inclure des liens externes sur le
  site de l'utilisateur (tel que « Powered by ») sans
  demander la permission à l'utilisateur du plugin
Soumettre votre Plugin
          
1. Créer un compte WordPress.org
2. Sur « Développer Center » cliquez sur « Add your
   Plugin »
3. Remplir le formulaire:
   Nom du plugin (Important)
   Description du Plugin (fonctionnalités, but du
    plugin, les instructions d'installation)
   URL du Plugin (non requis).
Soumettre votre Plugin
            
4. Créez votre fichier readme.txt (Obligatoire)
    Récupérer le standard de fichier sur votre compte
     Wordpress.org  Developper Center  Readme Standard
    Remplir le fichier avec vos informations
    Validez votre fichier à l’aide du validateur de
     WordPress: WordPress.org  Developper Center 
     Readme Validator
5. Configuration SVN: le répertoire de Plugin de
   WordPress est sous SVN et pour publier un Plugin, vous
   auriez besoin d’installer et de configurer un client SVN
   (vous pouvez utiliser TortoiseSVN)
Soumettre votre Plugin
          
 Après configuration de SVN  3 répertoires vont
  être créé

 branches
 tags
 trunk

 Mettre le contenu de votre plugin dans le
  répertoire trunk avec la présence du fichier readme.txt
Soumettre votre Plugin
          
 Are you ready?  Yes !

1. Commitez le contenu du trunk
2. Taguez votre version

  Après 15mn, le plugin apparaitera dans le
  répertoire de Plugin de WordPress
Questions / Réponses
         

Développement d’extensions WordPress

  • 1.
    Code is Poetry WordPressAlgérie : wpdz.org Par Samir IZZA
  • 2.
    Sommaire   Prérequis  Réglages du Plugin  Introduction  Menu & Sous-Menu  Avant de commencer  Page d’options  Le Header  Intégration WordPress  Licence du Plugin  Tables Personnalisées  Les fonctions Activate et  Désinstaller le Plugin Desactivate  Sécurité du Plugin  Internationalisation  Publier votre Plugin  Les Constantes  Soumettre votre Plugin  Actions & Filters
  • 3.
    Prérequis  Avoir des notions dans le langage PHP Avoir des connaissances rudimentaire à l’HTML Un peu d’Anglais 
  • 4.
    Introduction  WordPress populaire. Facile à personnaliser. Comprendre l’API de WordPress.
  • 5.
    Avant de commencer   Choisir un nom unique pour votre extensions.  Les fichiers des plugins 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.
  • 6.
    Le Header   Doit être au top  Doit être seulement sur le fichier principal  Exemple de Header
  • 7.
    Licence du Plugin   Quand on veut créer un plugin pour le public, il est recommandé d’inclure la licence du plugin juste en bas du Header.  La licence n’est pas une garantie qui va vous lier au résultat que ça pourrai apporter aux différents sites qui utilisent votre plugin.
  • 8.
  • 9.
    Fonctions Activate &Desactivate   register_activation_hook  register_deactivation_hook
  • 10.
    Internationalisation   L’internationalisation (i18n).  L’internationalisation n’est pas obligatoire. 1. La fonction _ _(): 2. La fonction _e(): 3. La fonction _ _ngettext (pluriel): Disant que vous souhaitez traduire la phrase suivante:
  • 11.
    Internationalisation  Ceci marche très bien si vous avez un seul message, mais si vous avez plus qu’un message? C’est là que la fonction _ _ngettext résout ce problème.
  • 12.
    Internationalisation   Maintenant que vous avez préparé votre plugin à la traduction, vous devriez charger le fichier de localisation:
  • 13.
    Les Constantes   ➤ WP_CONTENT_URL: URL complet pour wp- content  ➤ WP_CONTENT_DIR: Chemin du serveur du répertoire wp-content  ➤ WP_PLUGIN_URL: URL complet pour le répertoire plugins  ➤ WP_PLUGIN_DIR: Chemin du serveur du répertoire plugins  ➤ WP_LANG_DIR: Chemin du serveur pour le répertoire langage
  • 14.
    Actions & Filters  1. 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. Votre plugin peut spécifier que l'une ou plusieurs de ses fonctions PHP sont exécutés à ces points. Syntaxe:
  • 15.
    Actions & Filters  2. 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:
  • 16.
    Actions & Filters   Liste des Filtres: http://codex.wordpress.org/Plugin_API/Filter_Ref erence  Liste des Actions: http://codex.wordpress.org/Plugin_API/Action_Re ference  Un autre lien très recommandé: http://wordpress.org/extend/plugins/
  • 17.
    Actions populaires  publish_post create_category switch_theme wp_head admin_head
  • 18.
    Actions populaires  wp_footer init admin_init user_register comment_post
  • 19.
    Filtres populaires  the_content the_content_rss the_title comment_text wp_title the_permalink
  • 20.
    Réglages du Plugin  1. Sauvegarde des options du Plugin: add_option et update_option Récupérer une valeur: Supprimer une valeur :
  • 21.
    Réglages du Plugin  2. Tableau d’options :
  • 22.
    Réglages du Plugin   Pour récupérer les données de ces options, utilisez la fonction get_option
  • 23.
    Menu & Sous-Menu  1. Créer un menu principal: Plusieurs pages de réglages  utiliser la fonction add_menu_page comme suit:
  • 24.
    Menu & Sous-Menu  2. Créer un sous menu: Utilisez la fonction add_submenu_page comme suite :
  • 25.
    Menu & Sous-Menu  3. Ajouter un sous menu au menu principal:
  • 26.
    Menu & Sous-Menu   add_dashboard_page  add_posts_page  add_media_page  add_links_page  add_pages_page  add_comments_page
  • 27.
    Page d’options    Sauvegarder des options facilement   Comment créer des pages pour ces options ???   Créer un menu facilement   Et le contenu de sa page?  Créer une page d’option = Créer la fonction de la page d’options que vous avez définit lors de la création de son menu.
  • 28.
  • 29.
    Page d’options   Le hook ‘admin_init’ exécute la fonction wpday_register_settings comme suit:   Définition des options
  • 30.
    Page d’options   Création de la fonction de la page d’options:
  • 31.
  • 32.
    Intégration WordPress  1. Meta Box 2. Sidebar 3. Widget 4. ShortCode
  • 33.
    Meta Box  1. Meta Box:  Pour ajouter une meta box il faut utiliser la fonction add_meta_box en utilisant les 6 paramètres suivants:  Chaque paramètre indique comment et ou votre meta box sera affiché.
  • 34.
    Meta Box   $id: l’attribut ID CSS du meta box  $title: Le titre affiché dans le header du meta box  $callback: Nom de la fonction pour afficher vos informations de Meta Box  $page: Ou vous voulez afficher votre Meta Box (’post’, ‘page’, or ‘link’)  $context: La partie de la page que le Meta Box doit afficher (’normal’,‘advanced’, or ‘side’)  $priority: La priorité dans le context d’affichage du Meta Box (’high’, ‘core’, ‘default’, or ‘low’)
  • 35.
    Meta Box   Maintenant il faut créer la fonction wpday_meta_box
  • 36.
  • 37.
    Meta Box   Création du Meta Box  OK  Création du formulaire  OK  Sauvegarder les données à chaque enregistrement d’une page  Pas encore : wpday_save_meta_box qui doit être déclencher après chaque action hook save_post
  • 38.
    Meta Box   Affichage des valeurs de vos éléments MetaBox dans votre site:
  • 39.
    Shortcodes  2. Shortcodes:
  • 40.
    Shortcodes   [mysite]  http://example.com  Vous pouvez aussi utiliser les paramètres dans les fonction du Shortcode [mysite param=value]
  • 41.
    Widget  3. Widget:
  • 42.
    Widget   Pour commencer, il faut étendre la classe WP_Widget en créant une nouvelle classe avec un nom unique  Il reste à créer le formulaire des réglages du Widget
  • 43.
  • 44.
    Widget   Vous n’avez pas besoin d’ajouter la balise <form> ou le bouton de soumission, ceci est pris en charge par la classe de Widget. Il reste à sauvegarder les réglages de votre Widget:
  • 45.
    Widget   La dernière fonction de votre classe wpday_widget, c’est celle qui affiche votre widget:
  • 46.
    Tables Personnalisées   Il faut développer la fonction wpday_install()
  • 47.
  • 48.
    Désinstaller le Plugin   Une fonctionnalité intéressante à inclure dans votre plugin  Le meilleur scénario de désinstallation est de ne laisser aucune trace du plugin.
  • 49.
    Sécurité du Plugin   Si un plugin contient des failles de sécurité, il ouvre l'ensemble du site WordPress pour les pirates à faire des ravages. WordPress propose certains outils intégrés de sécurité que vous pouvez utiliser pour vous assurer que vos plugins sont aussi sûrs que possible.
  • 50.
    Nonces  C’est quoi les Nonces? Et comment créer manuellement et vérifier les nonces?
  • 51.
  • 52.
    Nonces  Soumission de formulaire  vérifier votre clé secrète nonce en utilisant la fonction check_admin_referer Cette technique permet de se protéger contre le Cross-Site Scripting ou XSS.
  • 53.
    Validation de données   Nommage standard des fonctions de validations: 1) esc_: le prefix de la fonction d’échappement 2) attr_: le contexte d’échappement (attr, html, js, sql, url, et url_raw) 3) _e: le suffix optionnel de traduction (_ _ et _e)
  • 54.
    Publier votre Plugin   Restrictions:  Plugin doit être sous licence GPL  Plugin ne doit pas faire quelque chose d'illégal ou moralement choquant  Vous devez utiliser Subversion (SVN) pour héberger votre plugin  Plugin ne doit pas inclure des liens externes sur le site de l'utilisateur (tel que « Powered by ») sans demander la permission à l'utilisateur du plugin
  • 55.
    Soumettre votre Plugin  1. Créer un compte WordPress.org 2. Sur « Développer Center » cliquez sur « Add your Plugin » 3. Remplir le formulaire:  Nom du plugin (Important)  Description du Plugin (fonctionnalités, but du plugin, les instructions d'installation)  URL du Plugin (non requis).
  • 56.
    Soumettre votre Plugin  4. Créez votre fichier readme.txt (Obligatoire)  Récupérer le standard de fichier sur votre compte Wordpress.org  Developper Center  Readme Standard  Remplir le fichier avec vos informations  Validez votre fichier à l’aide du validateur de WordPress: WordPress.org  Developper Center  Readme Validator 5. Configuration SVN: le répertoire de Plugin de WordPress est sous SVN et pour publier un Plugin, vous auriez besoin d’installer et de configurer un client SVN (vous pouvez utiliser TortoiseSVN)
  • 57.
    Soumettre votre Plugin   Après configuration de SVN  3 répertoires vont être créé  branches  tags  trunk  Mettre le contenu de votre plugin dans le répertoire trunk avec la présence du fichier readme.txt
  • 58.
    Soumettre votre Plugin   Are you ready?  Yes ! 1. Commitez le contenu du trunk 2. Taguez votre version   Après 15mn, le plugin apparaitera dans le répertoire de Plugin de WordPress
  • 59.