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.
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 ?
Un thème WordPress a également d'autres avantages.
Pourquoi construire votre propre thème ? C'est la vrai question.
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.
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.
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.
Au minimum, un thème WordPress est constitué de deux fichiers :
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 :
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.
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.
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.
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;
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.
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.
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.
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:
</form>). Its second parameter must be $post->ID. Example plugin use: display a comment preview.For a real world usage example, you'll find these plugin hooks included in the default theme's templates.
Please be clear about the following in your documentation (a README file included with your Theme helps many users over any potential stumbling blocks):
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.
To help you develop your WordPress Theme, here are some resources and references.