Theme développeur WordPress : Boostrap Sass Blank Theme

Le web avance et cet article date de mars 2017, son contenu peut ne plus être pertinent ou d'actualité.

Thème développeur : “Bootstrap Sass Blank Theme”

Qu’est-ce “Bootstrap Sass Blank Theme”

Bootstrap Sass Blank Theme est, comme son nom ne l’indique pas, un thème WordPress. Et comme son nom l’indique est un Blank Theme incorporant Bootstrap-sass. De même que le précédent Minimal Blank Theme le credo est et reste de proposer un thème vierge dont aucune ligne de code n’est à supprimer. Ici il suffit d’ajouter son propre code à l’existant pour créer son propre thème.

La genèse de ce nouveau thème

Initialement j’ai développé en collaboration le thème vierge Minimal Blank Theme et jusqu’à présent j’utilisais celui-ci pour mes développements. Cependant il commençait à devenir limité par l’absence de préprocesseur CSS ou de fonctionnalités de minification.

Il aurait été aisé de simplement ajouter Sass avec Compass, pour compenser ce manque au moins au niveau du CSS.

Les évolutions depuis “Minimal Blank Theme”

Les évolutions entre Bootstrap Sass Blank Theme et son prédécesseur “Minimal Blank Theme” sont nombreuses et variées. Le point important c’est que l’introduction d’une partie d’entre elles, notamment Bootstrap-sass font qu’il aurait été illogique de garder le terme “Minimal” dans ce nouveau blank thème puisqu’il ne l’est plus.

Ainsi, afin de faire une liste, non exhaustive,  de ces changements :

  • Ajout par défaut de Bootstrap avec incorporation du code dans le thème (obligatoire pour l’utilisation via Sass)
  • L’intégration du préprocesseur Sass
  • L’automatisation de l’installation et des tâches courantes via npm et Gulp, comme nous le verrons dans le paragraphe suivant
  • le regroupement des ressources (images, js, scripts, etc.) dans un dossier “assets” pour le développement et “dist” pour la production
  • le découpage des contenus de templates est plus dissocié afin d’être facilement identifiable et les noms de ces fichiers sont plus “WordPress friendly”

Gulp pour automatiser

Gulp est utilisé dans Boostrap Sass Blank ThemeAfin de faciliter le développement et permettre d’optimiser le code pour la future mise en production des thèmes développés, j’ai mis en place au sein de ce Bootstrap Sass Blank Theme, Gulp pour automatiser certaines tâches.

Tout d’abord, la question qui pourrait se poser serait “Pourquoi Gulp et non pas Webpack” ? En effet Webpack est aujourd’hui le nouvel outil à la mode, à savoir utiliser et mettre en place. Cependant, dans le cas présent, son utilisation n’aurait pas forcément été des plus pertinente, puisque le but premier et de simplement automatiser certaines tâches, en gardant une configuration simple et accessible. De ce fait, Gulp est la réponse à cette problématique.

Disponibles à la racine du thème dans le fichier gulpfile.js, les tâches disponibles sont au nombre de 7.

Feuilles de style et polices d’écriture

gulp font

Cette tâche assez basique, ne fait que déplacer les polices depuis le dossier “assets/fonts” vers le dossier “dist/fonts”, en ajoutant à ce dossier également la police Bootstrap (glyphicon).

$ gulp sass

Cette seconde tâche, comme son nom l’indique réfère aux fichiers Sass. Elle permet la compilation du fichier style.scss (présent dans “assets/scss/”) en fichier style.css à la racine du thème.

Si votre navigateur dispose du plugin “Livereload“, la page va également se rafraîchir automatiquement.

Au préalable à son exécution, cette tâche lance la précédente (gulp font).

Fichiers javascript

$ gulp lint

Utilisant jshint, cette tâche va vérifier que votre fichier “main.js” ne comporte pas d’erreur.

$ gulp js

La tâche gulp js va effectuer plusieurs choses. Premièrement, elle va minifier et copier du répertoire “assets/js” vers le répertoire “dist/js” le fichier javascript principal du thème : main.js.

Ensuite, la tâche va récupérer toutes les librairies javascript ajoutée au répertoire “assets/js/libs” afin de les concaténer, de les minifier et de placer le contenu ainsi obtenu dans le fichier présent “dist/js/libs.js”.

Si votre navigateur dispose du plugin “Livereload”, la page va également se rafraîchir automatiquement.

Avant son exécution, la tâche va lancer la précédente : gulp lint.

Images

$ gulp img

Gulp img va permettre de déplacer les images depuis le dossier de travail “assets/img” vers le dossier “dist/img” mais en optimisant au passage les images.

Automatisation

$ gulp watch

“watch” est une des fonctionnalités phares de Gulp. Cette tâche va permettre de surveiller les changements dans les différents dossiers afin d’exécuter les tâches correspondantes :

  • gulp sass : lors de la modification de fichiers sass dans le répertoire “assets/scss”
  • gulp js : lors de l’ajout de fichiers au dossier “assets/js/libs” ou lors de la modification du fichier “assets/js/main.js”
  • gulp img : lors de l’ajout d’images au dossier “assets/img”
$ gulp

Ceci est la tâche par défaut, elle va d’une part exécuter l’écoute “Livereload” et d’autre part exécuter toutes les tâches Gulp existantes.

L’installer, l’utiliser, l’adopter

Pour installer Bootstrap Sass Blank Theme, rien de plus simple à partir du moment que vous avez les pré-requis en place, à savoir :

  • avoir npm (et donc node.js) installé sur votre machine de développement
  • avoir une installation de WordPress fonctionnelle
  • connaître Sass pour profiter pleinement des possibilités offertes par ce thème développeur
  • le projet étant disponible sur GitHub, avoir Git installé afin de pouvoir l’utiliser en ligne de commande (bien qu’il soit tout à fait possible de télécharger le thème en .zip à l’adresse https://github.com/edouardl/bt-sass-blank-theme et de le dézipper localement)

Ces pré-requis remplis, placez-vous en ligne de commande à la racine du répertoire “themes” de votre installation et d’exécuter les commandes suivantes :

$ git clone https://github.com/edouardl/bt-sass-blank-theme [your_theme_name]
$ cd [your_theme_name]
$ npm install
$ gulp

Dès lors vous pouvez commencer à créer votre thème !

Publié le par Edouard dans Développement , Wordpress