Agora temos um design do Photoshop para trabalhar para a página inicial da área de Snippets. É muito mais navegável do que antes, mas mantém o espírito do arco-íris que tinha antes. Agora podemos pular para realmente construí-lo em nossos modelos WordPress. Escrever todo o HTML, PHP e CSS e VOCÊ CONHECE O EXERCÍCIO!
A primeira etapa é mover o cabeçalho personalizado que tínhamos pronto para usar em nosso design estático. Isso significa mudar um pouco de HTML para ter os elementos de wrapper corretos. Isso também significa garantir que a lógica condicional no cabeçalho esteja em vigor para carregar o CSS específico para essa área. Isso sempre me faz pensar na regra 1, 2 ou 3 que tenho para arquivos CSS e arquivos JavaScript em qualquer site. CSS-Tricks é um exemplo perfeito de website “2” onde temos estilos globais e um CSS para cada seção especial do site onde há um estilo único. Este layout de trechos é certamente único.
Para obter toda a saída de que precisamos nesta página, usamos um monte de chamadas wp_list_pages () novamente. Falamos sobre como isso pode ser problemático porque é uma chamada tão intensa e tivemos problemas com isso no passado, quando criamos a área do Almanaque. No entanto, como aumentamos nosso uso de memória e estamos usando cache, isso não é grande coisa.
Terminamos o screencast com tudo o que precisamos para a página e uma grade básica configurada. Agora podemos fazer com que pareça nossa maquete e, finalmente, adicionar as interações.