Personnalisez votre thème WordPress avec Brackets et LESS

Personnalisez votre thème WordPress avec Brackets et LESS

La modification du CSS est un aspect important pour personnaliser son site WordPress, notamment lors de la création d’un thème enfant (ou d’un thème). Alors autant mettre toutes les chances de son côté en utilisant les bons outils, avec, en plus, un peu de rigueur.

C’est ce que je vous propose cette semaine, avec le préprocesseur LESS  associé à l’éditeur Brackets.

Personnalisation de votre site

Avec WordPress, vous pouvez créer un thème ou en utiliser un déjà existant pour le personnaliser, notamment sur les espacements, les couleurs, l’agencement, … et ainsi créer un site qui vous correspond.

L’avantage du thème enfant est que vous partez d’une base avec tout le fonctionnel déjà implémenté.

Si coder vous  rebute ou que vous souhaitez gagner du temps, mais que vous voulez garder la main sur la personnalisation, vous pouvez toujours passer par des services de création de site comme à cette adresse ou encore sélectionner un thème WordPress, gratuit ou non, qui réponde à vos besoins sur les sites spécialisés.

Et LESS dans tout ça ?

LESS est un préprocesseur CSS qui permet de pallier une limitation de CSS : il ajoute quelques concepts de programmation comme les fonctions et les variables.

Ainsi, en CSS, si cinq éléments font référence à la même couleur, cette couleur doit être recopiée autant de fois. Si la couleur change, chaque occurrence doit être modifiée.

Avec LESS, il suffit de déclarer une variable pour la couleur et l’utiliser dans nos cinq éléments. En cas de changement, il suffit de changer la valeur de la variable.

Par exemple :

@blue: #2980b9;
.header {
  background-color: @blue;
}
#content {
  color: @blue;
}

Pour le moment, nos navigateurs ne reconnaissent pas ce langage par défaut, même s’il est possible d’inclure un script JavaScript qui va le rendre compatible.

Le mieux pour des raisons d’optimisation est de transformer le code LESS en CSS au moment du développement du thème et de ne fournir que ce dernier.

Des outils en lignes de commande ou graphiques permettent d’effectuer cette transformation, mais je vous propose d’utiliser Brackets.

Et Brackets ?

Je vous avais déjà parlé de Brackets, j’avais même dit qu’il était idéal pour développer le frontend des applications Web. En fait il convient aussi très bien pour faire du PHP, en utilisant des extensions comme WordHint qui ajoute la complétion automatique pour PHP (entre autres) et QuickDocsPHP, qui ajoute PHP à la documentation rapide bien connue des utilisateurs de Brackets .

Tout ça pour dire que Brackets convient aussi très bien pour développer des thèmes et des thèmes enfant pour WordPress.

Enfin bref, c’était une parenthèse, ce qui nous intéresse ici est la partie CSS du thème.

Ainsi, l’extension LESS AutoCompile permet de transformer automatiquement du LESS en CSS à chaque modification de fichier LESS.

L’arborescence du thème

Une bonne pratique avec LESS est de structurer les différents fichiers pour mieux s’y retrouver.

Personnalisez votre thème WordPress avec Brackets et LESS : l'arborescence du thème
L’arborescence du thème
Ici, je travaille sur un thème enfant de Twenty Thirteen.

Le dossier less contient un fichier theme.less et le dossier theme qui contient les différentes sous-parties qui vont composer le CSS final.

Le dossier css contient le résultat compilé, en l’occurrence theme.css généré depuis theme.less.

Cette arborescence et le découpage du thème en sous-parties me convient bien, mais libre à vous de l’adapter à vos besoins et à vos préférences.

Le code LESS

Theme.less

Commençons par le fichier principal, theme.less :

// out: ../css/theme.css, compress: true
 
// Le CSS du thème parent
@import (less) "../../twentythirteen/style.css";
 
// Les variables (couleurs, tailles, ...)
@import "theme/variables.less";
// Les fonctions génériques
@import "theme/mixins.less";
 
// Le style de base
@import "theme/base.less";
// Le style du header
@import "theme/header.less";
// Le style du contenu
@import "theme/content.less";
// Le style du footer
@import "theme/footer.less";

La première ligne est propre à l’extension LESS AutoCompile de Brackets. Elle indique au préprocesseur :

  • d’écrire le résultat de la compilation dans le fichier theme.css qui se trouve à la racine du thème WordPress
  • minifier le CSS généré

La ligne qui concerne Twenty Thirteen permet d’inclure le fichier CSS du thème parent dans le fichier CSS généré et ainsi le combiner automatiquement, sans passer par un @import CSS habituel. C’est bon pour l’optimisation.

Ensuite, les sous-parties sont incluses les unes après les autres.

Variables.less et mixins.less

Le fichier variables.less contient les variables telles que nous l’avons vu plus haut.

// main: ../theme.less
 
@blue: #2980b9;

Encore une fois, la première ligne concerne l’extension. Elle indique qu’au moment de la sauvegarde du fichier, ce n’est pas variables.less qui doit être compilé, mais theme.less qui inclue variables.less.

La suite du fichier contient les variables.

Le principe est le même pour mixins.less, qui contient les mixins, tout simplement.

Les autres fichiers

Les autres fichiers contiennent les styles à appliquer à chaque partie du thème.

Découper par sous-partie permet d’avoir des fichiers plus petits, et donc plus simples à comprendre et à maintenir.

Cette structuration serait moins recommandée en travaillant directement avec CSS, comme la multiplication des fichiers implique un plus grand nombre de requêtes HTTP. Avec LESS, tous les fichiers sont combinés dans le fichier principal.

Un exemple de fichier header.less :

// main: ../theme.less
 
.site-title {
  color: @blue;
  text-transform: uppercase;
  line-height: 60px;
  padding: 0;
  margin-top: 20px; }
.site-description {
  color: @blue;
}

Le lien avec WordPress

Maintenant, il reste à déclarer notre fichier theme.css à WordPress.

Mais au fait, pourquoi ne pas avoir généré directement le résultat dans style.css, nécessaire pour WordPress lors de la création d’un thème ?

La réponse est simple, il s’agit d’une limitation de LESS. Dans sa version actuelle, il ne permet pas de générer de commentaire entre /* et */. Ce sont justement ces commentaires qui sont lus par le gestionnaire de thèmes de WordPress pour l’ajouter à sa liste.

Nous voilà donc contraints de passer par un fichier theme.css qui contient la véritable feuille de style de notre thème, mais le fichier style.css est toujours présent pour des raisons administratives. Et il fait le strict minimum :

/*
Theme Name: Mon thème enfant
Template: twentythirteen
*/

Il ne contient même pas la ligne @import qui pointe vers le thème parent. Comme nous l’avons vu précédemment, il est combiné directement dans theme.css grâce à LESS, pour gagner en optimisation.

Il ne reste plus qu’à déclarer theme.css à l’aide de l’action wp_enqueue_scripts, dans le fichier functions.php :

// Ajoute theme.css aux CSS utilisés par le thème
function enqueueStyles() {
  wp_enqueue_style("theme", get_stylesheet_directory_uri() . "/css/theme.css");
}
add_action("wp_enqueue_scripts", "enqueueStyles");

Le mot de la fin

Brackets prouve encore une fois qu’il est l’éditeur de la situation, ici pour concevoir un thème pour WordPress, écrire du PHP et surtout du CSS avec l’extension Less AutoCompile.

Cet article vous a été utile ? Partage it !

2 réflexions au sujet de « Personnalisez votre thème WordPress avec Brackets et LESS »

  1. Bonjour,
    merci beaucoup pour ces articles très bien expliqués et très intéressant. Je suis passée à Brackets grâce à toutes tes explications et j’avoue que je suis déjà accroc… mais je garde toujours netbeans sous le coude au cas ou ! 🙂

    1. Bonjour De Pinho,
      Je ne savais pas qu’on pouvait faire du Web avec Netbeans, je pensais qu’il était réservé aux applications Java.
      En tout cas, Brackets doit être bien plus léger, et il a un look’n’feel plus moderne 🙂
      Tu utilises Brackets pour faire de l’intégration ?
      David

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.