Aprende en este tutorial cómo añadir la funcionalidad de configuración guiada (Genesis onboarding) a un child theme de Genesis Framework.
La actualización de Genesis Framework 2.8 incorpora una nueva funcionalidad de configuración guiada (Genesis onboarding).
¿Su función? Reducir la frustración a la hora de configurar un tema. 😉
¿Cuántas veces has activado un tema y no se parecía en nada a la demo? Imagino que unas cuantas, ¿verdad?
El objetivo del onboarding es que el cliente pueda dejar su web como en la demo con solo activar el tema.
Para ello han puesto en manos de los desarrolladores 2 herramientas muy útiles:
- La posibilidad de indicar qué plugins se van instalar y activar durante el proceso de puesta a punto.
- Elegir qué contenido se va a importar a la página principal.
En este tutorial vas a descubrir cómo sacarles provecho.
Cómo funciona Genesis onboarding
Cuando activas un child theme con soporte para la configuración guiada (como Genesis Sample 2.8) te redirige de forma automática a la página de configuración del tema.
Una vez aquí, solo tendrás que hacer clic en «Crear tu página principal» para comenzar a dejar la web como en la demo. Por cierto, te la encontrarás traducida al castellano (ahí he puesto mi granito de arena).
Y ahora viene la parte técnica para conseguir esa «magia». 😉
Pasos para crear una configuración guiada en un child theme de Genesis
He usado como referencia el código de Genesis Sample 2.8 para que aprendas cómo aplicarlo a cualquier child theme de Genesis.
En futuros tutoriales te explicaré cómo hacer modificaciones más avanzadas.
1. Añade un fichero onboarding.php
Crea una carpeta /config/ en la raíz del child theme (si no existe ya) y coloca dentro el fichero onboarding.php con el siguiente código:
Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.
En la primera parte del bloque indicas que instale y active el plugin Atomic Blocks.
En la segunda le ordenas que genere una página llamada Homepage que cargará el contenido del fichero homepage.php.
Ahora verás cómo crear ese fichero.
2. Agrega un fichero con el contenido de la home
Si no existe, crea una carpeta /import/ dentro de /config/. Y dentro de la misma, otra carpeta llamada content, de forma que la estructura de carpetas quede así: /config/import/content/homepage.php.
Genera un fichero llamado homepage.php con el siguiente código.
Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.
Entre <<<CONTENT y CONTENT; he introducido unos pocos bloques de muestra.
Pero la gracia es que tú diseñes una página principal con la estructura de bloques que desees.
Para ello, solo tienes que crear una nueva página en WordPress con el formato que desees para la home usando los bloques del nuevo editor.
Cuando hayas terminado el diseño ve a la modalidad «editor de código»:
Selecciona todo el contenido y pégalo en el bloque de código anterior justo entre:
$theme_name_homepage_content = <<<CONTENTy
CONTENT;Con esto consigues que durante el proceso de configuración guiada de Genesis se cargue el contenido de la página principal que tú has diseñado.
3. Introduce imágenes al contenido de la home
Si decides añadir imágenes en la página principal tendrás que realizar este paso extra.
Crea una carpeta /images/ dentro de /config/import/ y coloca la foto que deseas utilizar.
A continuación, inserta este snippet al inicio del fichero homepage.php:
Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.
Por último, tienes que sustituir la ruta de la imagen que creaste en WordPress y pegaste en homepage.php por su variable.
Es decir, la línea que antes era algo así:
<figure class="wp-block-media-text__media"><img src="https://tuweb.com/wp-content/uploads/2019/..." alt="" class="wp-image-1477"/>Quedaría ahora:
<figure class="wp-block-media-text__media"><img src="$genesis_homepage_header_image_url" alt="" class="wp-image-1477"/>De esta forma, en lugar de indicarle una ruta local (que será distinta en cada web), le das una variable para que busque la imagen en la ruta de la carpeta de configuración.
¡Ya lo tienes! Has creado una configuración guiada para tu child theme.
4. Crea una plantilla de página para la home
Por último, puedes configurar el diseño de la plantilla que se va a mostrar en la página principal.
Para ello, crea un fichero llamado template-blocks.php con el siguiente código y colócalo en la raíz de tu child theme de Genesis.
Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.
En este caso, indicas que el diseño sea de ancho completo y que no muestre las migas de pan ni el título.
Pero te recomiendo ajustarlo a tu gusto utilizando los action hooks y filtros que puedes encontrar otros tutoriales de Código Genesis.
5. Prueba la configuración guiada
Para finalizar, haz un test para asegurarte de que todo funciona correctamente.
Para ello, sigue estos pasos:
- Activa el tema desde Apariencia > Temas (desde el personalizador de WordPress no funcionará).
- Comprueba que aparece la página de configuración.
- Haz clic en «Crear tu página principal» y espera a que se completen los pasos.
- Pincha en «Ver tu página principal» o «Edita tu página principal».
Si quieres hacer pruebas modificando las opciones de configuración no necesitas activar y desactivar el tema cada vez para visualizar los cambios.
Puedes ir a la url: https://tuweb/wp-admin/admin.php?page=genesis-getting-started.
Recuerda que para poder aprovecharte de esta nueva funcionalidad debes estar usando versiones iguales o superiores a WordPress 5.0 y Genesis 2.8.
Este proceso de configuración guiada cada vez permitirá mayor grado de personalización, así que iré publicando tutoriales para que le saques todo el partido posible.
Conclusiones
La nueva funcionalidad de configuración guiada (Genesis onboarding) que introduce Genesis 2.8 es un gran paso adelante que permite dejar los child themes como en la demo de forma sencilla e intuitiva.
Con este tutorial aprendes a sacarle el máximo partido e integrarlo en cualquier child themes de Genesis.
Dedicándole un poco de tiempo conseguirás que la puesta a punto del tema hijo sea muy sencilla para el usuario. Además, Genesis onboarding también se encargará de instalar y activar los plugins necesarios para que la página principal se muestre como en la demo.
Si deseas hacerme alguna pregunta o darme una sugerencia para próximos tutoriales, déjamela en los comentarios (opción exclusiva para suscriptores).
