Si vous souhaitez vous lancer dans la création de votre thème WordPress, vous devrez au préalable faire l’effort de comprendre les principes de bases qui régissent cette plate-forme de blog. Cet article explique de quelle façon est organisé la structure d’un thème WordPress.
En bref, on a avec WordPress un système de template PHP classique, avec des fichiers de modèles hiérarchisés (la page index.php étant la page par défaut, puis les pages spécifiques dédiées aux catégories, aux auteurs, aux archives, aux commentaires), et des fichiers spécifiques tels que le header, le footer, les sidebars, qui vont apparaître à l’intérieur des pages.
Qu’est-ce qu’un thème WordPress (template) ?
C’est le thème qui donne son identité au blog et qui “habille” son contenu. C’est en fait la couche graphique que voit l’internaute, mais pas uniquement. En effet, le thème prend en charge non seulement le design (polices utilisées, couleurs des différents éléments et hyperliens…), mais aussi la mise en page du contenu de votre blog (quels éléments afficher et leurs positionnements). Précisons également qu’un thème modifie la façon dont le site est affiché, sans changer le logiciel sous-jacent.
Un thème WordPress est composé d’un ensemble de fichiers de modèles qui fonctionnent conjointement. Ils forment une structure unifiée. Ces fichiers sont rassemblés dans un dossier unique portant le nom de votre thème et contenu dans le répertoire (../wp-content/themes/votre-theme/).
Dans ces fichiers de modèles sont insérés des balises de modèles qui extraits des informations de chaque fichiers de modèles pour l’injecter dans la page qui sera affichée.
Voici les différents éléments composant un thème WordPress :
- la feuille de style du blog : style.css (CSS = Cascading Style Sheets).
- les fichiers composant le thème, appelés fichiers de modèles : header.php, index.php, footer.php, sidebar.php…
- un fichier permettant d’ajouter des fonctionnalités optionnelles à votre thème : functions.php. Il n’est pas obligatoire.
- les images utilisées pour habiller le blog.
Les noms des fichiers de modèles sont identiques quels que soient le thème WordPress utilisé. Un gain de temps énorme lorsque l’on passe son temps à personnaliser des thèmes WordPress récupérés à droite à gauche. On retrouve plus facilement les différents éléments puisqu’ils sont toujours à la même place.
Quel est la structure d’un thème ?
Un blog WordPress est généralement composé de quatre zones, nécessitant au moins quatre fichiers de modèles et une feuille de style :
Désignations Fichiers de modèles Descriptions
En-tête header header.php Zone contenant généralement le nom du site, un sous-titre, souvent un graphisme et parfois un menu horizontal
Corps body index.php Zone affichant les articles dans un ordre anté-chronologique
Colonne latérale sidebar sidebar.php Zone comprenant la liste des archives catégories, articles récents, blogoliste…
Pied de page footer footer.php Zone contenant les liens concernant le designer du thème, copyright…
Feuille de syle css style.css
Seuls deux fichiers sont obligatoires pour qu’un thème puisse être considéré comme valide par WordPress : index.php pour le code PHP, et style.css pour la mise en forme du blog.
Signalons la place essentielle du fichier index.php : c’est là où se déroule principalement l’action. Ce fichier extrait les articles du blog et les affiche. Lorsque le fichier template demandé n’existe pas, c’est lui que WordPress affiche, si bien que l’on pourrait très bien n’utiliser que ce fichier-là pour contrôler l’apparence du site. Mais ce ne serait pas très pratique.
Qu’est-ce qu’une feuille de style ?
Écrit à l’aide du langage CSS (Cascading Style Sheet), le fichier style.css ne sert pas à produire le contenu du site, mais plutôt à le formater. En fait, ce fichier pilote tous les aspects de mise en page du thème de votre blog : emplacement des différents éléments, polices utilisées, couleurs des hyperliens. Ce fichier contient également les informations que WordPress affichera au sujet du thème : nom du thème, version, nom de l’auteur, date de publication…
Pour que WordPress puisse reconnaître correctement votre thème et afficher les infos le concernant, il faut que le fichier style.css contienne les premières lignes suivantes (à adapter selon votre cas) :
/* Theme Name: Le Nom de votre Theme Theme URI: http://www.votre-site.com/ Description: Thème personnel et personnalisé de…. Création originale de… pour… Version: 1.0 Author: Votre Nom Author URI: http://www.votre-site.com/profil.html ************************************************ * COPYRIGHT ou LICENCE (à personnaliser) * Ce theme est une creation exclusive de… pour… * Tous droits reserves Copyright (C) 2012 Votre Nom/Société * This theme was designed and built by… for… * All rights reserved Copyright (C) 2012 Votre Nom/Société ************************************************ */
Chaque thème est illustré dans le panneau d’administration par une image miniature nommée screenshot.png. On la trouve à la racine du dossier de thème (wp-content/themes/mon-theme/screenshot.png).
Qu’est-ce qu’un fichier de modèle (template files) ?
L’appellation fichiers de modèle (template files) regroupe tous les fichiers PHP du thème, à l’exception des fichiers spéciaux comme functions.php.
Il existe deux types de fichiers de modèles :
- Les fichiers principaux qui composent le thème. Reliés entre eux, ils vont créer et afficher la page Web. Les principaux sont : index.php, single.php, page.php, category.php, archive.php, search.php…
- Les fichiers partiels qui sont des inclusions affichant des parties spécifiques à l’intérieur des pages du blog. Les plus utilisés sont : header.php, footer.php, sidebar.php, searchform.php…
Liste complète des fichiers de modèles qui gérent séparément les parties du blog
header.php header section Affiche l’en-tête du blog
index.php main section Affiche le contenu du blog
sidebar.php sidebar section Affiche la colonne latérale du blog
footer.php footer section Affiche le pied de page du blog
single.php post template Affiche le contenu de l’article
page.php page template Affiche une page seule (on peut également utiliser pagename.php qui affichera directement le nom de la page)
[nom-page].php specific page Affiche une page précise, à partir de son permalien (expl : a-propos.php)
home.php home Affiche une page d’accueil spécifique
comments.php comments template Affiche les commentaires et le formulaire de commentaire
search.php search content Affiche les résultats d’une recherche
searchform.php search form Affiche les résultats d’une recherche
archive.php archive Affiche les archives (par catégorie, par label, par auteur, etc.)
category.php category Affiche une catégorie seule. Déclinaison encore plus précise, category-X.php, pour gérer l’affichage des articles de la catégorie dont le numéro d’identifiant est X (par exemple, category-7-.php).
tag.php tag Affiche les pages de tags. Déclinaison encore plus précise, tag-slug.php affiche les articles correspondant à un tag en ayant son nom directement dans l’URL sous la forme « tag-wordpress.php » par exemple, avec ici « wordpress » comme nom de tag).
author.php author Affiche une page présentant les données liées à un auteur en particulier (articles, pages, liens, autres informations).
date.php date Affiche les articles par date précise (année, mois ou jour).
404.php error page Affiche la page d’erreur (erreur 404)
image.php image Affiche une page présentant les images
video.php video Affiche une page présentant les fichiers vidéo
audio.php audio Affiche une page présentant les fichiers audio
application.php application Affiche une page présentant les applications
functions.php special functions Ce fichier qui n’est pas obligatoire permet d’ajouter différentes options et paramètres au thème via l’interface d’administration de WordPress.
Tous ces fichiers templates sont reliés entre eux sous forme de hiérarchie. En fonction de ce qu’il doit afficher, WordPress regarde dans le répertoire du thème et utilise le premier fichier de modèle qu’il trouve… selon la hiérarchie d’appel reproduite dans le schéma synoptique ci-dessous.
Si votre blog est à l’adresse http://mon-site.com// et qu’un visiteur charge la page http://mon-site.com/, WordPress cherche un fichier de modèle appelé home.php et l’utilise pour générer la page. Si home.php n’existe pas, WordPress recherche un fichier appelé index.php dans le répertoire du thème et l’utilise alors pour générer la page.
Qu’est-ce qu’une balise de modèle (template tag) ?
Les balises (ou marqueurs) de modèles permettent :
- de connecter tous les fichiers de modèles entre eux pour former le thème qui devient une seule et même entité.
- de gérér et générer l’ensemble des contenus dynamiques de WordPress.
Un marqueur de modèle est une instruction PHP qui demande à WordPress de faire ou d’afficher quelque chose. Dans le cas du marqueur de modèle header.php permettant d’afficher le nom de votre site WordPress, il ressemble à :
- <?php bloginfo(‘name’); ?>
Chaque balise débute par une fonction qui lance PHP (<?php) et se finit par une fonction qui l’arrête (?>). Entre ces deux commandes se trouve la requête faîte à la base de donnée lui indiquant ce qu’il doit récupérer et afficher (ici bloginfo).
Dans cet exemple, le mot name lui demande de récupérer le nom du blog. On appelle cela un paramètre. Les paramètres sont placés entre les parenthèses de la balise, et entre guillemets. Le plus souvent, ils tirent leur valeur des paramètres du panneau d’administration de WordPress. À noter que beaucoup de balises ne possèdent pas de paramètre.
Voici la liste complète des balises valides de modèles WordPress, par catégories :
Auteur Catégories Commentaires
the_author
the_author_description
the_author_login
the_author_firstname
the_author_lastname
the_author_nickname
the_author_ID
the_author_email
the_author_url
the_author_link
the_author_icq
the_author_aim
the_author_yim
the_author_msn
the_author_posts
the_author_posts_link
list_authors
wp_list_authors
the_category
the_category_rss
single_cat_title
category_description
wp_dropdown_categories
wp_list_categories
in_category
get_category_parents
get_the_category
get_category_link
comments_number
comments_link
comments_rss_link
comments_popup_script
comments_popup_link
comment_ID
comment_author
comment_author_IP
comment_author_email
comment_author_url
comment_author_email_link
comment_author_url_link
comment_author_link
comment_type
comment_text
comment_excerpt
comment_date
comment_time
comment_author_rss
comment_text_rss
comment_link_rss
permalink_comments_rss
Date et Heure Généraux Géo
the_date_xml
the_date
the_time
the_modified_date
the_modified_time
get_the_time
single_month_title
get_calendar
bloginfo
bloginfo_rss
get_bloginfo
get_bloginfo_rss
wp_title
wp_get_archives
get_calendar
get_posts
wp_list_pages
wp_loginout
wp_register
query_posts
print_Lat
print_Lon
print_UrlPopNav
print_AcmeMap_Url
print_GeoURL_Url
print_GeoCache_Url
print_MapQuest_Url
print_SideBit_Url
print_DegreeConfluence_Url
print_TopoZone_Url
print_FindU_Url
print_MapTech_Url
Liens Gestionnaire de Liens Permaliens
edit_post_link
edit_comment_link
wp_link_pages
get_year_link
get_month_link
get_day_link
get_links_list
wp_get_links
get_links
wp_list_bookmarks
permalink_anchor
get_permalink
the_permalink
permalink_single_rss
Articles Tags Rétroliens
the_ID
the_title
single_post_title
the_title_rss
the_content
the_content_rss
the_excerpt
the_excerpt_rss
previous_post_link
next_post_link
posts_nav_link
the_meta
wp_tag_cloud
the_tags
trackback_url
trackback_rdf
Pour tout savoir sur les balises de modèles et leurs paramètres, consultez les articles du Codex WordPress :
- Découvrir les Marqueurs de modèles.
- Marqueurs de modèles.
- Liste exhaustive et officielle des Template Tags (en anglais).
Qu’est-ce que la boucle WordPress (The Loop) ?
La Boucle (The Loop) est une fonction PHP permettant d’appeler n’importe quel contenu (titre d’article, texte de commentaire, liens…) depuis la base de données, à l’aide des fameuses balises (ou marqueurs) de modèles évoqués plus haut. Par l’utilisation de La Boucle, WordPress traite tous les Articles devant être affichés sur la page active et adapte leur présentation en utilisant les critères décrits par les marqueurs de La Boucle.
La Boucle est présente non seulement dans index.php mais aussi dans single.php, category.php, page.php, archive.php, search.php… Elle est l’élément central et indispensable permettant d’afficher précisément ce que l’on souhaite. Ainsi, il est possible d’afficher tous les articles en ordre chronologique décroissant, ou bien tous les articles d’une catégorie, ou encore les articles d’une période donnée et enfin les articles d’un auteur. Si on désire afficher une sélection d’article personnalisée, il faut mettre les mains dans le code avec la requête query_posts().
Pour en savoir plus sur la Boucle WordPress, et les différents marqueurs de modèles qui ne fonctionnent que dans la Boucle :
- Codex fr : La Boucle.
- Codex : The Loop in Action.
Qu’est-ce que le fichier functions.php ?
Ce fichier – qui n’est pas obligatoire – permet d’ajouter certaines fonctionnalités au thème, dont certaines peuvent être gérées via l’interface d’administration de WordPress.
Par exemple, c’est dans ce fichier que se trouve la fonction PHP permettant de « widgetiser » la sidebar (c’est-à-dire de la rendre gérable par l’administration de wordpress), ou bien encore celles permettant de filter les headers 301 et 404 (redirections, héritages…) ou de gérer les fichiers de traductions…
Conclusion
Comprendre les thèmes et les modèles WordPress c’est la possibilité de créer son propre thème, à son image, mais aussi la possibilité d’avoir le contrôle total sur la façon dont il fonctionne.
Jeu de briques
Snake
Pacman
Bubble