De quoi est composé un thème WordPress ?

Avant de débuter le développement de votre site WordPress, vous devez bien connaître les fichiers qui composent un thème WordPress : fichiers modèles, feuille de style, fichier de fonctions personnalisées, etc. Ceci vous aidera à développer votre thème enfant (tout site WordPress devrait avoir un thème enfant...), ce qui facilitera le travail de maintenance du site.

▼Publicité

Les fichiers modèles (template files)

Chaque page d'un site WordPress est bâtie à l'aide de fichiers modèles. Les fichiers modèles sont placés dans le dossier du thème :

www\votresite\wp-content\themes\nomdutheme

Les thèmes ne définissent pas tous les même fichiers modèles. Voici quelques fichiers modèles pouvant faire partie d'un thème WordPress :

  • index.php
  • home.php
  • page.php
  • content.php
  • header.php
  • footer.php
  • sidebar.php
  • searchform.php
  • search.php
  • etc.

Le fichier index.php doit obligatoirement être présent dans le thème ou dans son thème parent.

À titre indicatif, les images suivantes montrent les fichiers présents dans différents thèmes :

Fichiers du thème TwentyTen
Fichiers du thème TwentyEleven
Fichiers du thème TwentyTwelve
Fichiers du thème Bizway
Fichiers du thème Christiane

Hiérarchie des fichiers modèles

L'API WordPress se basera sur l'URL de la page à afficher pour déterminer le type de page à afficher : page d'accueil, page d'un article, page de catégorie, etc. Il saura ainsi quel fichier modèle il doit appeler.

Notez que tous les fichiers modèles ne sont pas nécessairement appelés par l'API WordPress. Certains sont appelés par un autre fichier modèle. Par exemple, le fichier index.php pourra appeler header.php, footer.php et sidebar.php. Dans plusieurs thèmes, le fichier sidebar.php appellera searchform.php.

Il existe une hiérarchie dans les fichiers modèles WordPress. Voici quelques exemples de la logique que WordPress suivra pour choisir le fichier à afficher :

  • Si WordPress comprend qu'il doit afficher la page d'accueil :
    • il recherchera la présence du fichier modèle home.php;
    • s'il ne le trouve pas, il recherchera index.php.
  • Si WordPress détecte que la page à afficher correspond à un article :
    • il recherchera le fichier single.php;
    • s'il ne le trouve pas, il affichera index.php.
  • Lorsqu'il doit afficher une page (rappel : on peut créer des pages et des articles) :
    • il tentera d'afficher le modèle précis pour lequel la page a été bâtie (on pourrait par exemple avoir un modèle à deux colonnes et un autre à une seule colonne);
    • si c'est impossible, il affichera page.php;
    • en son absence, il affichera index.php.
  • Si WordPress doit afficher les articles d'une catégorie :
    • il recherchera category.php;
    • en son absence, il recherchera archive.php;
    • si ce fichier n'est pas présent lui non plus, c'est encore une fois index.php qui sera affiché.

Le schéma suivant, tiré de http://codex.wordpress.org/fr:Hi%C3%A9rarchie_des_fichiers_mod%C3%A8les, montre la hiérarchie des fichiers modèles :

hiérarchie des fichiers modèles

Fonctions personnalisées du thème : functions.php

Un thème permet de définir à la fois l'apparence et les fonctionnalités d'un site WordPress. Le gros des fonctionnalités sera codé dans le fichier functions.php. Ce fichier sera placé dans le dossier du thème :

www\votresite\wp-content\themes\nomdutheme

Notez que la présence du fichier functions.php pour un thème donné est optionnelle.

La feuille de style : style.css

Alors que les balises HTML sont générées par les fichiers modèles (et possiblement par des fonctions codées dans functions.php), leur apparence sera gérée par une feuille de style. Pour un site WordPress, la feuille de style s'appellera toujours style.css. Ce fichier sera présent dans le dossier du thème :

www\votresite\wp-content\themes\nomdutheme

La présence du fichier style.css est obligatoire.

Image représentant le thème dans le tableau de bord

Dans le tableau de bord WordPress, chaque thème est représenté par une image.

Pour personnaliser l'image de votre thème, faites une capture d'écran que vous nommerez screenshot.png. Ce fichier doit être placé dans le dossier du thème :

www\votresite\wp-content\themes\nomdutheme

Le nom du thème et le nom de l'auteur apparaissant sous l'image sont tirés de l'entête standard placé en haut de la feuille de style.

Aperçu des thèmes dans le tableau de bord WordPress

Pour plus d'information

« Stepping into Templates ». Codex WordPress. http://www.microsofttranslator.com/bv.aspx?from=en&to=fr&a=http%3A%2F%2Fcodex.wordpress.org%2FStepping_Into_Templates

« fr:Hiérarchie des fichiers modèles ». Codex WordPress. http://codex.wordpress.org/fr:Hi%C3%A9rarchie_des_fichiers_mod%C3%A8les

« Hiérarchie du modèle ». Dannie Fred. http://tutorir.blogspot.ca/2012/09/tutoriel-wordpress-hierarchie-du-modele.html

« WordPress de A à Z — F comme Functions.php ». CSS 4 Design. http://css.4design.tl/wordpress-a-z-functions-php

« Functions File Explained ». Codex WordPress. http://codex.wordpress.org/Functions_File_Explained

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories