En la quinta clase del curso de Underscores, damos forma a una de las partes más importantes de nuestro theme: la home o página de inicio.
Encaramos un reto muy interesante: crear la página de inicio del theme, la cual cuenta con un CPT, un loop de contenidos y campos personalizados. ¡Nada mal!
5.1 - Funcionalidad y maquetación
El primer paso, como siempre, es crear el template. Un template que debemos estructurar a medida, en función de los contenidos que queramos mostrar.
Es en este punto, donde también deberemos crear nuestro CPT, para que pueda mostrar el bucle de posts en la propia home en función de los parámetros que nosotros le indicamos.
Una vez lo tengamos listo, deberemos maquetarlo todo para que tenga el mismo aspecto visual que el diseño del que partimos. ¡Empecemos!
5.2 - Dinamización
En el momento que tenemos nuestra home estructurada y maquetada, llega la hora de dinamizarla.
Para ello, utilizaremos campos personalizados. Estos elementos nos permiten crear los campos que nos interesen y colocarlos en el punto del template que queramos.
Gracias a ello, podemos conseguir que el usuario que trabaje con este WordPress pueda modificar el contenido de la home de su web sin la necesidad de meterse dentro del código y, además, sin la necesidad que utilizar builders ni maquetadores visuales. ¡Vamos allá!
¡Listo! ¿Has visto todo lo que hemos aprendido en esta lección? En una sola clase, hemos creado una home page totalmente a medida, en base a un template de php desde cero, funcionalidades como un loop de contenidos y campos personalizados.
De este modo, acabamos de desarrollar una página de inicio dinámica, que sirve a las necesidades del usuario de forma completamente eficiente.
En la siguiente clase continuaremos avanzando en la creación de nuestro theme basado en Underscores. Concretamente, nos dedicaremos al portfolio. ¡Nos vemos en ella!
Todos los capítulos de este curso:
- Curso de Underscores #1. Introducción
- Curso de Underscores #2. Estilos generales
- Curso de Underscores #3. Header y footer
- Curso de Underscores #4. Widget areas
- Curso de Underscores #5. Homepage
- Curso de Underscores #6. Portfolio
- Curso de Underscores #7. Blog y posts
- Curso de Underscores #8. Páginas de «Quién soy» y de «Contactar»
- Curso de Underscores #9. Página de resultados de búsqueda y de error 404
- Curso de Underscores #10. Adaptación responsive