Cet article est une traduction du tutoriel How To Create a WordPress Them rédigé par Ian Stewart, l’auteur du framework WordPress Thematic disponible sur son site ThemeShaper. Avec son aimable autorisation et mes remerciements.

Et bien nous entrons dans le vif du sujet concernant le développement d’un thème WordPress : le codage de la structure HTML.

Les objectifs de la structure HTML

Lorsque vous développez un site web vous devez avoir deux objectifs en tête : code léger et code significatif. C’est-à-dire, utiliser aussi peu de balises possibles tout en s’assurant que le code soit significatif par l’utilisation sémantique des noms de classes et d’ID qui réfèrent au contenu, et non à l’apparence (class= « zone-widgets » à la place de class= « barre latérale gauche»).

Cependant, lorsque vous codez un thème WordPress (ou n’importe quel modèle pour tout outil de gestion de contenu, CMS) vous devez trouver l’équilibre entre un code léger, avec une structure minimale, et ce que l’on appelle Divitis ; c’est-à-dire intégrer de nombreux éléments div inutiles dans le code. En d’autres mots, le moins possible de code non significatif.

Vous avez certainement déjà vu des balises div si vous avez regardé le code d’un site web ou d’un thème WordPress. Imaginez-les comme des conteneurs de code HTML – conteneurs très utiles pour mettre en forme le code HTML avec CSS. Evidemment, nous allons en utiliser quelques uns, pas trop et en évitant ceux non significatifs. Nous voulons également une structure suffisamment développée – en utilisant les balises div – pour permettre de réutiliser le code pour plusieurs blogs ou designs. Nous voulons développer du code réutilisable.

La structure HTML pour un Thème WordPress
Regardons en détail la structure HTML que nous allons utiliser pour le corps de notre thème WordPress :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
</head>
 
<body>
<div id="wrapper" class="hfeed">
	<div id="header">
		<div id="masthead">
 
			<div id="branding">
			</div><!-- #branding -->
 
			<div id="access">
			</div><!-- #access -->
 
		</div><!-- #masthead -->	
	</div><!-- #header -->
 
	<div id="main">
		<div id="container">
 
			<div id="content">
			</div><!-- #content -->
 
		</div><!-- #container -->
 
		<div id="primary" class="widget-area">
		</div><!-- #primary .widget-area -->
 
		<div id="secondary" class="widget-area">
		</div><!-- #secondary -->
	</div><!-- #main -->
 
	<div id="footer">
		<div id="colophon">
 
			<div id="site-info">
			</div><!-- #site-info -->
 
		</div><!-- #colophon -->
	</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

Collez ce code dans votre éditeur de texte et sauvegardez le pour le conserver sous la main. Nous allons l’utiliser plus tard lorsque nous mettrons en place la structure des fichiers du thème. Mais avant cela, nous devons passer en revue quelques notions.

Un aperçu rapide du code HTML du thème WordPress

Tout d’abord, l’attribut classe de la page (id=wrapper), hfeed. hfeed fait partie du schéma Microformat hatom. En clair, cela signifie qu’ajouter la classe hfeed à notre page indiquera à tout système lisant notre site (par exemple les robots d’indexation ou d’autres services) que notre site publie du contenu syndiqué, des articles de blog. Vous allez voir beaucoup de noms de classe comme celui-ci par la suite.

En regardant la structure des div pour l’entête (header) et le pied de page (footer) vous avez certainement remarqué ce que j’appelle une structure interne-externe. C’est un des seuls endroits (par chance) où notre structure pourrait être accusée de Divitis. Potentiellement. En empruntant des noms de class du monde de la publication (WordPress fait de nous des publicateurs de contenu évidemment), j’ai essayé d’ajouter de la signification aux balises qui seront incluses dans ces conteneurs. Les balises qui seront ajoutées dans ce tutoriel et celles qui pourraient l’être dans le futur. De plus, pour faire certaines mises en forme, nous aurons besoin de cette structure. C’est aussi bien de l’ajouter dès à présent et de le faire correctement.

Dans la partie principale de notre code HTML vous remarquerez que nous avons deux blocs de widgets qui sont placées après le bloc de contenu. C’est un point clé. Cela ne permet pas seulement d’afficher le contenu principal avant les barres latérales (sidebars) aux yeux des moteurs de recherche (et des navigateurs) mais cela permet également d’utiliser une technique CSS à base de marges négatives pour obtenir un thème en 1, 2 ou 3 colonnes en seulement quelques lignes de CSS.

Cette structure HTML va donc rendre votre thème WordPress prêt pour le futur et vous donner des possibilités puissantes de mise en forme CSS. C’est un bon point.

Cet article fait partie du tutoriel Créer un Thème WordPress :

  1. Introduction
  2. Outils de Développement
  3. Structure HTML du Thème
  4. Structure des Dossiers et Templates
  5. Template Header
  6. Template Index
  7. Templates Single, Attachment et 404
  8. Template Comments
  9. Template Search et Page
  10. Template Archives, Auteur, Catégories et Mots clés
  11. Template Sidebar
  12. Design du Thème, Initialisation et Construction CSS

flattr this!