Et pourquoi ne pas coder un thème WordPress avec des composants prêts à l’emploi ? Et pourquoi ne pas rendre ces composants dynamiques et éditables via le dashboard de WordPress ? C’est l’objectif d’Aladin : le thème qui vous convient 🙂
Explication du projet
Comme vous le savez maintenant, je travaille beaucoup sur WordPress, le CMS le plus utilisé du monde. Jusque-là, je l’utilisais de deux manières :
- Je partais d’un thème vierge pour en faire un site web dynamique et dont le contenu implémenté se retrouvait affiché ou via le code, ou inséré via un constructeur de thème.
- Ou en tant qu’API, ce qui me permettait de me libérer des thèmes WordPress et de créer des sites plus personnalisés où seulement le contenu (texte & image) y était affiché en appelant des requêtes.
Dans les deux cas, le but était de rendre un projet très personnalisé et dont le contenu pouvait être modifié par le prestataire. Mais dans les deux cas, je partais de zéro au niveau du design la pluspart du temps. Aladin ouvre une troisième voie. Le contenu est toujours implémenté via le dashboard de la plateforme, mas le rendu est construit via le Framewok Tailwind dont je vous ai déjà parlé plusieurs fois ici. Dès lors, même si l’on se retrouve avec un frontend très structuré (car Tailwind reste un framework), je préserve les sections via le thème et ses « template-parts ». Les sections sont ensuite construites au fur et à mesure des nouvelles demandes. Autrement dit, je garde des sections de pages sous la main, et complètement éditable via le dasboard. Un peu comme le tout nouveau constructeur de WordPress et ses « compositions«
Comment cela marche concrètement ?
Le thème possède actuellement une dizaine de sections HTML. Ces sections ont été préalablement codées et partagées sur le site flowrift.com. Il y a pas mal de sites qui vous en proposent, mais j’ai choisi ce dernier car j’ai trouvé son utilisation simple et les sections complètes. Ensuite, j’ai remplacé le contenu par les fonctions adéquates de WordPress dans le but de les rendre dynamiques.
Et après ?
Encore faut-il pouvoir les insérer dans nos différentes pages n’est-ce pas ? Et c’est possible. J’ai pour cela créé sous Aldin, un shortcode « [section] » qui permet d’afficher toutes les sections présentes sur le site. Mais il est également possible de les réorganiser par catégorie (groupe) ou même d’en afficher une seule via son ID. Cela est possible puisque les sections en questions sont des Custom Post Type et donc accessibles via le dashboard dans le menu principal. Lorsque ces dernières étaient composées d’éléments qui se répétaient, j’ai tout simplement ajouté des CPT afin de ne pas perdre le prestataire sur sa plateforme. Au final, il y a quatre nouvelles pages dans le menu du dashboard qui permet l’édition de nouveau contenu :
- Membres : ajout de membre d’une équipe
- FAQ : Questions – réponses
- Tarifs : 3 niveaux possibles
- Et les sections
L’image ci-dessous
Mais comment sont liées les sections au code du thème ?
Pour cela, il faut que l’admin connecté au dashboard renseigne dans la section qu’il vient de créer, à quel template elle doit être assignée. Comme je le disais, 10 templates sont ainsi diponibles, et sélectionnable comme les « tags » des articles. Il faut donc dans ce cas, ne choisir qu’un seul tag pour se référer à la section. Si vous en choisissez plusieurs, ce sera le premier tag qui sera choisi. Enfin, il suffit de placer les shortcodes dans les différentes pages pour afficher votre contenu. Si vous le faites comme je le conseille, par groupe (imaginons que vous créez une catégorie « home »), vous allez pouvoir afficher toutes les sections de cette catégorie via le shortcode. Chaque page pourrait être construite en ce sens et ne possédera comme contenu que le shortcode en question (ou plusieurs si vous le faites via l’ID par exemple).
Bonus
Pourquoi ne pas choisir vous-même l’ordre des sections ? C’est possible de le faire. Par défaut, les sections sont affichées par ordre (menu order) et ensuite par date, de la plus récente à la plus vieille. Pourquoi ne pas dans ce cas installer le célèbre plugin « Custom Post Order » qui vous permet via un drag and drop, de changer l’ordre des éléments depuis le dashboard. Avec cette méthode, vous pouvez construire vos pages depuis le dashboard qu’Aladin vous propose.
Améliorations
Le thème connaîtra évidemment des améliorations. En plus d’ajouter des sections, je ferai en sorte qu’à l’installation du thème, des plugins de sécurité ou de référencement pourraient s’installer automatiquement. Pourquoi ne pas ajouter SCF qui permettrait une personnalisation plus grande encore dans les champs à compléter. Ici, je n’ai pas ajouté SCF et le thème fonctionne sans plugins. Par facilité, j’ai tout de même ajouté « classic editor » et « Duplicate page » afin d’ajouter plusieurs sections identiques et très facilement.
Vous trouverez le dépôt sur Github à cette adresse :
https://github.com/ProjetsMerlin/Aladin
Conclusion
Le thème se constuira au fur et à mesure. Il serait par exemple intéressant d’installer Woocommerce et de construire une page panier, article et boutique avec Tailwind. C’est aussi un moyen de garder les fonctions PHP relative à WordPress sous la main. Vous trouverez à la racine du thème les fichiers xml nécessaires pour installer de base le thème complet.
