WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

FR:Theme Development

L'article qui suit traite du développement et de la conception de votre propre thème WordPress. si vous désirez en savoir plus au sujet de l'installation et de l'utilisation des thèmes, revoyez la documentation FR:Using Themes.

Vous pouvez réaliser des thèmes pour votre propre compte ou bien pour les distribuer. Ce sujet est différent de FR:Using Themes car il concerne l'aspect technique qui consiste à écrire du code pour construire votre propre thème plutôt que de l'activation des thèmes ou l'obtention de nouveaux thèmes.

Pourquoi des thèmes WordPress

Les thèmes WordPress sont des fichiers et des styles qui, ensembles, constituent la présentation d'un site WordPress. Chaque thème peut être différent des autres, et la grande variété de thèmes permet aux utilisateurs de changer rapidement la présentation de leur site. Dans ce cas, pourquoi créer votre propre thème WordPress ?

  • Pour créer votre propre site WordPress, avec sa propre présentation.
  • Pour profiter des modèles, des modèles de marqueur et de la fameuse boucle WordPressafin de générer différents résultats et présentations pour les pages Web.
  • Pour fournir des modèles en plus pour des fonctionnalités spécifiques, telles que les pages de catégories et les résultats d'une recherche.
  • Pour basculer rapidement entre deux présentations de site ou pour permettre à vos utilisateurs de changer rapidement leur vision du site par le biais de modules de changement de thème.
  • Créer des thèmes WordPress pour que d'autres utilisateurs puissent apprécier votre travail.

Un thème WordPress a également d'autres avantages.

  • Il sépare la présentation (les fichiers modèles) des fichiers système. Ainsi, une mise à jour du site se fera sans changements radicaux dans la présentation visuelle.
  • Il permet des choix de présentation et des résultats uniques pour chaque thème.
  • Il permet à un utilisateur WordPress de créer un site visuellement agréable sans connaissance CSS, HTML et PHP.

Pourquoi construire votre propre thème ? C'est la vrai question.

  • C'est une chance d'en apprendre plus à propos de CSS, HTML et PHP.
  • C'est une chance de mettre votre expertise CSS, HTML et PHP à contribution.
  • C'est créatif.
  • C'est amusant (la plupart du temps).
  • Si vous publiez votre thème libre de droits, vous pourrez vous dire que vous avec partagé et donnez quelque chose en retour à la communauté WordPress.

Anatomie d'un thème

Les thèmes WordPress sont enregistrés dans des sous-répertoires situés sous wp-content/themes/. Ce répertoire contiendra tous les fichiers du thème, fichiers de style CSS, fichiers modèles ainsi que les images. Par exemple, un thème nommé "test" sera enregistré sous wp-content/themes/test/.

WordPress inclue deux thèmes à l'installation, un thème "Classique" et un thème "Par défaut". Chacun est différent et utilise différentes fonctions et marqueurs pour générer le contenu et la présentation des pages Web. Examinez soigneusement ces fichiers pour avoir une meilleure idée de la façon de créer votre propre thème.

Les thèmes WordPress sont constitués de deux ensembles de fichiers, en plus des images. Le premier est la feuille de style CSS, nommée style.css, qui contrôle la présentation visuelle des pages. Le second est constitué des modèles de page, qui contrôle la façon dont les informations présentes dans la base de données seront affichées sur la page. Examinons ceux-ci un par un.

Aide-mémoire sur les thèmes

Feuille de style du thème

La feuille de style, style.css, doit fournir des détails sur le thème sous la forme de commentaires. En aucun cas deux thèmes ne doivent partager les mêmes détails dans leur commentaires car cela conduirait à des problèmes dans l'affichage des dialogues de choix du thème. Si vous faites votre propre thème en dupliquant un thème existant, assurez vous de changer ces informations en premier.

Ce qui suit un un exemple des premières lignes de la feuille de style, appelées entête de la feuille de style, pour un thème nommé "Rose" :

/*   
Theme Name: Rose
Theme URI: Homepage du thème
Description: Une courte description
Author: votre nom
Author URI: votre URL
Template: Utiliser cette ligne si vous utilisez un thème parent
Version: numéro de version optionnel
.
Commentaires généraux / Information de licences si applicable.
.
*/

Le thème le plus simple inclut uniquement un fichier style.css et des images. Pour créer un tel thème, vous devez spécifier un ensemble de modèles duquel hériter pour les utiliser dans votre propre thème, en édidant la ligne Template: du fichier style.css. Par exemple, si vous voulez que le thème "Rose" hérite des modèles du thème "Test", vous saisirez Template: test dans les commentaires du thème "Rose". Ainsi, "Test" sera le parent de "Rose", qui lui ne contiendra que le fichier style.css et les images associées, le tout situé dans le répertoire wp-content/themes/Rose. Notez que spécifier un thème Parent vous fera hériter de tous les modèles de ce thème ; un fichier modèle présent dans le répertoire du thème Enfant sera purement ignoré.

Les lignes de commentaires dans l'entête du fichier style.css sont indispensables pour que WordPress soit capable d'identifier le thème et de l'afficher dans le panneau d'administration, Gérer les thèmes comme un thème disponible parmi les autres thèmes installés.

Note : Lors de la définition d'un thème Parent, dans la section Template: de l'entête, vous devez utiliser le nom du répertoire du style. Par exemple, pour utiliser le thème par défaut de WordPress, n'écrivez pas Template: WordPress Default mais Template: default, qui est le nom du répertoire pour ce thème.

Fichiers modèles du thème

Les modèles sont des fichiers PHP utilisés pour générer les pages demandées par les visiteurs. Regardons quels sont les différents modèles qui peuvent être définis dans un thème.

WordPress vous permet de définir des modèles séparés pour les différents aspects de votre blog ; cependant, il n'est pas nécessaire d'avoir tous ces fichiers présents pour que votre blog fonctionne correctement. Les modèles sont choisis et générés en fonction d'une hiérarchie, selon les fichiers disponibles pour un thème particulier. En tant que développeur de thème, vous pouvez choisir les possibilités de personnalisation que vous voulez en utilisant ces modèles. Par exemple, un cas extrême, vous pourriez utiliser uniquement un seul fichier modèle, nommé index.php, comme modèle pour toutes les pages de votre blog. Un usage plus courant est d'avoir différents modèles qui génèrent différents résultats, pour autoriser le maximum de personnalisation.

Les modèles de base

Au minimum, un thème WordPress est constitué de deux fichiers :

  • style.css
  • index.php

Le modèle index.php est unique et souple. Il peut être utilisé pour inclure toutes les références aux pages d'entête, de barre latérale, de pied de page, de contenu, de catégories, d'archives, de recherche et d'erreur de votre site. Ou, il peut être divisé en modules, chacun prenant en charge une partie du travail. Si vous ne fournissez aucun autre fichier modèle, WordPress utilisera les fichiers par défaut. Par exemple, si vous n'avez pas de fichier comments.php ou comments-popup.php, WordPress utilisera automatiquement les fichiers wp-comments.php and wp-comments-popup.php. Ces modèles par défaut ne s'accorderont pas forcément parfaitement à votre thème, ce qui fait que vous préfèrerez certainement fournir les vôtres.

Si vous voulez divisez le fichier principal index.php en plusieurs fichiers modèles, comme montrre dans le thème par défaut de WordPress, vous pouvez. Une telle division est optionnelle. Les fichiers supplémentaires peuvent inclure ces fichiers de base :

  • header.php
  • sidebar.php
  • footer.php
  • comments.php
  • comments-popup.php

Ce sont les fichiers de base qui font un thème. Placez les avec les fichiers style.css et index.php dans leur propre sous-répertoire, sous wp-content/themes/, et vous obtenez un thème.

En utilisant des fichiers modèles supplémentaires, vous pouvez mettre des marqueurs de modèles dans le fichier maître index.php pour inclure ces fichiers là ou vous vous qu'ils apparaissent dans la page web finale.

  • Pour inclure l'entête, utilisez le marqueur get_header()
  • Pour inclure la barre latérale, utilisez le marqueur get_sidebar().
  • Pour inclure le pied de page, utilisez le marqueur get_footer().


Voici un exemple d'utilisation de ces inclusions :


<?php get_sidebar(); ?>

<?php get_footer(); ?>

Pour plus d'information sur comment ces différents modèles s'utilisent et comment générer différentes informations à l'intérieur, lisez la documentation sur les modèles.

Modèles basés sur des requêtes

WordPress peut charger différents modèles pour différents types de requêtes. Il le fait au travers de la hiérarchie de modèles incluses, ou au travers de marqueurs conditionnels à l'intérieur de la boucle, telle que celle présente dans le fichier index.php.

En utilisant la hiérarchie de modèles, si votre thème fourni un fichier nommé category.php et qu'une catégorie est demandé, le fichier category.php sera chargé à la place du fichier index.php. Si category.php n'est pas présent, index.phpsera utilisé comme d'habitude.

Si vous désirez créer un modèle pour une et une seule catégorie, de telle manière que seul l'identifiant de cette catégorie génèrera une page différente (et donc que toutes les autres catégories utiliseront les fichiers category.php ou index.php), créez un fichier nommé tt>category-#.php</tt>, en remplaçant "#" par le numéro identifiant la catégorie désirée (ce numéro peut être trouvé dans Articles >> Catégories). Si vous créez un fichier category-6.php, alors la catégorie 6 sera affichée avec ce fichier à la place de category.php. Pour plus d'informations sur ce processus, voir [[Category Templates]|modèles de catégorie].

Pour générer un modèle différent en se basant sur l'utilisation de marqueurs conditionnels ou d'une requête, il faut que les conditions sont remplies. Dans ce cas, ce modèle sera utilisé par WordPress, autrement on reviendra au fichier suivant selon la hiérarchie des modèles.

Par exemple, pour générer une feuille de style différente pour un artile trouvé sous une catégorie spécifique, le code pourra ressembler à cela :

<?php
if (is_category(9)) {
        // looking for category 9 posts
include(TEMPLATEPATH . '/single2.php');
} else {
        // put this on every other category post
include(TEMPLATEPATH . '/single1.php');
        }
?>

Ou, en utilisant une requête :

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single2.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>

Ainsi, si la condition ou la requête sont remplies, l'article de la catégorie 9 sera affiché en utilisant le fichier single2.php. Sinon, le fichier utilisé sera single1.php.

Ces requêtes conditionnelles ne sont pas limitées aux articles. Vous pouvez également créer différents modèles pour différents Pages. Cliquez pour plus de détails.

Liste des fichiers modèles d'un thème

Voici la liste des fichiers modèles reconnus par WordPress. Bien sur, votre thème peu contenir d'autres fichiers CSS, images ou autres. Pensez seulement que les fichiers suivants ont une signification spéciale pour WordPress;

style.css
La feuille de style principale. Elle doit être inclue avec votre thème.
index.php
Le modèle principal. Si votre thème fourni ses propres modèles, le fichier index.php doit être présent.
comments.php
Le modèle de commentaires. S'il est absent, comments.php du thème par défaut est utilisé.
comments-popup.php
Le modèle de commentaires en pop-up (dans une fenêtre séparée). S'il est absent,, comments-popup.php du thème par défaut est utilisé.
home.php
le modèle de page d'accueil.
single.php
Le modèle d'article seul, utilisé quand un article précis est demandé. Pour celui-ci et tous les modèles suivants, index.php est utilisé si le fichier est absent.
page.php
Le modèle de Page. Utilisé quand une Page est demandée.
category.php
Le modèle de catégories. Utilisé quand une catégorie est demandé.
author.php
Le modèle auteur. Utilisé quand un auteur est demandé.
date.php
Le modèle de date. Utilisé quand une date ou une heure est demandée. Année, mois, jour, heure, minute, seconde.
archive.php
Le modèle d'archive, utilisé quand un auteur, une date, une catégorie est demandé. Si category.php, author.php ou date.php, ils seront utilisés à la place de archive.php.
search.php
Le modèle de recherche, utilisé pour les recherches.
404.php
Le modèle 404 page non trouvée. Utilisé quand WordPress ne peut pas trouver d'article ou de page qui correspondent à la demande.


Ces fichiers ont une signification spéciale pour WordPress car ils sont utilisés en remplacement de index.php, à condition qu'ils soient disponibles et que le marqueurs conditionnels correspondant (autrement dit is_*(); function) retourne vrai. Par exemple, si un seul article est affiché, la fonction is_single() retourne "vrai" et, si un fichier modèle single.php existe pour le thème actif, ce modèle est utilisé pour générer la page.

Referencing Files From a Template

The WordPress Default Theme (based on Michael Heilemann's Kubrick layout for WordPress 1.2) provides a good example of how queries are mapped onto templates.

The code <?php bloginfo('template_directory'); ?> inserts the URL of the template directory into the template output. You can append any additional URI information to this output to reference files in your Theme.

The code <?php bloginfo('stylesheet_directory'); ?> inserts the URL of the directory that contains the current Theme stylesheet into the template output. You can append any additional URI information to this output to reference files for your Theme, specifically those that are used by the stylesheet.

The constant TEMPLATEPATH is a reference to the absolute path to the template directory for the current Theme (without the / at the end).

Note that URIs that are used in the stylesheet are relative to the stylesheet, not the page that references the stylesheet. This obviates the need to include PHP code in the CSS file to specify directories. For example, if you include an images/ directory in your Theme, you need only specify this relative directory in the CSS, like so:

h1 { background-image: URL(images/my_background.jpg); }

It is a good practice to use URIs in the manner described above to reference files from within a template, since, then your template will not depend on absolute paths.

Defining Custom Templates

It is possible to use the WordPress plugin system to define additional templates that are shown based on your own custom criteria. This advanced feature can be accomplished using the template_redirect action hook. More information about creating plugins can be found in the Plugin API reference.

Plugin API Hooks

When developing themes, it's good to keep in mind the specialized group of Plugin API functions listed below. These plugin hooks are called as Template Tags, either as a parameter to WordPress' do_action() function:

<?php do_action( 'hook_name' [, optional second parameter] ); ?>

or as functions in their own right (one exception noted below):

<?php hook_name(); ?>

When you include the template-specific hooks in your theme, plugins will be able to run code or display data directly in it, without requiring their own template tag functions be added. So it's important to include these plugin hooks in your templates especially if you plan on redistributing your theme, otherwise you risk breaking important features of a plugin which makes use of one or more of them. See Current Hooks For Actions for a full list of do_action hooks (note that most are not intended as template hooks for plugins).

Template Plugin Hooks:

wp_head
Goes in the HTML <head> element of a theme; header.php template. This hook has no second parameter. Example plugin use: add javascript code.
Usage: <?php do_action('wp_head'); ?>  -or-  <?php wp_head(); ?>
wp_footer
Goes in the "footer" of a theme; footer.php template. This hook has no second parameter. Example plugin use: insert PHP code that needs to run after everything else.
Usage: <?php do_action('wp_footer'); ?>  -or-  <?php wp_footer(); ?>
wp_meta
Typically goes in the <li>Meta</li> section of a theme's menu or sidebar; sidebar.php template. This hook has no second parameter. Example plugin use: include a rotating advert.
Usage: <?php do_action('wp_meta'); ?>  -or-  <?php wp_meta(); ?>
comment_form
Goes in comments.php and comments-popup.php, directly before the comment form's closing tag (</form>). Its second parameter must be $post->ID. Example plugin use: display a comment preview.
Usage: <?php do_action('comment_form', $post->ID); ?>

For a real world usage example, you'll find these plugin hooks included in the default theme's templates.

Theme Development General Guidelines

Please be clear about the following in your documentation (a README file included with your Theme helps many users over any potential stumbling blocks):

  1. Indicate precisely what your Theme and template files will achieve.
  2. Indicate deficiencies in your Themes, if any.
  3. Clearly reference any special modifications or notes to comments within the template and style sheet files and comment modifications, template sections, and CSS styles, especially those which cross template files.
  4. If you have any special requirements, which may include custom RewriteRules, or the use of some additional, special templates, images or files, please explicitly state the steps of action a user should take to get your Theme working.
  5. Try and test your Theme across browsers to catch at least a few of the problems the users of the Theme may find later.
  6. Provide contact information (web page or email), if possible, for support information and questions.

Since the concept of using Themes is currently new to WordPress, the additional effort you put in to make the Themes user-friendly will be greatly appreciated. Take time to read through Designing Themes for Public Release, an article with good tips on preparing your Theme for the public. For criteria on how to release your Theme to the public, see Promoting Your Theme.

References and Resources

To help you develop your WordPress Theme, here are some resources and references.

WordPress Resources

CSS and Layout

Theme and Template Resources

Testing and Validating

General Resources

References

Tools

Plain Text Editors 
A list of plain text editors for all platforms.
Developing_a_Colour_Scheme 
Article on developing a colour scheme for your site.
WordPress Index Builder 
This tool will ask you a series of questions about your site to generate a working WordPress template page and CSS file. Criteria include number of columns and color matching.
Flumpcakes CSS Optimizer 
Optimize your CSS file. Contains a possibly "not safe for work" header image.

Other Resources

This article is marked as in need of editing. You can help Codex by editing it.