Começamos examinando alguns dos trabalhos pesados que fiz nos bastidores, detalhando algumas coisas que precisavam ser feitas. Como adicionar o restante das chamadas wp_list_pages () para gerar o restante da lista de fragmentos para cada categoria. E também adicionando no CSS para mudar a cor da barra que separa as categorias e as listas de snippets. Também mudamos as flutuações das categorias para clarear as cores em vez da borda branca estúpida que tínhamos temporariamente lá. Literalmente, usamos a lighten()função no Sass para fazer o trabalho por nós.
O objetivo neste screencast, entretanto, é estilizar a visualização para um único trecho. Se eu tivesse criado esta área do site mais recentemente, os snippets poderiam ser um tipo de postagem personalizada (como as capturas de tela de uma única galeria), mas eles não existiam quando comecei a fazer isso. Como tal, eles são apenas “Páginas” e todos usam um modelo de página personalizado. Não é grande coisa, na verdade, especialmente agora que ter muitas páginas não é uma preocupação de desempenho.
As páginas de snippets individuais serão muito parecidas com postagens de blog. A estrutura de grade padrão 2/3 1/3 e uma barra lateral normal. No entanto, existem algumas diferenças. Há uma hierarquia clara para snippets, por exemplo
Início »Snippets de código» Categoria de snippet »Nome do snippet
Isso é perfeito para a subnavegação “barra preta” que está evoluindo neste site. Nosso plugin Yoast SEO fornece funcionalidade de localização atual, portanto, é fácil - basta chamar uma função.
Outra diferença é que produzimos em the_modified_time()vez da data de publicação. Dessa forma, as pessoas sabem a última data em que um snippet foi atualizado, o que é mais relevante do que quando foi publicado. Também me dá alguma motivação para revisitar trechos regularmente.
Continuamos um pouco de lado, atualizando um trecho antigo apenas por diversão.
Terminamos escrevendo um pouco de JavaScript que fará com que nossas visualizações de subcategorias funcionem. Essas visualizações se parecem essencialmente com a nossa página inicial de trechos, apenas se você estiver em / snippets / javascript /, os trechos de JavaScript serão exibidos por padrão e a categoria de JavaScript destacada. Acredite ou não, apenas algumas linhas de URL sorrateiras com pico de código JavaScript que provavelmente deve ser um snippet de si mesmo.