# 122: Construindo o arquivo de vídeos, Parte 1 - CSS-Tricks

Anonim

A página de arquivo de vídeos é a parte do site onde as pessoas podem navegar por todos os vídeos gratuitos disponíveis para assistir. É para navegar, deve gostar da homepage para os snippets ou da homepage para as demos.

Essas páginas são seus próprios modelos, que podemos rapidamente e facilmente moldar como fizemos muitas vezes antes. Colocamos nosso próprio invólucro ao redor das coisas e usamos nossa estrutura de grade para dar a ele um layout 2/3 1/3.

O que é muito empolgante para mim aqui é que temos a chance de remover algumas marcações grosseiras antigas e substituí-las por marcações mais inteligentes e geradas automaticamente. No passado, escrevia à mão cada entrada nos arquivos de vídeo como uma lista de definição. Para começar, essa provavelmente não é a marcação semântica certa para uma lista de vídeos, especialmente quando cada entrada inicia uma nova lista.

Em vez disso, retiramos toda a marcação antiga e, em vez disso, executamos uma consulta cuidadosamente elaborada para obter todos os dados de que precisamos do WordPress. Executamos um loop sobre essa consulta e geramos uma nova marcação que é mais limpa (apenas divs com classes). Isso vai nos poupar tempo no futuro, não precisamos fazer a manutenção manual dessas páginas de arquivo.

Enquanto estamos escrevendo esta nova marcação, estamos apimentando-a com funções do WordPress que preenchem as partes que precisamos para ser dinâmicos. Os títulos são the_title(). Os links são the_permalink(). As miniaturas são campos personalizados. Cheezy fácil.

Os divs usam nomes de classes de nosso sistema de grade para que toda a flutuação, dimensionamento e outras coisas funcionem automaticamente. Não somos eficientes? No entanto, alguns CSS precisam ser personalizados e escrevemos isso onde for necessário. Por exemplo, ajustar o preenchimento para módulos especificamente nesta seção (era demais, nós o reduzimos). Esse tipo de coisa é fácil de fazer por meio de nomes de classe disponíveis para nós, já que usávamos de body_class()forma inteligente quando estávamos trabalhando na cabeça.