Gulpy Starter Theme
Utilisation du Starter thème Underscores en version Sass, afin de créer un nouveau Starter thème intégrant le task runner Gulp. L'objectif ici est de rendre plus efficace le développement de thème sous WordPress en automatisant des tâches récurrentes.
Starter thème sur une base Underscores en version Sass utilisant Gulp et ajout de fonctionnalités pour une mise en compatibilité avec le nouvel éditeur WordPress via la fonction add_theme_support()
Tâches gérées par Gulp
- Visualiser les changements du thème en front en utilisant un live reload avec BrowserSync
- Au niveau des styles :
- convertir les scss en css
- ajouter les préfixes vendors avec Autoprefixer basé sur la bdd de « Can I use »
- minifier les css
- créer un sourcemap pour conserver le chemin des fichiers scss à modifier dans l’inspecteur le cas échéant.
- Au niveau des scripts :
- ordonner les scripts js en fonction des conditions dans lesquelles ils doivent être chargés
- concaténer les js qui peuvent l’être.
- minifier les js
- Optimiser le poids des images en .png, .jpg, .gif ou .svg
- Générer un fichier .pot une fois le thème développé afin de faire les traduction ensuite avec PoEdit.
Ajout d’une compatibilité wp version 5+
Afin de pouvoir utiliser pleinement les fonctionnalités offertes par le nouvel éditeur depuis la version 5 de WordPress, des apports de code relatifs à une mise en compatibilité du thème ont été ajoutés pour les avoir sous la main si nécessaire.
Il s’agit en l’occurrence de :
- Activer la feuille de styles par défaut des blocs Gutenberg pour l’affichage en front.
- De rendre responsive les contenus intégrés (les embed : video, audio, tweets, etc …).
- Prendre en charge l’alignement large et pleine page d’une image.
- Ajouter une feuille de style pour l’éditeur afin qu’il corresponde au mieux à ce qui doit s’afficher en front.
Mais aussi de limiter la possibilité de customiser le thème quand on a crée un thème personnalisé pour un client. Ce serait dommage que la charte graphique soit malmenée !
- Désactiver le color picker permettant de choisir des couleurs personnalisées.
- Personnaliser la palette de couleurs pour la faire correspondre à la charte graphique du thème.
- Personnaliser les tailles de texte proposées pour les paragraphes ou carrément désactiver cette possibilité.