# 122: Erstellen des Videoarchivs, Teil 1 - CSS-Tricks

Anonim

Die Videoarchivseite ist der Teil der Website, auf dem Benutzer alle kostenlosen Videos durchsuchen können, die zum Ansehen verfügbar sind. Es ist zum Surfen gedacht, muss die Homepage für die Snippets oder die Homepage für die Demos mögen.

Diese Seiten sind ihre eigenen Vorlagen, die wir sehr schnell und einfach in Form bringen können, wie wir es schon oft getan haben. Wir legen einen eigenen Wrapper um die Dinge und verwenden unsere Gitterstruktur, um ein 2/3 1/3 Layout zu erhalten.

Was für mich hier sehr aufregend ist, ist, dass wir die Chance bekommen, ein altes Brutto-Markup herauszureißen und es durch ein intelligenteres und automatisch generiertes Markup zu ersetzen. In der Vergangenheit habe ich jeden Eintrag in das Videoarchiv als Definitionsliste von Hand geschrieben. Für den Anfang ist dies wahrscheinlich nicht das richtige semantische Markup für eine Liste von Videos, insbesondere wenn jeder Eintrag eine neue Liste startet.

Stattdessen reißen wir all das alte Markup heraus und führen stattdessen eine sorgfältig gestaltete Abfrage aus, um alle Daten zu sammeln, die wir von WordPress benötigen. Wir führen eine Schleife über diese Abfrage durch und geben ein neues Markup aus, das sauberer ist (nur Divs mit Klassen). Dies spart uns in Zukunft Zeit und muss diese Archivseiten nicht von Hand warten.

Während wir dieses neue Markup schreiben, peppen wir es mit WordPress-Funktionen auf, die die Bits ausfüllen, die wir brauchen, um dynamisch zu sein. Die Titel sind the_title(). Die Links sind the_permalink(). Die Miniaturansichten sind benutzerdefinierte Felder. Einfach frech.

Die Divs verwenden Klassennamen aus unserem Rastersystem, sodass das Floating, die Größe und das Material automatisch funktionieren. Sind wir nicht effizient? Einige CSS müssen jedoch benutzerdefiniert sein, und wir schreiben, wo wir müssen. Zum Beispiel das Anpassen der Polsterung für Module speziell in diesem Abschnitt (es war zu viel, wir haben es reduziert). Diese Art von Dingen ist einfach über Klassennamen zu erledigen, die uns zur Verfügung stehen, da wir sie vor body_class()langer Zeit intelligent verwendet haben , als wir am Kopf gearbeitet haben.