En esta sexta clase del curso de PSD a Theme, trabajaremos con la página de servicios, creando una tabla de precios dinámica.
La idea es que el desarrollo que estamos llevando a cabo sirva a nuestro cliente, y le aporte el máximo valor posible, de tal modo que el sitio web resultante sea simple e intuitivo de utilizar.
Es por ello que en esta lección nos adentraremos en la segunda de las aproximaciones que te conté en la primera clase del curso.
6.1 - Estructura de la página de servicios
Para empezar, debemos crear la estructura de la tabla de precios. Obviamente, podríamos hacerlo con un plugin, sin embargo, esta no es la filosofía del curso.
De este modo, crearemos una tabla de precios simple con HTML, con contenido, en este momento, 100% estático.
6.2 - Estilo de la página de servicios
Una vez creada la tabla de precios, vamos a darle estilo, ya que el HTML por si sólo, queda un tanto triste.
Partiendo del diseño que nos han preparado, maquetaremos la estructura de contenido de tal modo que quede tal y como nos han indicado.
6.3 - Dinamización de la página de servicios
Llegados a este punto, podríamos dejarlo aquí. Hemos creado el contenido y lo hemos estilizado según el diseño establecido. Técnicamente, hemos cumplido.
Sin embargo, en esta clase vamos a ir un paso más allá.
Si recuerdas, en la cuarta clase del curso, creamos la página de inicio en base a widget areas. Un enfoque simple para nosotros pero quizás un poco complejo para nuestro cliente.
Es por ello que en este caso, vamos a aprender otra forma de trabajar, mucho más intuitiva y usable para el cliente: utilizar campos personalizados.
Gracias al plugin Advanced Custom Fields, del que también tienes un curso en boluda.com, vamos a crear los campos que, posteriormente, incluiremos en el template de la página de servicios.
Así, crearemos una interfaz de trabajo para el cliente a la medida de sus necesidades y las de su sitio web.
¡Ya lo tenemos! Ahora, nuestro cliente será capaz de introducir la información de la tabla de precios y modificarla a su antojo directamente desde el backend de WordPress.
De este modo, no va a ser necesario que se pelee con líneas de código y lenguajes que desconoce. Todo lo podrá llevar a cabo desde un entorno 100% amigable y funcional.
Desde luego, esta aproximación es nuestra favorita. Como has visto, no es nada compleja de desarrollar, y los resultados son muy superiores a optar por widget areas y, por supuesto, a trabajar con maquetadores visuales.
En la siguiente clase, la número 7, continuaremos avanzando en el desarrollo de nuestro theme. En este caso, trabajaremos con la página de blog. ¡Nos vemos!
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