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
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
12. Création du dossier de thème
Tout les thèmes se trouvent dans le dossier /wp-content/themes/
13.
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.
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
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…
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