Utilisation et optimisation de Bootstrap avec WordPress et LESS

Optimiser Bootstrap pour Wordpress avec LESS

Twitter Bootstrap offre beaucoup de possibilités, mais peu de sites les utilise toutes en même temps.

Pourtant le fichier CSS les inclut toutes. Voyons comment désactiver les fonctionnalités qui ne servent pas, grâce à sa version LESS et tant qu’à faire, dans le cadre d’un thème WordPress, pour gagner en performances.

Rappel des faits

Nous avons déjà vu comment implémenter un style pour WordPress en CSS compilé depuis des fichiers LESS avec l’éditeur Brackets.

Pour alléger Bootstrap, je vous propose d’utiliser le même principe, comme la version LESS est comprise dans le package.

Le but de l’opération est simple : au lieu d’utiliser la version complète, même minifiée, de Bootstrap, on crée une version personnalisée dans laquelle on n’inclut que les composants vraiment utilisés.

Par exemple, sur ce blog, j’utilise les grilles responsives, les barres de navigation et les boutons. Et c’est tout. Un peu de ménage ne peut pas faire de mal.

Un problème pourrait découler de cette optimisation : à chaque fois qu’on utilise une fonctionnalité qui ne l’était pas déjà, il faut l’inclure. Mais vous allez voir, la mise en place et son édition sont tellement simples que ce serait dommage de s’en priver.

Mise en place

Téléchargement des sources de Twitter Bootstrap

La première chose à faire est de télécharger la version ‘Source code’ de Bootstrap depuis le site.

La structure

Nous avions déjà mis en place un environnement LESS pour un thème WordPress : le dossier less contenait un fichier de référence et un sous-dossier avec les différentes parties à inclure. Le dossier css contient le fichier CSS généré.

Le principe est exactement le même, nous allons simplement ajouter un module.

Optimiser Bootstrap pour WordPress avec LESS : la structure du thème
La structure du thème

Passons à la pratique : créez d’abord un dossier bootstrap dans le dossier less, puis décompressez le contenu du dossier less de l’archive téléchargée dans ce nouveau dossier.

Copiez ensuite le fichier bootstrap.less directement dans le dossier less. Il va nous servir de fichier principal.

Le fichier principal

Tout va se passer dans ce nouveau fichier less/bootstrap.less.

La première chose à faire est de définir le fichier de sortie pour l’extension de Brackets LESS AutoCompile en ajoutant cette ligne au tout début du fichier :

// out: ../css/bootstrap.css, compress: true

Ensuite, comme tous les composants se trouvent dans le dossier less/bootstrap/, il est nécessaire de changer tous les @import pour corriger le chemin. Par exemple :

// Core variables and mixins
@import "variables.less";
@import "mixins.less";
[...]

devient :

// Core variables and mixins
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";

Une astuce, avec la sélection multiple de Brackets, cette tâche est un peu moins fastidieuse qu’elle n’y parait.

Optimisation de Bootstrap

Il est maintenant temps de faire un peu de ménage.
Pour cela, il suffit de commenter les lignes qui correspondent au composants que vous n’utilisez pas.

Tout simplement.

Si vous conservez les glyphicons, veillez bien à copier le dossier fonts de Bootstrap dans le dossier css.

Personnalisation

Cette optimisation présente un autre avantage : vous avez en plus la possibilité de personnaliser Bootstrap, notamment les couleurs, les tailles, …

Le mieux, pour garder la possibilité de mettre à jour Bootstrap facilement est de changer la valeur des variables directement dans le fichier less/bootstrap.less, ou dans un nouveau fichier si les modifications deviennent trop complexes.

Par exemple, pour changer les couleurs des boutons, il suffit de recopier les variables depuis less/bootstrap/variables.less pour les copier dans less/bootstrap.less, juste après l’inclusion du fichier contenant les variables :

[...]

@import "bootstrap/variables.less";

// Couleurs personnalisées
@brand-primary: blue;
@brand-success: green;
@brand-info: blue;
@brand-warning: orange;
@brand-danger: red;

@import "bootstrap/mixins.less";

N’essayez pas ces couleurs, ce n’est pas joli joli…

Inclusion dans WordPress

La dernière étape consiste à déclarer le nouveau fichier css/bootstrap.css optimisé à WordPress :

function enqueueStyles() {
wp_enqueue_style("bootstrap", get_stylesheet_directory_uri() . "/css/bootstrap.css");
}
add_action("wp_enqueue_scripts", "enqueueStyles");

Le mot de la fin

Pour finir, voyons le résultat. La version minifiée de Bootstrap pèse 98 ko. Après suppression des composants inutiles, elle ne pèse plus que 48 ko, soit un gain de plus de 50 %.

Enfin, cet article est orienté WordPress, mais cette technique peut concerner n’importe quel site qui utilise Bootstrap.

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

3 réflexions au sujet de « Utilisation et optimisation de Bootstrap avec WordPress et LESS »

  1. Bonjour à tous,

    Un plugin WordPress destiné à faciliter l’utilisation de Bootstrap sous WordPress :
    http://codecanyon.creation-site.org/tiny-bootstrap-elements/tiny-bootstrap-elements-light.zip (version light gratuite).

    Ce plugin intègre une barre d’outils Bootstrap à l’éditeur de WordPress et vous permet d’intégrer / modifier des composants de Bootstrap à votre contenu à l’aide d’éditeurs visuels.

    Version complète : http://codecanyon.net/item/tiny-bootstrap-elements-wordpress-plugin/10293837

    1. Bonjour Migli,

      Je ne l’ai pas essayée, mais j’ai regardé le live preview : ton extension semble pratique et très complète.
      J’essaierai peut-être à l’occasion.

      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.