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

Le CSS peut être délicat à mettre en œuvre. Mais ça peut aussi être très facile. J’ai reçu pas mal d’aide pour me mettre le CSS en tête quand j’ai commencé et pris un grand plaisir à aider d’autres personnes en retour : avec de bons exemples de code comme base d’apprentissage.

Nous allons donc concevoir les base de développement CSS pour Thème WordPress.

  • une feuille de style qui réinitialise les valeurs CSS par défaut pour tous les navigateurs afin d’avoir une base de travail saine
  • une autre feuille de style qui va reconstruire les bases typographiques de manière intelligente
  • une feuille de style spécialement dédiée aux classes WordPress (permettant de ne pas modifier les deux précédentes pour pouvoir les utiliser dans d’autres projets y compris hors WordPress)
  • une série de 6 feuilles de styles fluides qui permettra de créer les mises en forme de votre choix, chacune étant adaptable pour une largeur fixée.

Tout le code dont nous parlons ici est open-source, sous licence GPL, et accessible à l’adresse Your Theme Project Page. Vous pouvez y voir le code source de l’ensemble des fichiers et l’utiliser comme vous voulez.

La première chose à faire est de créer un dosser « style » dans le dossier de votre Thème. C’est ici que nous mettrons toutes les feuilles de style.

Réinitialiser le CSS

Notre fichier CSS Reset est adapté de Eric Meyer’s famous Reset CSS avec quelques très mineures modifications. En réalité, il reprend tous les attributs typographiques par défaut de tous les navigateurs et… les efface. Vous voilà maintenant avec un truc tout gris.

C’est magnifique.

Cette feuille de style nivelle simplement les comportements des différents navigateurs, vous permettant d’ignorer les excentricités de chacun.

Rien de plus simple pour l’utiliser. Ajoutez les lignes qui suivent à votre fichier style.css, tout en haut, juste après la première section de commentaires.

1
2

/* Reset default browser styles */
@import url('styles/reset.css');

Rechargez votre page et observez ce que fait reset.css dans différents navigateurs (si vous le pouvez). C’est juste magnifiquement brut !

Reconstruire le CSS

Notre feuille de style Rebuild est mon adaptation personnelle des premières versions de la feuille de style typographique de BluePrint, améliorée pour le Projet Thematic. Ce qu’elle fait est d’ajouter astucieusement des rythmes verticaux à la page.

Ce que j’ai essayé avec cette version de ma feuille de style typographique c’est de combiner le meilleur des deux mondes pour la gestion de la typographie web : utiliser les tailles en pixels pour la hauteur des polices, avec des tailles relatives dans la déclaration de base pour le body, et des tailles en ems pour les marges verticales (les paragraphes ou les listes par exemples).

Cela signifie qu’il sera très facile de fixer ultérieurement la taille de la police – sans calculs mathématiques complexes – et d’avoir un enchaînement des éléments typographiques avec un rythme vertical adapté (l’espace vertical entre les éléments comme les paragraphes ou les listes).

Utiliser rebuild.css est également très facile puisqu’il suffit ajouter les lignes suivantes après l’import de reset.css.

1
2

/* Rebuild default browser styles */
@import url('styles/rebuild.css');

Les Styles de Base de WordPress

Il y a des éléments dans WordPress que vous devrez mettre en forme à chaque fois. Ce que j’ai fait c’est de reprendre ces éléments et de les mettre de côté dans un fichier nommé wp.css.

Nous avons donc ici des styles pour mettre toutes les images en float – y compris les légendes et les galeries. Il définit également un comportement pour les blocs de citation. Il vous faudra simplement ajouter une classe à la balise pour indiquer l’alignement à droite (.right) ou à gauche (.left).

Evidemment, vous avez deviné comment appeler wp.css.

1
2

/* Basic WordPress Styles */
@import url('styles/wp.css');

Les Mises en Page

Pour votre nouveau thème, j’ai repris la construction solide des mises en page fournies avec le Thème Sandbox et je les ai adaptées à votre nouvelle structure HTML. Il y en a 6 au total. Chacune est une mise en page fluide (qui s’adapte pour remplir automatiquement la largeur de la page du navigateur) mais chacune peut s’adapter assez facilement à une mise en page avec des largeurs fixes.

Utiliser ces mises en page est très facile. Juste après l’import des feuilles de styles de base, importez l’une des mises en page. Voici par exemple comment importer la mise en page en 3 colonnes, avec le contenu au centre :

1
2

/* Import a basic layout */
@import url('styles/3c-b.css');

La méthode la plus simple pour convertir une de ces mises en page en largeur fixe est d’ajouter une largeur et une marge centrale à la div #wrapper.

1
2
3
4

#wrapper {
  margin: 0 auto;
  width: 960px;
}

Bonus : mettre en forme le menu

Si vous n’êtes jamais partis d’une liste non ordonnée (c’est la balise intelligemment générée par wp_page_menu) pour la mettre en forme de menu, cela peut vous paraître difficile. En bonus, voici donc le code CSS que j’utilise pour créer les menus d’un 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

#access {
	margin: 0 0 1.5em 0;
	overflow: auto;
}
.skip-link {
	position:absolute;
        left:-9000px;
}
.menu ul {
	list-style: none;
	margin: 0;
}
.menu ul ul {
	display: none;
}
.menu li {
	display: inline;
}
.menu a {
	display: block;
	float: left;
}

C’est plutôt simple et cela vous donnera une bonne base de départ. Bonne Chance!

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!