# 122: Creación del archivo de videos, parte 1 - Trucos CSS

Anonim

La página de archivo de videos es la parte del sitio donde las personas pueden explorar todos los videos gratuitos disponibles para ver. Es para navegar, debe gustar la página de inicio para los fragmentos o la página de inicio para las demostraciones.

Estas páginas son su propia plantilla, que podemos darle forma rápida y fácilmente, como lo hemos hecho muchas veces antes. Ponemos nuestro propio envoltorio alrededor de las cosas y usamos nuestra estructura de cuadrícula para darle un diseño de 2/3 1/3.

Lo que es muy emocionante para mí aquí es que tenemos la oportunidad de eliminar un antiguo marcado bruto y reemplazarlo con un marcado más inteligente y generado automáticamente. En el pasado, escribí a mano cada entrada en los archivos de video como una lista de definiciones. Para empezar, probablemente ese no sea el marcado semántico correcto para una lista de videos, especialmente cuando cada entrada comienza una nueva lista.

En su lugar, eliminamos todo ese antiguo marcado y, en su lugar, ejecutamos una consulta cuidadosamente diseñada para obtener todos los datos que necesitamos de WordPress. Ejecutamos un bucle sobre esa consulta y generamos un nuevo marcado que es más limpio (solo divs con clases). Esto nos va a ahorrar tiempo en el futuro, sin necesidad de mantener manualmente estas páginas de archivo.

Mientras escribimos este nuevo marcado, lo enriquecemos con funciones de WordPress que completan los bits que necesitamos para ser dinámicos. Los títulos son the_title(). Los enlaces son the_permalink(). Las miniaturas son campos personalizados. Fácil, descarado.

Los divs usan nombres de clases de nuestro sistema de cuadrícula para que todo el flotante, el tamaño y todo eso funcione automáticamente. ¿No somos eficientes? Sin embargo, algunos CSS deben ser personalizados, y escribimos eso cuando es necesario. Por ejemplo, ajustando el relleno para módulos específicamente en esta sección (era demasiado, lo reducimos). Este tipo de cosas es fácil de hacer a través de los nombres de clase disponibles para nosotros, ya que usamos inteligentemente body_class()cuando estábamos trabajando en la cabeza.