Wir haben jetzt ein Photoshop-Design für die Homepage des Snippets-Bereichs. Es ist viel besser durchsuchbar als zuvor, behält aber den Regenbogen-Geist, den es vorher hatte. Jetzt können wir tatsächlich mit dem Erstellen in unseren WordPress-Vorlagen beginnen. All das HTML und PHP und CSS schreiben und SIE WISSEN, WAS ZU TUN IST!
Schritt eins ist das Übernehmen unseres benutzerdefinierten Headers, den wir in unserem statischen Design vorbereitet hatten. Das bedeutet, ein wenig HTML zu ändern, um die richtigen Wrapper-Elemente zu haben. Es bedeutet auch, sicherzustellen, dass die bedingte Logik im Header vorhanden ist, um das spezifische CSS für diesen Bereich zu laden. Das erinnert mich immer an die 1, 2 oder 3 Regel, die ich für CSS- und JavaScript-Dateien auf jeder Website habe. CSS-Tricks ist ein perfektes Beispiel für eine "2"-Website, auf der wir globale Stile und ein CSS für jeden speziellen Bereich der Website haben, der viel einzigartige Styling-Elemente aufweist. Dieses Snippets-Layout ist sicherlich einzigartig.
Um alle benötigten Ausgaben auf dieser Seite zu erhalten, verwenden wir wieder eine Reihe von wp_list_pages()-Aufrufen. Wir sprechen darüber, wie dies problematisch sein könnte, da es ein sehr intensiver Aufruf ist und wir in der Vergangenheit Probleme damit hatten, als wir den Almanac-Bereich erstellten. Da wir jedoch unsere Speichernutzung erhöht und Caching verwenden, ist es kein großes Problem.
Wir beenden den Screencast damit, dass alles, was wir brauchen, auf der Seite ausgegeben wird und ein sehr grundlegendes Raster eingerichtet ist. Jetzt können wir dazu übergehen, es wie unser Mockup aussehen zu lassen und schließlich die Interaktionen hinzuzufügen.