Reconstruyendo un blog de Divi con shortcodes personalizados
Recientemente rediseñé el blog de Rev6, una plataforma de fitness que utiliza WordPress, Divi y Cloudways.
No utilicé el módulo estándar de Divi Blog. Carece del control necesario para el enrutamiento de URLs personalizado y las funciones de membresía. En su lugar, construí un sistema de shortcodes personalizados en el tema hijo.
Este enfoque mantiene la lógica en PHP versionado en lugar de ocultarla dentro de la base de datos de un constructor de páginas.
La configuración utiliza estos shortcodes:
- [rev6_blog_sidebar] para navegación y búsqueda
- [rev6_sort_dropdown] para ordenar
- [rev6_post_grid] para el diseño
- [rev6_author_bar] para la firma del autor
- [rev6_author_bio] para la sección del autor
- [rev6_related_posts] para más lecturas
Aquí están mis conclusiones técnicas de este desarrollo:
Evita los trucos (hacks) perezosos de CSS grid Una vez utilicé "grid-row: 1 / span 999" para hacer que una barra lateral ocupara toda la página. Esto creó miles de filas vacías y un espacio en blanco masivo. En su lugar, utiliza áreas de cuadrícula con nombre (named grid areas). Es más limpio y seguro.
Comprueba tus datos antes que tu código Pasé tiempo depurando una sección de "entradas relacionadas" que no aparecía. El código era perfecto. El problema eran los datos. La categoría solo tenía una entrada. Mi código excluía la entrada actual, dejando cero resultados. Verifica siempre el contenido de tu base de datos antes de buscar errores en tus funciones.
Entiende la separación entre archivos y base de datos Cuando migré de staging a producción, el diseño se veía mal. Intenté arreglarlo con CSS, pero no funcionó. El problema era que las importaciones mueven las plantillas, no el contenido de la base de datos. Elementos como los anchos de los módulos y las asignaciones de entradas residen en la base de datos. Si el diseño difiere tras una migración, busca en la base de datos, no en la hoja de estilos.
Nunca subas una base de datos completa a producción Una sincronización completa sobrescribe datos reales de usuarios, como pedidos y registros. Utiliza transferencias específicas en lugar de una subida generalizada.
La caché es el paso cero En sitios optimizados, las herramientas de optimización de CSS a menudo eliminan estilos que consideran que no se utilizan. Si tus estilos parecen aplicarse a medias, limpia la caché y regenera tu CSS primero.
El rediseño ya está en línea. Presenta un diseño editorial limpio y un sistema de autor personalizado. El código fue la parte fácil. El entorno proporcionó las lecciones reales.
Fuente: https://dev.to/highcenburg/rebuilding-a-divi-blog-with-custom-shortcodes-a-field-report-141g