Le développement de thèmes WordPress modernes ne doit pas nécessairement se sentir coincé dans le passé. Vous pouvez toujours utiliser les parties de WordPress qui sont excellentes - modèles, hooks, champs personnalisés, routage, flux de travail éditoriaux - tout en donnant à votre thème une configuration frontale moderne avec Vite.
Dans ce didacticiel, nous allons créer une configuration de thème WordPress alimentée par Vite qui vous offre :
Les exemples sont basés sur un thème de portfolio personnalisé, mais la structure fonctionne pour la plupart des thèmes WordPress classiques.
Nous voulons une structure thématique comme celle-ci :
votre thème/ actifs/ dist/ inc/ enqueue.php src/ js/ main.js scss/ main.scss function.php style.css vite.config.js package.jsonPendant le développement, nous écrivons du code danssrc/.
Pour la production, Vite crée des fichiers optimisés dansdist/, et WordPress charge les noms de fichiers hachés corrects à partir du manifeste de Vite.
Au minimum, un thème WordPress classique a besoin de :
style.css fonctions.php index.phpTonstyle.cssdoit inclure l'en-tête du thème :
/* Nom du thème : Votre thème Auteur : Votre nom Version : 1.0.0 */Même si Vite gère votre vrai CSS, WordPress utilise toujours ce fichier pour identifier le thème.
Dans votre dossier de thème, initialisez npm si vous ne l'avez pas déjà fait :
npm init -yInstallez ensuite Vite et Sass :
npm install -D vite sassSi votre thème utilise des bibliothèques frontend, installez-les normalement :
npm installer gsap lenisVos scripts peuvent être simples :
{ "scripts": { "dev": "vite --host 127.0.0.1", "build": "vite build" }, "devDependencies": { "sass": "^1...
[Courte citation de 8% de l'article original]