Ahora tenemos un diseño de Photoshop desde el que trabajar para la página de inicio del área de Snippets. Es mucho más fácil de navegar que antes, pero mantiene el espíritu del arco iris que tenía antes. Ahora podemos empezar a construirlo en nuestras plantillas de WordPress. Escribiendo todo el HTML y PHP y CSS y ¡CONOCES EL TALADRO!
El primer paso es moverse sobre nuestro encabezado personalizado que teníamos listo para usar en nuestro diseño estático. Eso significa cambiar un poco de HTML para tener los elementos de envoltura correctos. También significa asegurarse de que la lógica condicional en el encabezado esté en su lugar para cargar el CSS específico de esta área. Esto siempre me hace pensar en la regla 1, 2 o 3 que tengo para los archivos CSS y JavaScript en cualquier sitio web. CSS-Tricks es un ejemplo perfecto de un sitio web "2" donde tenemos estilos globales y un CSS para cada sección especial del sitio donde tiene bastante estilo único. Este diseño de fragmentos es ciertamente único.
Para obtener toda la salida que necesitamos en esta página, usamos un montón de llamadas a wp_list_pages () nuevamente. Hablamos sobre cómo esto podría ser problemático porque es una llamada muy intensa y hemos tenido problemas con ella en el pasado cuando creamos el área de Almanaque. Sin embargo, dado que hemos aumentado nuestro uso de memoria y estamos usando el almacenamiento en caché, no es un gran problema.
Terminamos el screencast con todo lo que necesitamos imprimir en la página y una configuración de cuadrícula muy básica. Ahora podemos pasar a hacer que se vea como nuestra maqueta y finalmente agregar las interacciones.
