Création de thèmes WordPress                                   ParMohamed Cherif                           Ghilas BELHADJ ...
IntroductionNous allons voir dans cette présentation le fonctionnement d’un thèmeWordPress « simple » et par la même occas...
Web DesignLe web design moderne divise la page d’un site web en sections où en modules
Mise en page (The layout)Il est toujours mieux et fortement recommandé de planifier le design
Concevoir son siteDesign visuel aide à avoir une idée générale sur l’apparence de site
Définir les sectionsToujours avant de commencer à écrire des balises (Markup)
Suivre les standards web   Structure en HTML (XHTML où HTML5)
Suivre les standards web        Mise en forme en CSS
Pourquoi le HTML et ne pas coder le PHP                directement?                 S’assurer que HTML et CSS valide     ...
Conversion en thème    WordPress
Création du dossier de thème Tout les thèmes se trouvent dans le dossier /wp-content/themes/
Pourquoi tout ces fichiers?                  Du codex Les fichiers modèles des thèmes constituent les pièces du puzzle qu...
Comment WordPress gère-t-il tout ça?
Hiérarchie des fichiers modèles
Avec quoi je peux démarrer?               style.css                                                 index.phpColler le fic...
Je ne vois pas mon thème dans le sélecteur du                       thèmes !!   /*   Theme Name: Plain & Clean   Theme URI...
Marqueurs de Modèle (Template tags)    C’est Quoi?                          Classement                                   ...
Marqueurs conditionels (conditional tags) Les Marqueurs Conditionnels peuvent          is_home() Quand la page principal...
Let the coding begin
Fichers de                                        Contenu de index.php  thème     style.css    index.php   header.php   ...
Contenu de header.phpFichiers de thème   style.css                                                               Afficher...
La boucle (the loop)Fichiers de thème   style.css  index.php  header.php  The Loop footer.php single.php sidebar.php c...
L’intérieur de la boucle (the loop)Fichiers de thème   style.css  index.php  header.php  The Loop footer.php single.ph...
Contenu de pied de page (footer.php)Fichiers de thème   style.css  index.php  header.php  The Loop  footer.php single...
Contenu de la vus d’un article(single.php)Fichiers de thème   style.css  index.php  header.php                         ...
la barre latérale (sidebar.php)Fichiers de thème   style.css  index.php  header.php                    Cette barre peut...
Activation des Widgets                                L’activation des Widgets se fait à partir du fichier                ...
Contenu de la barre latérale (sidebar.php)                    Coté code, le fichier sidebar.php ne contient pas grandFichi...
Quelques Fonctions célèbres pour la sidebar                    Dans le cas ou vous voudriez utiliser une autre sidebars,  ...
Les commentaires (comments.php)Fichiers de thème   style.css  index.php  header.php  The Loop  footer.php            ...
Structure du fichier comments.phpFichiers de thème   style.css  index.php        Si l’article n’est pas protégé  header...
Contenu du modèle de                                     commentairesFichiers de thème                   (comments.php)  ...
Contenu de page (page.php)Fichiers de thème    style.css   index.php   header.php   The Loop   footer.php   single.p...
Contenu du fichier search.phpFichiers de thème    style.css   index.php   header.php   The Loop   footer.php   singl...
Contenu du fichier                                                      searchform.phpFichiers de thème    style.css   i...
Les modèles de page                     Vous     pouvez      choisir                     lorsque vous créez votreFichiers ...
Les modèles de page                    Maintenant que vous avez votre modèle de page par                    défaut, vous p...
Liens Utiles
Les liens incontournable                   Les sites francophones:Documentation officielle :   codex.wordpress.org/fr:Accu...
Les liens incontournablesDocumentation officielle:      Les BloGs:                                     smashingmagazine.co...
Les Conseils
Travailler sur des serveurs locauxWampServer      Server2Go       LampServer   MampServer
Utiliser les outils de test et de débuguageRaccourci :   Raccourci :      Raccourci :    Raccourci :F12           Ctrl+Maj...
Vérifier si votre thème respecte les standards du web
Créer des thèmes aussi légers que possible      Equilibrer le Design/Contenu           Contenu      Design
Creation de-themes-wp
Creation de-themes-wp
Prochain SlideShare
Chargement dans…5
×

Creation de-themes-wp

7 275 vues

Publié le

Création de thèmes WordPress (conférence).

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

Aucun téléchargement
Vues
Nombre de vues
7 275
Sur SlideShare
0
Issues des intégrations
0
Intégrations
187
Actions
Partages
0
Téléchargements
82
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Creation de-themes-wp

  1. 1. Création de thèmes WordPress ParMohamed Cherif Ghilas BELHADJ &BOUCHELAGHEM Développeur et Designer WebConcepteur et développeur web de Tizi-Ouzou – AlgérieAnnaba – Algérie
  2. 2. IntroductionNous allons voir dans cette présentation le fonctionnement d’un thèmeWordPress « simple » et par la même occasion, comment créer levôtre, en convertissant une Template HTML statique en un thèmeWordPress utilisable.Toutefois, certains prérequis sont nécessaires, à savoir :Standards Web: XHTML (ou HTML5) et CSS (CSS3), et le caséchéant JavaScript.Des connaissances basiques : PHPDes outils de bases : Un éditeur de code (Notepad++), un logicielde création graphique (The Gimp, Photoshop, etc…)
  3. 3. Web DesignLe web design moderne divise la page d’un site web en sections où en modules
  4. 4. Mise en page (The layout)Il est toujours mieux et fortement recommandé de planifier le design
  5. 5. Concevoir son siteDesign visuel aide à avoir une idée générale sur l’apparence de site
  6. 6. Définir les sectionsToujours avant de commencer à écrire des balises (Markup)
  7. 7. Suivre les standards web Structure en HTML (XHTML où HTML5)
  8. 8. Suivre les standards web Mise en forme en CSS
  9. 9. Pourquoi le HTML et ne pas coder le PHP directement? S’assurer que HTML et CSS valide  l’affichage du site est compatible avec tout les navigateurs majeurs
  10. 10. Conversion en thème WordPress
  11. 11. Création du dossier de thème Tout les thèmes se trouvent dans le dossier /wp-content/themes/
  12. 12. Pourquoi tout ces fichiers? Du codex Les fichiers modèles des thèmes constituent les pièces du puzzle que WordPress assemble pour afficher les pages de votre site. Certains modèles (les fichiers dentête ou de pied de page, par exemple) sont utilisés pour toutes les pages générées ; dautres ne sont utilisés que sous certaines circonstances.
  13. 13. Comment WordPress gère-t-il tout ça?
  14. 14. Hiérarchie des fichiers modèles
  15. 15. Avec quoi je peux démarrer? style.css index.phpColler le fichier «style.css» et « index.html» dans le dossier de thème et renomme ce dernier en « index.php »
  16. 16. Je ne vois pas mon thème dans le sélecteur du thèmes !! /* Theme Name: Plain & Clean Theme URI: http://wpdz.org/ Description: basic Theme for learning 225px Author: Cherif BOUCHELAGHEM Author URI: http://wpdz.org/ Version: 1.0 */ 300px Fournir différentes informations Créer un fichier screenshot.png qui permettent d’afficher le avec la capture écran du site thème parmi ceux déjà disponiblesstyle.css est obligatoire, c’est à partir de ce fichier que WordPress extrait les données nécessaires pour afficher le thème dans lebackend
  17. 17. Marqueurs de Modèle (Template tags) C’est Quoi? Classement  Marqueurs de lAuteur Ce sont de courtes  Marqueurs des Catégories fonctions PHP qui  Marqueurs des Commentaires  Marqueurs de la Date et de vont appeler d’autres lHeure fichiers à l’endroit où  Marqueurs Généraux  Marqueurs des Liens ils ont été insérés, ou  Marqueurs du Gestionnaire de charger du contenu.  Liens Marqueurs des Permaliens  Marqueurs des Articles  Marqueurs des Tags  Marqueurs des Rétroliens http://codex.wordpress.org/fr:Marqueurs_de_Modele
  18. 18. Marqueurs conditionels (conditional tags) Les Marqueurs Conditionnels peuvent  is_home() Quand la page principale est être utilisés dans vos Thèmes pour affichée. décider du contenu à afficher sur une  is_single() Quand une page dArticle unique page spécifique ou comment ce contenu est affichée. doit être affiché en fonction  is_single() Quand une page dArticle unique est affichée. de conditions que remplit cette page. Par exemple, si vous voulez insérer un  is_page() Quand une page est affichée. texte particulier au-dessus dune série  is_category() Quand une page de Catégorie darchive est affichée. dArticles, mais seulement sur la page principale de votre blog, avec le  Etc… Marqueur Conditionnel is_home(), cela devient facile. Ces Marqueurs sont en relation étroite avec la Hiérarchie des Modèlesde WordPress. http://codex.wordpress.org/fr:Marqueurs_conditionnels
  19. 19. Let the coding begin
  20. 20. Fichers de Contenu de index.php thème  style.css  index.php header.php The Loop footer.php single.php sidebar.php comments.php page.php search.php get_header(): importe header.php search-form.php Importation des Modèles de page templates header.php, Afficher le Afficher un message si contenu sidebar.php et rien à afficher de la page footer.phpget_footer: accepte chaine de caractère comme paramètre pour inclure les modèles de différent footer
  21. 21. Contenu de header.phpFichiers de thème  style.css Afficher le titre pour chaque template avec  index.php conditional tags  header.php The Loop footer.php single.php sidebar.php Insertions des comments.php fichiers JS page.php search.php search-form.php Modèles de page Définir le doctype, les fournit ici l’URL du flux attributs de langue dans la Importer le RSS au format RSS 2.0 balise <html> et définir le fichier style.css et l’URL des retroliens charset
  22. 22. La boucle (the loop)Fichiers de thème  style.css  index.php  header.php  The Loop footer.php single.php sidebar.php comments.php page.php search.php S’il y a des articles on Affichage des liens vers Afficher un message les affiche l’un après les anciens article où les s’il n y a aucun search-form.php l’autre articles récents article Modèles de page
  23. 23. L’intérieur de la boucle (the loop)Fichiers de thème  style.css  index.php  header.php  The Loop footer.php single.php sidebar.php comments.php page.php search.php Affichage du titre en Affichage infos relative à Afficher le contenu de l’article plus les liens tant que lien vers l’article: date, auteur, search-form.php l’article catégorie... etc vers un article précédent et un suivant Modèles de page
  24. 24. Contenu de pied de page (footer.php)Fichiers de thème  style.css  index.php  header.php  The Loop  footer.php single.php sidebar.php comments.php page.php Il peut être structuré avec des sidebar (qu’on verra par la suite) qui search.php contient des Widgets, n’importe quel Template tag WordPress qui search-form.php charge du contenu comme des liens en occurrence où texte statique Modèles de page wp_footer(): c’est la même chose que wp_head() , mais spécifiquement pour les fichier JS, pour suivre les bonnes pratique d’intégration des fichiers JS en bas de page avant la fermeture de la balise <body></body> Un site peut contenir plusieurs footer qui peut être inclus par la fonction get_footer
  25. 25. Contenu de la vus d’un article(single.php)Fichiers de thème  style.css  index.php  header.php Afficher les liens de  The Loop navigation entre les articles  footer.php  single.php sidebar.php comments.php page.php search.php Importation des Afficher un search-form.php templates header.php, Afficher le contenu de message et le formulaire de Afficher le formulaire des Modèles de page sidebar.php et footer.php la page recherche si la page n’existe pas commentaire
  26. 26. la barre latérale (sidebar.php)Fichiers de thème  style.css  index.php  header.php Cette barre peut-  The Loop être incluse dans  footer.php votre page, avec un simple appelle de  single.php fonction  sidebar.php get_sidebar(). comments.php page.php search.php search-form.php Modèles de page
  27. 27. Activation des Widgets L’activation des Widgets se fait à partir du fichier functions.php, en insérant la fonctionFichiers de thème register_sidebar() avec son paramètre tableau :  style.css C’est ce nom  index.php qui vas être utilisé  header.php lors de la vérification  The Loop des Widgets  footer.php  single.php  sidebar.php comments.php page.php search.php search-form.php Modèles de pageÀ ce stade, vous pourrez d’ors et déjà utiliser des Widgets sur votre sidebar depuis le Back-End.
  28. 28. Contenu de la barre latérale (sidebar.php) Coté code, le fichier sidebar.php ne contient pas grandFichiers de thème choses, à part la vérification des Widgets et les menus par défauts.  style.css  index.php  header.php Nom déclaré  The Loop dans le fichier functions.php  footer.php  single.php  sidebar.php comments.php page.php search.php search-form.php Ces fonctions seront Modèles de page utilisé s’il n’y a pas de Widgets Acrifes
  29. 29. Quelques Fonctions célèbres pour la sidebar Dans le cas ou vous voudriez utiliser une autre sidebars, vous avez la possibilité l’utiliser la même fonctionFichiers de thème get_sidebar(‘secondaire’) qui vas appeler le fichier sidebar-secondaire.php  style.css wp_get_archives() : Permet de lister les dernier articles  index.php de votre site.  header.php wp_tag_cloud() : idéal si vous utilisez des tags dans vos  The Loop articles de lister les plus utilisées sous forme de nuage de  footer.php tags.  single.php wp_list_categories() : Affiche la liste des catégories de votre site.  sidebar.php wp_list_bookmarks() : Affiche la liste des liens géré comments.php depuis le panneau d’administration. page.php get_search_form () : Affiche le formulaire de recherche. search.php search-form.php Vous pouvez avoir l’intégralité des fonctions avec leurs Modèles de page paramètres détaillés sur http://www.codex.wordpress.org/
  30. 30. Les commentaires (comments.php)Fichiers de thème  style.css  index.php  header.php  The Loop  footer.php Appelle de la template comments.php par la  single.php fonction  sidebar.php comments_template()  comments.php page.php search.php search-form.php Modèles de page
  31. 31. Structure du fichier comments.phpFichiers de thème  style.css  index.php Si l’article n’est pas protégé  header.php Alors, Afficher les commentaires  The Loop S’il y des commentaires  footer.php  single.php  sidebar.php Si les commentaires sont  comments.php ouverts page.php Alors, Afficher le search.php formulaire search-form.php Si aucune inscription n’est requise Modèles de page
  32. 32. Contenu du modèle de commentairesFichiers de thème (comments.php)  style.css Article protégé par  index.php mot de passe  header.php  The Loop  footer.php Afficher les commentaires s’il y en a, sinon un petit  single.php message  sidebar.php  comments.php page.php Afficher le formulaire si les commentaires search.php sont ouverts sinon un petit message search-form.php Modèles de page Dans comments.php, nous aurons besoins de vérifier certaines conditions avant d’afficher les commentaires avec la fonctions wp_list_comments()
  33. 33. Contenu de page (page.php)Fichiers de thème  style.css  index.php  header.php  The Loop  footer.php  single.php  sidebar.php  comments.php  page.php Importation des Afficher Afficher un message et Afficher le templates search.php header.php, le le formulaire de formulaire contenu recherche si la page des sidebar.php et search-form.php footer.php de la page n’existe pas commentaire Modèles de page ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.
  34. 34. Contenu du fichier search.phpFichiers de thème  style.css  index.php  header.php  The Loop  footer.php  single.php  sidebar.php  comments.php  page.php search.php Importation des search-form.php templates Afficher les termes Afficher les résultats header.php, de recherches dans Modèles de page sidebar.php et la page de recherche footer.php ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.
  35. 35. Contenu du fichier searchform.phpFichiers de thème  style.css  index.php  header.php  The Loop Vous pouvez mettre le formulaire de recherche dans son  footer.php propre fichier pour pouvoir l’utiliser facilement sur  single.php d’autres templates avec la fonction get_search_form()  sidebar.php Vous pouvez, par exemple, utiliser cette fonction :  comments.php Dans le fichier 404.php  page.php Après le else d’une boucle. search.php Dans la sidebar search-form.php Etc… Modèles de page ressemble au fichier single.php, donc il n’y a pas de nouvelles fonctions à apprendre dans cette template.
  36. 36. Les modèles de page Vous pouvez choisir lorsque vous créez votreFichiers de thème page, le modèle qui lui  style.css sera appliquée (formulaire de contacte,  index.php plan du site, etc…).  header.php Pour en créer vous n’avez  The Loop qu’a copier la template  footer.php page.php et le renommer  single.php comme suite : template-  sidebar.php nom_du_modele.php Ensuite ajouter le code suivant au tout début :  comments.php <?php  page.php /* search.php Template Name: Nom du modèle */ search-form.php ?> Modèles de page Nom du modèle correspond au nom qui apparaitra dans le back-end
  37. 37. Les modèles de page Maintenant que vous avez votre modèle de page par défaut, vous pouvez lui apporter les modificationsFichiers de thème nécessaires en terme de style et fonctionnalités PHP.  style.css Vous pouvez par exemple :  index.php  Supprimez la sidebar  header.php  Ajouter de nouvelles fonctions Wordpress  The Loop  Appliquez un style différent via CSS  footer.php  Etc…  single.php Exemple de page modèle :  sidebar.php Page d’erreur 404 (404.php)  comments.php Page de liens (links.php)  page.php Plan du site (sitemap.php) search.php Page d’archives (archives.php) search-form.php Page D’accueil (index.php) Modèles de page Page de contact (contant.php) Etc…
  38. 38. Liens Utiles
  39. 39. Les liens incontournable Les sites francophones:Documentation officielle : codex.wordpress.org/fr:AccueilTutoriels sur la création de thèmes Wordpress : fran6art.com eiffair.fr grafikart.frForum d’entraide Wordpress : wordpress-fr.netRessources : geekeries.fr
  40. 40. Les liens incontournablesDocumentation officielle: Les BloGs: smashingmagazine.com  codex.wordpress.org   speckyboy.com  tutplus.com  Tutoriel sur Wordpress :  digwp.com  wprecipes.com  wpbeginner.com  wpcandy.com  pimpmywordpress.com  wpengineer.com  wpzine.com  wptavern.com
  41. 41. Les Conseils
  42. 42. Travailler sur des serveurs locauxWampServer Server2Go LampServer MampServer
  43. 43. Utiliser les outils de test et de débuguageRaccourci : Raccourci : Raccourci : Raccourci :F12 Ctrl+Maj+i F12 F12
  44. 44. Vérifier si votre thème respecte les standards du web
  45. 45. Créer des thèmes aussi légers que possible Equilibrer le Design/Contenu Contenu Design

×