En esta cuarta clase del curso de PSD a Theme, damos forma a la home de nuestra web, trabajando con el template front-page.php.
Así es. Después de crear el theme y adaptar los elementos comunes del sitio web, en esta lección creamos, una de las páginas más importantes.
4.1 - Funcionalidad del theme
Empezaremos pues, creando la funcionalidad del este template. Para ello utilizaremos la aproximación de Widget Areas.
Si bien son muy habituales en Genesis, sobretodo para maquetar home pages, es cierto que para el cliente puede no siempre ser el enfoque más correcto, ya que deberá tener unas mínimas nociones de HTML para introducir su propio contenido.
Además también crearemos el loop de posts, utilizando get_posts, uno de los métodos más simples para mostrar contenido en bucle.
4.2. Estructura de la home
Una vez tenemos el template front-page.php listo, volvemos a nuestra web para crear la estructura del contenido.
Ayudándonos del editor de código construimos el esqueleto del hero, la sección de servicios y del banner. Finalmente, colocamos el código dentro de un Widget HTML para que se visualice en sus respectivas widget areas.
4.3 - Diseño de la home
Finalmente, vamos a darle una capa de chapa y pintura a nuestra home. Partiendo de las clases definidas en los videos anteriores, maquetamos toda la página ajustándonos al diseño que vimos en la primera lección del curso.
¡Ya lo tenemos! En esta clase hemos visto el proceso completo de creación y maquetación (sin plugins) de la página de inicio de nuestro sitio web.
En las siguientes lecciones, continuaremos trabajando las distintas páginas que lo conforman. En este caso, atacaremos la página de about us o quiénes somos.
Como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet de suscriptor. ¡Nos vemos en la siguiente lección! :)
Todos los capítulos de este curso:
- Curso de PSD a theme de WordPress #1. Introducción
- Curso de PSD a theme de WordPress #2. Creando nuestro child theme
- Curso de PSD a theme de WordPress #3. Elementos comunes
- Curso de PSD a theme de WordPress #4. Página Inicio
- Curso de PSD a theme de WordPress #5. Página Sobre mi
- Curso de PSD a theme de WordPress #6. Página de servicios
- Curso de PSD a theme de WordPress #7. Página de Blog
- Curso de PSD a theme de WordPress #8. Página de post
- Curso de PSD a theme de WordPress #9. Página Contactar
- Curso de PSD a theme de WordPress #10. Adaptación a responsive