Style.css : la feuille de style
Ce fichier doit s’appeler style.css et il est indispensable. Pourquoi ? Il contient les informations relatives au thème. Elles sont écrites sous forme de commentaire CSS en haut de la feuille de style :
/* Theme Name: Le Guide WordPress Theme URI: https://wordpress.bbxdesign.com Author: bbx Author URI: https://bbxdesign.com Description: Le thème du Guide WordPress. Version: 1.0 Tags: blue, orange, light, three-columns, left-sidebar, responsive-layout, editor-style, featured-images, full-width-template, sticky-post, theme-options, translation-ready, accessibility-ready */
Screenshot.png : 880×660
Le screenshot s’affiche dans l’administration. Il n’est pas indispensable mais pratique pour activer le bon thème.
Les templates
C’est quoi un template ?
Un template, c’est un fichier PHP est appelé par WordPress pour générer du HTML.
Créons par exemple, un fichier index.php qui mélange du PHP et du HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon premier tutoriel</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
</head>
<body>
<h1>Bienvenue sur le site <?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</body>
</html>
Le code est principalement du HTML dans lequel on a ajouté 3 zones de PHP pour insérer du contenu variable.
Il s’agit en l’occurence de la fonction <?php bloginfo(); ?> avec 3 paramètres différents :
- stylesheet_url : l’url de la feuille de style, soit blog.fr/wp-content/theme/mon-theme/style.css
- name : le nom du site (paramétrable dans l’administration)
- description : le slogan
Cet exemple de index.php est très pauvre en code, certes, mais il est suffisant. C’est surtout pour vous montrer ce qu’est un template.
Par souci d’espace horizontal, j’utiliserai des double-espace en lieu et place des tabulations habituelles pour indenter le code. Même si je préfère les tabulations car elles sont plus pratiques en HTML, la lisibilité du code prévaut ici.
Plan d’un blog
Pour comprendre le système de templates, il faut avoir en tête le plan d’un site, et particulièrement celui d’un blog en premier abord. Voici par exemple le plan fictif d’un blog basique, avec le type d’url correspondante.
- Accueil
blog.fr- Archives de l’année
blog.fr/2011 - Archives du mois
blog.fr/2011/12 - Archives du jour
blog.fr/2011/12/25 - Catégorie
blog.fr/category/geek - Mot-clef
blog.fr/tag/iphone - Résultats de recherche
blog.fr/?s=cadeau- Billet
blog.fr/2011/12/25/un-iphone-pour-noel
- Billet
- Archives de l’année
- A propos
blog.fr/a-propos - 404
blog.fr/404
Ce qu’il faut comprendre c’est qu’il y a une hiérarchie dans le site : on commence par la page d’accueil, on peut aller directement vers un billet ou bien passer par les archives mensuelles, faire une recherche, tomber sur une page qui n’existe pas…
Selon la page sur laquelle vous souhaitez aller, WordPress va utiliser un template correspondant :
| Page appelée | URL | Template utilisé |
|---|---|---|
| Accueil | blog.fr |
home.php |
| Archive (annuelle,mensuelle ou journalière) |
blog.fr/2011blog.fr/2011/12blog.fr/2011/12/25 |
date.php |
| Catégorie | blog.fr/category/geek |
category.php |
| Mot-clef | blog.fr/tag/iphone |
tag.php |
| Résultat de recherche | blog.fr/?s=cadeau |
search.php |
| Post | blog.fr/2011/12/25/un-iphone-pour-noel |
single.php |
| Page | blog.fr/a-propos |
page.php |
| 404 | blog.fr/fjeqoisjfmoqsijfmoeqisj |
404.php |
Sachez qu’il existe bien plus de templates que ça, mais l’essentiel est là. Ce système permet de différencier le contenu des pages HTML générées selon l’url visitée par l’internaute.
Aussi, le nom de ces templates est très important : WordPress s’en sert pour appeler le bon fichier.