Was Sie erstellen werden

Im vorherigen Tutorial habe ich Ihnen gezeigt, wie Sie die Beiträge auf Ihrer Blog-Hauptseite nach ihrer Kategorie gestalten und Farbkodierungen nach Kategorien erstellen.

Viele Websites, die diese Technik verwenden, machen dies auch weiter, indem sie jedem Abschnitt ihrer Website eine eigene Gestaltung hinzufügen, die mit der Gestaltung auf der Hauptblogseite oder der Startseite koordiniert wird. Sie können einfach ein einfaches Farbschema verwenden oder jedem Abschnitt ein völlig anderes Styling hinzufügen, möglicherweise mit einem anderen Logo oder Branding für verschiedene Bereiche Ihres Unternehmens oder sogar einem anderen Layout.

Ein Beispiel ist die London Times-Website, die für jeden Abschnitt ihrer Website eine andere Farbe verwendet. Die Titelseite verwendet diese Farben in einem Banner über jedem Beitrag, wie im Screenshot gezeigt:

Wenn Sie weiter in die Site navigieren, hat jeder Abschnitt eine eigene Farbe:

In diesem Tutorial arbeiten wir mit dem Styling, das der Startseite im vorherigen Tutorial hinzugefügt wurde, und fügen jedes Kategorienarchiv mit einem ähnlichen Styling hinzu. Wir ändern die Farbe der Posttitel und den Archivtitel selbst.

Was du brauchen wirst

Um diesem Tutorial zu folgen, benötigen Sie:

• eine Entwicklungsinstallation von WordPress
• ein Code-Editor

Wenn Sie bereits über ein Thema verfügen, für das Sie diese Technik verwenden möchten, arbeiten Sie an dem Stylesheet Ihres Themes. Ich werde ein untergeordnetes Thema des zwanzig fünfzehn Designs erstellen und das Stylesheet in meinem untergeordneten Thema bearbeiten.

Ihre Website wird wahrscheinlich bereits mit Beiträgen gefüllt. Damit meine Website einige Beiträge enthält, werde ich die Testdaten des WordPress-Themes herunterladen.

Wenn Sie dem vorherigen Tutorial bereits gefolgt sind und Ihrer Hauptblogseite ebenfalls kategoriebasiertes Styling hinzufügen, können Sie das Thema aus diesem Tutorial als Ausgangspunkt verwenden. Dies werde ich tun. Alternativ können Sie mit Ihrem vorhandenen Thema arbeiten oder ein neues Kindenthema von Twenty Fifteen erstellen.

Das Theme erstellen

Wenn Sie mit Ihrem eigenen Thema oder dem aus dem vorherigen Tutorial arbeiten, können Sie diesen Abschnitt überspringen. Sie müssen jedoch Folgendes tun, um ein untergeordnetes Thema von Twenty Fifteen zu erstellen.

In Ihrer Website WP-Inhalt / Themen Erstellen Sie einen neuen Ordner und geben Sie ihm einen Namen. Ich rufe meine an tutsplus-style-Beiträge nach Kategorie.

Erstellen Sie in diesem Ordner eine leere CSS-Datei mit dem Namen style.css und füge folgendes hinzu:

/ * Themenname: Tuts + Style Beiträge nach Kategorie Themen-URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Beschreibung: Theme Unterstützt Tuts + Tutorials für das Gestalten von Beiträgen nach Kategorie. Kindermotiv für das Thema Fünfundzwanzig. Autor: Rachel McCollin Autor URI: http://rachelmccollin.co.uk/ Vorlage: fünfundzwanzig Version: 1.0 * / @import url ("… /twentyfifteen/style.css");

Dies teilt WordPress alles mit, was es zum Erstellen eines untergeordneten Designs wissen muss, und importiert das Stylesheet von Twenty Fifteen. Sie möchten wahrscheinlich Ihren eigenen Namen und Details anstelle von meinen hinzufügen, aber dies gibt Ihnen eine Idee.

Aktivieren Sie jetzt Ihr Design.

Daten importieren

Wenn Ihre Site bereits Beiträge enthält, können Sie diesen Abschnitt überspringen, aber wie Sie die Testdaten der Themeneinheiten in Ihre Site importieren.

1. Gehen Sie auf die Testseite für die Themeneinheit und laden Sie die herunter xml Datei, die mit verlinkt ist.
2. Gehen Sie auf Ihrer Website zu Extras> Importieren. Klicke auf das WordPress Verknüpfung.
3. Klicke auf das Datei wählen und wählen Sie die Datei aus, die Sie gerade heruntergeladen haben. Drücke den Datei hochladen und importieren Taste.
4. Folgen Sie den Anweisungen und warten Sie, bis WordPress die Daten importiert.

Identifizieren von Stilen für das Ziel

WordPress verfügt über einige Vorlagen-Tags, die Klassen für Ihre Seiten und Beiträge ausgeben, wenn sie im Browser angezeigt werden. Diese sind:

• body_class (), die Sie dem hinzufügen Karosserie tag in einem thema header.php Datei: fügt Klassen zum hinzu Karosserie Element entsprechend dem Typ der angezeigten Seite.
• post_class (), Das funktioniert auf ähnliche Weise, wird aber mit Beiträgen in der Schleife verwendet.

Wenn Sie mit Ihrem eigenen Design arbeiten und diese Vorlagen-Tags noch nicht hinzugefügt haben, müssen Sie dies tun. Dieses Tutorial zum Arbeiten mit Klassen und IDs, die von WordPress generiert werden, zeigt Ihnen, wie dies geht.

Wenn Sie mit einem Kind des Twenty Fifteen-Themas arbeiten, wurden diese Tags bereits zum Twenty Fifteen-Design selbst hinzugefügt, sodass Sie nichts tun müssen.

Wenn Sie eine der Kategorieseiten Ihrer Website in einem Browser öffnen und die Ausgabe-HTML-Dateien mit Entwicklertools überprüfen, wird das angezeigt body_class () Template-Tag hat Ihrer Seite eine Reihe von Klassen hinzugefügt.

Hier die Karosserie Tag hat Klassen, die uns sagen, welche Art von Seite dies ist:

Diese Klassen sagen uns, dass wir uns unter anderem auf einer Kategorie-Archivseite für die Markup-Kategorie befinden. Die Klasse, die wir anvisieren wollen, ist die Kategorie-Markup Klasse.

Gestaltung von Titeln in der Archivliste

Wir fangen damit an, den Posttiteln eine Farbe entsprechend ihrer Kategorie hinzuzufügen. Fügen Sie im Stylesheet Ihres Themas Folgendes hinzu:

/ * Titel auf Archivseiten veröffentlichen * / .archive.category-markup .entry-title a: link, .blog .category-markup .entry-title a: besuchte color: # 6cd2c8;  .archive.category-markup .entry-title a: hover, .blog .category-markup .entry-title a: active color: # 120e5b;  .archive.category-template-2 .entry-title a: link, .archive.category-template-2 .entry-title a: besuchte color: # e5572f;  .archive.category-template-2 .entry-title a: hover, .archive.category-template-2 .entry-title a: active color: # 120e5b;  .archive.category-media-2 .entry-title a: link, .archive.category-media-2 .entry-title a: besuchte color: # 933bbe;  .archive.category-media-2 .entry-title a: hover, .archive.category-media-2 .entry-title a: active color: # 120e5b; 

Möglicherweise möchten Sie die Farben ändern, damit sie mit Ihrem Design zusammenarbeiten.

Speichern Sie nun Ihr Stylesheet und öffnen Sie eine Kategorieseite in Ihrem Browser. Meine Markup-Kategorieseite hat jetzt farbige Posttitel:

Und mein Medienarchiv hat Posttitel in einer anderen Farbe:

Beachten Sie, dass es in den Screenshots einen Beitrag gibt, der in beiden Archiven angezeigt wird, da er sich in vielen Kategorien befindet. Aus diesem Grund ist es wichtig, dass Sie die Klasse für die Kategorie im body-Tag Ihrer Archivseite anvisieren und nicht nur Kategorienkategorien für Beiträge in der Schleife.

Jetzt fügen wir auch eine Grenze hinzu. Fügen Sie dies Ihrem Stylesheet hinzu:

.archive.category-markup .entry-title padding-top: 0.5em; Border-Top: 2px # 6cd2c8 fest;  .archive.category-template-2 .entry-title padding-top: 0.5em; Border-Top: 2px # e5572f fest;  .archive.category-media-2 .entry-title padding-top: 0.5em; Border-Top: 2px # 933bbe fest; 

Dies fügt eine Auffüllung über den Posttiteln sowie einen Rahmen in derselben Farbe wie der Text hinzu. So sieht es auf meiner Template-Archivseite aus:

Den Archivtitel gestalten

Ich möchte nicht nur die einzelnen Postlisten gestalten, sondern auch den Titel des Archivs selbst mit Farbe versehen.

Zuerst identifiziere ich die Elemente und Klassen, auf die Sie abzielen, mit Hilfe von Entwicklertools:

Der Archivtitel wird wie folgt ausgegeben:

 
Kategorie: Vorlage
 
 
Beiträge mit vorlagenbezogenen Tests
 
 

Also müssen wir das Ziel anvisieren Kopfzeile und Seitentitel Klassen sowie die Klassen auf der Karosserie Tag für das Archiv.

Fügen Sie in Ihrem Stylesheet Folgendes hinzu:

.archive.category-markup .page-header .page-title color: # 6cd2c8;  .archive.category-template-2 .page-header .page-title color: # e5572f;  .archive.category-media-2 .page-header .page-title color: # 933bbe; 

Dadurch wird dem Archivtitel die Farbe hinzugefügt:

Jetzt ändern wir die Farbe des Rahmens entsprechend. Fügen Sie dies Ihrem Stylesheet hinzu:

.archive.category-markup .page-header border-left: 7px solid # 6cd2c8;  .archive.category-template-2 .page-header border-left: 7px solid # e5572f;  .archive.category-media-2 .page-header border-left: 7px solid # 933bbe; 

Dies ändert die Farbe des Rahmens entsprechend:

Zusammenfassung

Bei der Verwendung der von WordPress generierten Klassen für das Archivieren von Kategorieseiten und deren Formatierung müssen die Ausgabeklassen identifiziert und anschließend CSS als Ziel angegeben werden.

In diesem Lernprogramm haben Sie gelernt, wie Sie farbcodierte Abschnitte Ihrer Website nach Kategorie erstellen.

Sie könnten dies weiter ausführen, zum Beispiel durch:

• Verwenden der Abschnittsfarben für andere Elemente auf der Seite, z. B. den Seitentitel und das Navigationsmenü
• Hinzufügen von Hintergründen in Abschnittsfarben, z. B. in der Fußzeile
• Verwenden verschiedener Hintergrundbilder für jeden Abschnitt an Schlüsselstellen
• Ändern des Layouts für verschiedene Bereiche der Website
  

Es gibt viele Möglichkeiten, und wenn Sie diese Technik bis an die äußerste Grenze bringen, können Sie verschiedene Bereiche Ihrer Website erstellen, die sich völlig voneinander unterscheiden und den Eindruck erwecken, dass die Websites vollständig voneinander getrennt sind.