Vous ne trouvez pas de thème qui correspond à vos goûts et à vos besoins? Avec une certaine habileté en CSS, HTML et une base en PHP, il est possible de tenter l’aventure de la conception de son propre thème.
L’anatomie d’un thème WordPress
Joost de Valk de yoast.com a très bien représenté sa notion d’anatomie d’un thème WordPress en images (référence : http://yoast.com/wordpress-theme-anatomy/)
Alors, avant de commencer à concevoir un thème, il est pertinent d’examiner son fonctionnement sur WordPress. D’abord, il faut faire la différence entre thèmes et modèles templates. Un thème WordPress est composé de répertoires de fichiers modèles templates qui contrôlent une partie spécifique du thème. Il représente également la collection de fichiers modèles précisant l’apparence de la page au navigateur.
En résumé, un thème peut se composer des fichiers suivants, mais on peut aussi utiliser uniquement les fichiers style.css et index.php pour créer un thème :
- sytle.css
- index.php
- single.php
- page.php
- archive.php
- category.php
- tag.php
- comments.php
- functions.php
Une façon simple de personnaliser l’aspect d’un site : le thème enfant « child-theme »
WordPress.org définit le thème enfant comme
« un thème qui hérite des fonctionnalités d’un autre thème, appelé parent et qui vous permet de modifier et/ou d’ajouter des nouvelles fonctionnalités au thème parent.»
L’utilisation d’un thème enfant peut vraiment accélérer le processus de développement, car on démarre avec la base d’un thème existant. Par exemple, Twenty Eleven, le thème de base qui vient d’office avec WordPress peut faire une excellente base pour un thème enfant. Avec un autre thème, il faut s’assurer que le code est bien construit, il est préférable de partir d’une bonne base.
NOTE : Notons en outre que pour chaque personnalisation d’un thème WordPress, il vaut mieux partir d’un thème enfant et ne jamais éditer le code du thème lui-même. De cette façon, lors d’une mise à jour du thème original les modifications ne seront pas effacées.
La façon la plus rapide, pour commencer la conception de votre thème enfant, est d’utiliser un plugin One-Click Child Theme (http://wordpress.org/extend/plugins/one-click-child-theme/). En activant d’abord le thème parent choisi, il sera ensuite permis d’installer et d’activer le plugin, puis de cliquer sur CHILD THEME sous le menu APPARENCE du tableau de bord WordPress.
Évidemment, il est également possible de partir de zéro et d’éditer le code soi-même. Il faut alors ouvrir votre éditeur de codes habituel et y entrer les informations suivantes (le thème Twenty Eleven sert ici de thème parent) :
/*
Theme Name: Nom de votre thème enfant
Description: La description de votre thème.
Author: Votre nom
Author URI: http://www.votresiteweb.com/
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
La personnalisation de base des CSS
Éditer le fichier style.css peut se fairedirectement dans l’éditeur de WordPress ou en installant un meilleur éditeur de code comme Advanced Code Editor (http://wordpress.org/extend/plugins/advanced-code-editor/). Il s’agit d’un plugin qui affiche les fichiers .php et .css avec un code de couleurs, ce qui simplifie la modification du code. Bien entendu, un éditeur de codes (comme NotePad++) peut aussi être utilisé.
Toutefois, il importe de laisser le code @import url (« ../twentyelevent/style.css) dans le haut du fichier css, sinon l’importation des styles du thème parent ne seront pas utilisés.
Une fois l’éditeur choisi, certains éléments de base, comme la couleur de fond, le menu principal, la typographie et d’autres éléments qui donneront un nouveau look au thème enfant, pourront être définis.
Il pourrait être utile d’installer un plugin comme Firebug (http://getfirebug.com/) pour Firefox ou l’inspecteur Web inclus dans Google Chrome, en vue de bien identifier les parties du thème à changer. Cela permet de cliquer sur une partie de la page et afficher le div et les CSS qui définissent le style. Les modifications du CSS directement dans Firebog et la visualisation des résultats instantanément dans votre navigateur deviennent ainsi possibles. Lorsque le résultat convient, un copier-coller de votre code dans le fichier sytle.css peut être exécuté.
Couleur de fond du contenu principale
À titre d’exemple, ce CSS qui modifie la couleur de fond du contenu principale qui utilise un drop shadow (http://www.css3.info/preview/box-shadow/) :
#page {
background: #ffffff;
-moz-box-shadow: 0 0 10px #67949c;
-webkit-box-shadow: 0 0 10px #67949c;
box-shadow: 0 0 10px #67949c;
}
Typographie
Une touche de créativité peut être apportée simplement en ajoutant une typographie différente de ce qu’on est habitué de voir. Un grand choix de typographies gratuites et optimisées pour le Web se trouve chez Google Web fonts (http://www.google.com/webfonts).
Pour ce faire, il suffit de trouver le lien de la Google font (par exemple : http://fonts.googleapis.com/css?family=Mako);) et de l’ajouter comme une importation de CSS dans le fichier style.css
Cet exemple avec deux Google font choisies (Mako et Great Vibes) le démontre bien:
@import url(http://fonts.googleapis.com/css?family=Mako|Great+Vibes);
Le fichier style.css devrait maintenant ressembler à cela :
/*
Theme Name: bleu
Description: child-theme modifier par Annie
Author: admin
Template: twentyeleven
(optional values you can add: Theme URI, Author URI, Version)
*/
@import url("../twentyeleven/style.css");
@import url(http://fonts.googleapis.com/css?family=Mako|Great+Vibes);
#page {
background: #ffffff;
-moz-box-shadow: 0 0 10px #42565C;
-webkit-box-shadow: 0 0 10px #42565C;
box-shadow: 0 0 10px #42565C;
}
body, input, textarea, p {
color: #000000;
font-family: 'Mako', arial, serif;
}
p {
font-size: 14px;
line-height: 24px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Great Vibes', arial, serif;
}
Déplacer le menu de navigation principale
Une autre personnalisation intéressante est de déplacer le menu de sa position originale, sous l’image, vers le haut à droite, près du titre du blogue. Ce code doit alors être ajouté :
#access {
clear: both;
display: block;
float: right;
margin: 0 auto 6px;
position: relative;
top: -410px;
width: 600px;
background: none;
box-shadow: none;
}
#access a {
font-family: 'Great Vibes', 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 30px;
line-height: 40px;
padding: 12px 18px 10px;
color:#D1DC00;
}
#access li {
background-color: #283E42;
margin-right: 10px;
}
#access li:hover > a, #access a:focus {
background: #D1DC00;
color: #65BC46;
-moz-box-shadow: 0 0 3px 3px #42565C;
-webkit-box-shadow: 0 0 3px 3px #42565C;
box-shadow: 0 0 3px 3px #42565C;
}
Par la suite, pour suivre la stylique (design graphique) du menu, il est opportun de changer la typographie de la sidebar et d’ajouter une couleur de fond avec les coins arrondis, ce qui pourrait ressembler à :
#secondary {
background-color: #283E42;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
margin-right: 4%;
padding: 22px;
width: 17.5%;
}
.widget a {
font-weight: 400;
font-family: 'Mako', sans-serif !important;
color:#D1DC00;
}
.widget-title {
color: #ffffff;
line-height: 1.5em;
text-transform: none;
font-size:28px;
}
.widget ul li {
color: #c7c7c7;
}
Il apparaît essentiel de souligner que l’ajout du code !important à la fin d’une déclaration CSS, donne plus de poids à cette valeur. La raison pour laquelle, il est utilisé vient du fait qu’un CSS attribue un poids à chacun des styles en fonction de l’endroit où il apparaît dans le fichier .css. Donc, !important indique que la propriété de ce style deviendra la valeur la plus important, surclassant toutes les autres valeurs du fichier .css
La création d’un thème enfant s’avère beaucoup plus simple que celle d’un original. En effet, il suffit que de quelques notions de CSS pour créer le thème désiré. De plus, cette façon évite la traduction, car le thème Twenty Eleven possède déjà ses fichiers fr_FR.po et fr_FR.mo.
Un bon thème WordPress c’est rarement un thème gratuit
En bout de ligne, il n’est pas si simple de trouver le thème idéal dans la langue de son choix et avec des fonctionnalités qui répondent aux besoins. Pour ceux qui ne veulent pas investir de leur temps pour créer leur propre thème enfant, il peut être avantageux de payer pour un thème de qualité. Mais, comme le dit si bien le site de WordPress.org : « Pourquoi devriez-vous construire votre propre thème WordPress? C’est la vraie question.
- C’est une occasion pour en apprendre davantage sur les CSS,HTML et PHP.
- C’est une occasion de mettre votre expertise avec CSS, HTML,PHP et de travailler.
- C’est créatif.
- C’est amusant (la plupart du temps).
- Si vous décidez de le distribuer gratuitement au public, vous aurez le sentiment de partager et de donner quelque chose en retour à la Communauté WordPress (ok, et le droit de se vanter un peu) »
Ressources :
- Vous pouvez télécharger le thème Twenty eleven gratuitement (normalement il vient avec WordPress)
- Mon fichier CSS Thème enfant
- J’utilise Notepad ++ comme éditeur
- FileZilla comme logiciel FTP
