Wir haben jetzt ein Photoshop-Design für die Homepage des Snippets-Bereichs. Es ist viel durchsuchbarer als zuvor, behält aber den Regenbogengeist bei, den es zuvor hatte. Jetzt können wir damit beginnen, es tatsächlich in unseren WordPress-Vorlagen zu erstellen. Schreiben Sie alle HTML und PHP und CSS und Sie kennen den Bohrer!
Schritt eins ist das Übergehen unseres benutzerdefinierten Headers, den wir für unser statisches Design bereit hatten. Das bedeutet, ein wenig HTML zu ändern, um die richtigen Wrapper-Elemente zu erhalten. Dies bedeutet auch, dass sichergestellt werden muss, dass die bedingte Logik im Header vorhanden ist, um das für diesen Bereich spezifische CSS zu laden. Dies lässt mich immer an die 1, 2 oder 3-Regel denken, die ich für CSS-Dateien und JavaScript-Dateien auf einer bestimmten 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 Abschnitt der Website haben, für den es einiges an einzigartigem Styling gibt. Dieses Snippets-Layout ist sicherlich einzigartig.
Um die gesamte Ausgabe auf dieser Seite zu erhalten, die wir benötigen, verwenden wir erneut eine Reihe von wp_list_pages () -Aufrufen. Wir sprechen darüber, wie problematisch dies sein könnte, weil es ein so intensiver Anruf ist und wir in der Vergangenheit Probleme damit hatten, als wir den Almanach-Bereich erstellt haben. Da wir jedoch die Speichernutzung erhöht haben und Caching verwenden, ist dies keine große Sache.
Wir beenden den Screencast mit allem, was wir auf der Seite ausgeben müssen, und einem sehr einfachen Raster. Jetzt können wir es so gestalten, dass es wie unser Modell aussieht, und letztendlich die Interaktionen hinzufügen.