Le choix d'un starter theme pour vos créations de thème Worpdress reste souvent personel, en fonction de nos affinités. Il y a quelques années, je partais sur un Starter Theme vierge, ou il fallait tout faire. Au fil du temps, j'ai privilégié Bootstrap, et je me suis donc orienté vers des Starter Themes Bootstrap. Rapidement, j'ai compris que cela ne suffisait pas. Je cherchais donc un starter theme avec une logique de développement et j'ai découvert Roots, rebaptisé depuis Sage.
Plus qu'un simple theme, Sage est un environnement complet pour développer vos themes WordPress. Basé sur HTML5 Boilerplate, Sage utilise Gulp pour vos assets et Bower pour vos dépendances. Il se base sur Bootstrap pour la respponsivité.
- Un thème correctement documenté
- Une communauté grandissante et active
- Des mises à jours régulières
- Un code propre et bien structuré.
- Un live reload pour visualiser en direct vos modifications JS/CSS et template
- Des technos modernes pour votre workflow.
- ....
Démarrer un nouveau projet WordPress est devenu d'une simplicité infantine. Une simple commande dans votre terminal pour cloner le Git, un petit coup de Gulp pour compiler les css et js et en moins d'une minute, vous avez un thème fonctionnel, incluant bootstrap, qui ne demande plus qu'à être personnalisé.
https://github.com/roots/sage.git nomDeMonTheme
Ensuite, il vous suffit de suivre les informations de setup du theme. Là encore, rien de bien compliqué, 2-3 lignes de commandes à lancer pour générer votre thème et son workflow. Depuis le dossier de votre thème, taper juste :
npm install bower install gulp
Voilà, c'est fait, le thème est installé avec toutes les dépendances de départ (Bootstrap, jQuery,etc ...).
Installer une nouvelle dépendance, bibliothèque, est aussi simple. Par exemple, pour utiliser Font Awesome dans votre projet, vous aviez jusqu''à présent la possibilité d'utiliser le CDN, ou de télécharger Font Awesome, et d'ajouter ensuite le css dans votre functons.php. Pour ensuite personnaliser FA, il fallait rédiger une "surcouche" css. Avec Sage, c'est fini.
Bower install font-awesome --save.
Voilà, vous pouvez maintenant compiler les sources de FA avec Bootstap.
Fini les rechargement de page à chaque modification CSS. Avec gulp watch, votre navigateur se recharge automatiquement à chaque fois que vous compilez vos scss, vos js ou que vous modifier vos templates php de votre thème. Merci le Live reload ...
Toujours avec gulp, vos css et js seront automatiquement mimifiés lorsque vous compilerez votre projet pour la prod. Même vos images seront compressées et optimisées.
Outre un workflow extrèmement pratique et orienté productivité, Sage utilise des fonctionnalités que vous ne retrouverez pas sur la plupart des autres starter theme. Comme la choix de l'affichage des sidebar, qui se définit directement dans le ficheir setup de votre theme, via un array. L'utilisation d'un Wrapper de base, qui peut-être étendu à volonté, permettant de créer des squelletes en fonction des types de post, d'archives, etc ... Donc plus besoin d'ajouter get_header, get_footer, get_sidebar dans chacun de vos templates.
Vous l'aurez compris, Sage permet de recentrer la création de thème au coeur du métier de développeur web. Car on entend trop souvent ici et là dire "un développeur WordPress, ça n'existe pas" ... Si l'utilisation de NameSpace, d'un préprocesseur SASS dans un environnement node, ce n'est pas du développement Web ..... Car oui, c'est là son principal inconvénient. Une certaine logique vous sera nécessaire pour appréhender Sage, ce qui ne le met pas à la portée de tout le monde.
Personnellement, je l'utilise depuis près d'un an, et je ne peux plus m'en passer.
Pour en savoir plus :