Reconstruire un blog Divi avec des shortcodes personnalisés
J'ai récemment repensé le blog de Rev6, une plateforme de fitness utilisant WordPress, Divi et Cloudways.
Je n'ai pas utilisé le module Divi Blog standard. Il manque de contrôle pour le routage d'URL personnalisé et les fonctionnalités d'adhésion. À la place, j'ai conçu un système de shortcodes personnalisés dans le thème enfant.
Cette approche permet de conserver la logique dans du PHP versionné plutôt que de la cacher dans la base de données d'un page builder.
La configuration utilise ces shortcodes :
- [rev6_blog_sidebar] pour la navigation et la recherche
- [rev6_sort_dropdown] pour le tri
- [rev6_post_grid] pour la mise en page
- [rev6_author_bar] pour la signature
- [rev6_author_bio] pour la section auteur
- [rev6_related_posts] pour la lecture complémentaire
Voici mes enseignements techniques tirés de ce projet :
Évitez les hacks CSS grid paresseux J'ai déjà utilisé "grid-row: 1 / span 999" pour qu'une barre latérale occupe toute la page. Cela a créé des milliers de lignes vides et un espace blanc massif. Utilisez plutôt des zones de grille nommées (named grid areas). C'est plus propre et plus sûr.
Vérifiez vos données avant votre code J'ai passé du temps à déboguer une section "articles connexes" qui ne s'affichait pas. Le code était parfait. Le problème venait des données. La catégorie ne contenait qu'un seul article. Mon code excluait l'article actuel, ce qui laissait zéro résultat. Vérifiez toujours le contenu de votre base de données avant de traquer des bugs dans vos fonctions.
Comprenez la distinction entre les fichiers et la base de données Lors de ma migration de l'environnement de staging vers la production, la mise en page était incorrecte. J'ai tenté de la corriger avec du CSS, mais cela a échoué. Le problème est que les imports déplacent les templates, pas le contenu de la base de données. Des éléments comme la largeur des modules et l'assignation des articles résident dans la base de données. Si la mise en page diffère après une migration, regardez la base de données, pas la feuille de style.
Ne poussez jamais une base de données complète en production Une synchronisation complète écrase les données réelles des utilisateurs, comme les commandes et les inscriptions. Utilisez des transferts ciblés plutôt qu'un envoi global.
Le cache est l'étape zéro Sur les sites optimisés, les outils d'optimisation CSS suppriment souvent les styles qu'ils jugent inutilisés. Si vos styles semblent partiellement appliqués, videz votre cache et régénérez votre CSS en premier.
La refonte est en ligne. Elle présente une mise en page éditoriale épurée et un système d'auteur personnalisé. Le code était la partie facile. C'est l'environnement qui a apporté les véritables leçons.
Source: https://dev.to/highcenburg/rebuilding-a-divi-blog-with-custom-shortcodes-a-field-report-141g