# 108: Erstellen einzelner Snippets Seite - CSS-Tricks

Anonim

Wir beginnen mit einem Blick auf einige der Grunzarbeiten, die ich hinter den Kulissen gemacht habe, um einige Dinge zu konkretisieren, die getan werden mussten. Wie das Hinzufügen der restlichen wp_list_pages () -Aufrufe, um den Rest der Liste der Snippets für jede Kategorie auszugeben. Fügen Sie außerdem das CSS hinzu, um die Farbe der Leiste zu ändern, die die Kategorien und die Listen der Snippets trennt. Wir haben auch die Schwebeflüge der Kategorien geändert, um die Farben anstelle des dummen weißen Randes aufzuhellen, den wir vorübergehend dort hatten. Wir haben buchstäblich die lighten()Funktion in Sass verwendet, um die Arbeit für uns zu erledigen.

Das Ziel in diesem Screencast ist es jedoch, die Ansicht für ein einzelnes Snippet zu gestalten. Wenn ich diesen Bereich der Site in jüngerer Zeit erstellt hätte, könnten Snippets ein benutzerdefinierter Beitragstyp sein (wie Screenshots einzelner Galerien), aber diese waren zu Beginn nicht vorhanden. Als solche sind sie nur "Seiten" und alle verwenden eine benutzerdefinierte Seitenvorlage. Eigentlich keine große Sache, besonders jetzt, wo es kein Leistungsproblem ist, viele Seiten zu haben.

Einzelne Snippets-Seiten werden Blog-Posts sehr ähnlich sein. Die Standard-Gitterstruktur 2/3 1/3 und eine normale Seitenleiste. Es gibt jedoch einige Unterschiede. Snippets haben eine klare Hierarchie, z

Startseite »Code-Snippets» Snippet-Kategorie »Snippet-Name

Dies ist perfekt für die Subnavigation „Schwarzer Balken“, die sich auf dieser Site entwickelt. Unser Yoast SEO-Plugin bietet Breadcrumb-Funktionen, so dass dies einfach ist - nur eine Frage des Aufrufs einer Funktion.

Ein weiterer Unterschied besteht darin, dass wir the_modified_time()anstelle des Veröffentlichungsdatums ausgeben . Auf diese Weise wissen die Benutzer, wann ein Snippet zuletzt aktualisiert wurde. Dies ist relevanter als bei der Veröffentlichung. Es gibt mir auch eine gewisse Motivation, Schnipsel regelmäßig zu besuchen.

Wir gehen ein wenig zur Seite und aktualisieren ein altes Snippet nur zum Spaß.

Zum Abschluss schreiben wir ein wenig JavaScript, damit unsere Unterkategorienansichten funktionieren. Diese Ansichten sehen im Wesentlichen genauso aus wie unsere Snippets-Homepage. Nur wenn Sie sich unter / snippets / javascript / befinden, werden die JavaScript-Snippets standardmäßig angezeigt und die JavaScript-Kategorie hervorgehoben. Ob Sie es glauben oder nicht, nur ein paar Zeilen hinterhältiger URL-Peaking-JavaScript-Code, der wahrscheinlich ein Ausschnitt aus sich selbst sein sollte.