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

2. Création de thèmes WordPress
Par
Mohamed Cherif Ghilas BELHADJ
&
BOUCHELAGHEM Développeur et Designer Web
Concepteur et développeur web de Tizi-Ouzou – Algérie
Annaba – Algérie

3. Introduction
Nous allons voir dans cette présentation le fonctionnement d’un thème
WordPress « simple » et par la même occasion, comment créer le
vôtre, en convertissant une Template HTML statique en un thème
WordPress 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 : PHP
Des outils de bases : Un éditeur de code (Notepad++), un logiciel
de création graphique (The Gimp, Photoshop, etc…)

4. Web Design
Le web design moderne divise la page d’un site web en sections où en modules

5. Mise en page (The layout)
Il est toujours mieux et fortement recommandé de planifier le design

6. Concevoir son site
Design visuel aide à avoir une idée générale sur l’apparence de site

7. Définir les sections
Toujours avant de commencer à écrire des balises (Markup)

8. Suivre les standards web
Structure en HTML (XHTML où HTML5)

9. Suivre les standards web
Mise en forme en CSS

10. 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

11. Conversion en thème
WordPress

12. Création du dossier de thème
Tout les thèmes se trouvent dans le dossier /wp-content/themes/

14. 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 d'entête ou de pied de page, par exemple)
sont utilisés pour toutes les pages générées ; d'autres
ne sont utilisés que sous certaines circonstances.

15. Comment WordPress gère-t-il tout ça?

16. Hiérarchie des fichiers modèles

17. Avec quoi je peux démarrer?
style.css index.php
Coller le fichier «style.css» et « index.html» dans le dossier de thème et renomme ce dernier en « index.php »

18. 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à
disponibles
style.css est obligatoire, c’est à partir de ce fichier que WordPress extrait les données nécessaires pour afficher le thème dans le
backend

19. Marqueurs de Modèle (Template tags)
C’est Quoi? Classement
 Marqueurs de l'Auteur
 Ce sont de courtes  Marqueurs des Catégories
fonctions PHP qui  Marqueurs des Commentaires
 Marqueurs de la Date et de
vont appeler d’autres l'Heure
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

20. 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 d'Article unique
page spécifique ou comment ce contenu est affichée.
doit être affiché en fonction  is_single() Quand une page d'Article 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 d'une série  is_category() Quand une page de Catégorie
d'archive est affichée.
d'Articles, 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

21. Let the coding begin

22. 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.php
get_footer: accepte chaine de caractère comme paramètre pour inclure les modèles de différent footer

23. Contenu de header.php
Fichiers 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. Activation des Widgets
L’activation des Widgets se fait à partir du fichier
functions.php, en insérant la fonction
Fichiers 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.

30. Contenu de la barre latérale (sidebar.php)
Coté code, le fichier sidebar.php ne contient pas grand
Fichiers 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

31. 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 fonction
Fichiers 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/

32. 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

33. Structure du fichier comments.php
Fichiers 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

34. Contenu du modèle de
commentaires
Fichiers 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()

35. 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.

36. Contenu du fichier search.php
Fichiers 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.

37. Contenu du fichier
searchform.php
Fichiers 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.

38. Les modèles de page
Vous pouvez choisir
lorsque vous créez votre
Fichiers 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

39. Les modèles de page
Maintenant que vous avez votre modèle de page par
défaut, vous pouvez lui apporter les modifications
Fichiers 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…

40. Liens Utiles

41. Les liens incontournable
Les sites francophones:
Documentation officielle :
codex.wordpress.org/fr:Accueil
Tutoriels sur la création de thèmes Wordpress :
fran6art.com
eiffair.fr
grafikart.fr
Forum d’entraide Wordpress :
wordpress-fr.net
Ressources :
geekeries.fr

42. Les liens incontournables
Documentation 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

43. Les Conseils

44. Travailler sur des serveurs locaux
WampServer Server2Go LampServer MampServer

45. Utiliser les outils de test et de débuguage
Raccourci : Raccourci : Raccourci : Raccourci :
F12 Ctrl+Maj+i F12 F12

46. Vérifier si votre thème respecte les standards du web

47. Créer des thèmes aussi légers que possible
Equilibrer le Design/Contenu
Contenu Design