Aujourd’hui, je vais vous présenter le starter wordpress Sage de Roots.io. C’est celui que nous utilisons dans la plupart de nos projet.
I – De quoi est-il composé ?
npm
npm est le gestionnaire de package javascript de node.
gulp
C’est un compilateur, task runner. Il va vous permettre de compiler, minifier les fichiers sass et javascript qui composent votre site. Il va aussi actualiser votre navigateur automatiquement dès que vous ferez une sauvegarde. En plus de ça, il vous affichera les erreurs présentes dans vos fichiers !
Les lignes de commande que vous allez utiliser sont :
gulp && gulp watch
Cette première ligne de commande sert a compiler le css et le javascript et d’activer le live reload.
gulp --production
Cette ligne de commande va optimiser vos fichier pour la mise en prod ( compiler, minifier, vérifier les erreurs..)
bower
Bower est un gestionnaire de packages des fichiers utilisés en front. Il vous permettra en autre d’ajouter des librairies, des fonts en une ligne, magique !
II – Quelles différences avec un thème basique ?
Sage possède un workflow totalement différent des thèmes wordpress dont on a l’habitude. Tout a été revu pour nous faciliter la vie, favoriser les bonnes pratiques de développement web et restreindre les bidouilles. En effet, fini les wp_enqueue_style() pour ajouter un css, fini aussi le fichier function.php blindé de déclarations de fonction etc …
Je vais vous faire un petit tour rapide en vous présentant les points les plus importants de ce workflow.
Côté Front
Il est notamment composé d’un dossier assets qui contient les fichier css, javascripts, font, images bref le front.
Css
Voyons ce qu’il y a l’intérieur :
Le dossier layout contient comme son nom l’indique un fichier sass par layout du site.
Cela vous oblige à séparer vos styles proprement. Par exemple, pour le formulaire de contact de Partikuls, je créer un fichier _contact.scss dans lequel je vais écrire mon style. L’underscore est important pour la suite. Vous vous dites surement « Il va falloir tous les déclarer ?? » . En faite il faut se rendre dans la main.scss.
Il vous suffit tout simplement de faire un copier coller et d’ ajouter le nom de votre ancien fichier et il sera automatiquement pris en compte !
Une fois le « gulp –production » effectué, tous ces fichiers scss seront compilés et réunis dans un seul fichier minifié.
Javascript :
Nous disposons de deux fichiers :
customizer.js qui est utilisé dans l’admin wordpress pour la personnalisation du thème.
C’est dans le main.js que l’on va ajouter les différentes fonctions.
Libs et Font :
Encore une fois c’est très simple. Une ligne de commande dans votre terminal et bower se charge de tous …
bower install votreLib --save
Une fois installée, et parce que vous avez ajouté --save vous allez retrouver le nom et la version de votre librairie dans le fichier bower.json.
Côté serveur
Des Templates
Toujours dans l’idée de créer du code propre, Sage nous permet comme pour le css de découper notre layout en templates.
Des fichiers connus :
Sage change nos habitudes mais garde quand même les grand principes de wordpress. C’est pourquoi nous allons retrouver des fichiers communs dans tous les thèmes wordpress comme le fameux styles.css qui déclare notre thème, page.php etc..
Voilà le petit tour d’horizon est fini, vous avez pu voir la grande simplicité de ce starter mais aussi la volonté des développeurs de nous faciliter le travail tout en nous forçant à utiliser les bonnes pratiques de développement de site web. il y à encore beaucoup de choses à dire et si vous désirez en savoir plus, voici le lien de la doc officielle https://roots.io/sage/docs/theme-installation/
Vous pouvez également suivre notre tutoriel : Création d’un thème wordpress avec Sage de roots.io
