Stilbeiträge nach Kategorie auf Ihrer Hauptblogseite

Was Sie erstellen werden

Große auf Nachrichten basierende Websites verwenden manchmal eine Art Stil, um zwischen den Abschnitten ihrer Website zu unterscheiden. Häufig hat dies für jeden Abschnitt unterschiedliche Farben.

Ein gutes 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:

Durch die Verwendung des Stylings für diese Bereiche Ihrer Website können Sie Ihre Homepage attraktiver gestalten und Besuchern dabei helfen, Inhalte in Kategorien zu finden, die sie regelmäßig lesen. In diesem Tutorial zeige ich Ihnen, wie Sie die von WordPress bereitgestellten Stile gezielt ansprechen, indem Sie die Beiträge auf Ihrer Hauptblogseite nach Kategorien gestalten.

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, in dem 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.

Das Theme erstellen

Wenn Sie mit Ihrem eigenen Thema arbeiten, können Sie diesen Abschnitt überspringen, aber wo müssen Sie vorgehen, 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.

Gehen Sie auf die Testseite für die Themeneinheit und laden Sie die herunter xml Datei, die mit verlinkt ist.
Gehen Sie auf Ihrer Website zu Extras> Importieren. Klicke auf das WordPress Verknüpfung.
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.
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 die Homepage Ihrer Website in einem Browser öffnen und mit Hilfe von Entwicklertools den Ausgabe-HTML-Code prüfen, werden Sie feststellen, dass diese Tags eine Reihe von Klassen zu Ihrer Seite hinzugefügt haben.

Folgendes erhalte ich, wenn ich die Startseite meiner Website sehe:

Das Body-Tag wird ausgegeben als:

Das Zuhause und Blog Klassen sagen mir, dass dies die Homepage der Site ist und dass es die Hauptblogseite ist. Ich kann diese Klassen verwenden, um CSS auf meiner Startseite als Ziel festzulegen.

Ähnliches passiert bei Beiträgen:

Der Artikel, den ich ausgewählt habe, ist markiert als:

Das sind viele Klassen! Diese sagen uns ein paar Dinge über die Post: ID, Art der Post, Status, Format, Kategorie und Tags. Sie können alle diese Optionen verwenden, um Ihr Styling zu optimieren. Was wir hier verwenden werden, ist das Kategorie-Markup Klasse.

Die Beiträge gestalten

Nun, da ich herausgefunden habe, welche Klassen ich anvisieren muss, ist es an der Zeit, Styling hinzuzufügen. Ich werde es subtil halten und einfach die Textfarbe jedes Titels ändern, die sich in einem Link in einem befindet

Etikett.

Öffnen Sie das Stylesheet Ihres Themes und fügen Sie Folgendes hinzu:

.blog .category-markup .entry-title a: link, .blog .category-markup .entry-title a: besuchte color: # 6cd2c8;  .blog .category-markup .entry-title a: hover, .blog .category-markup .entry-title a: active color: # 120e5b;

Ich habe eine Nuance Cyan für die verwendet Verknüpfung und hat besucht Staaten und eine Marine für die schweben und aktiv Status: Sie können diese in Farben ändern, die zu Ihrem Design passen.

Speichern Sie jetzt Ihr Stylesheet und aktualisieren Sie Ihre Blogseite. Sie sehen, dass Beiträge mit der Zielkategorie nun eine andere Farbüberschrift haben:

Fügen Sie nun weitere Farben für die anderen Kategorien in Ihrem Blog hinzu:

.blog .category-template-2 .entry-title a: link, .blog .category-template-2 .entry-title a: besuchte color: # e5572f;  .blog .category-template-2 .entry-title a: hover, .blog .category-template-2 .entry-title a: active color: # 120e5b;  .blog .category-media-2 .entry-title a: link, .blog .category-media-2 .entry-title a: besuchte color: # 933bbe;  .blog .category-media-2 .entry-title a: hover, .blog .category-media-2 .entry-title a: active color: # 120e5b;

Passen Sie die Farben erneut an Ihr Branding an. Sie haben jetzt eine Reihe von Farben für Ihre Posttitel.

Wenn Sie möchten, können Sie Rahmen hinzufügen oder die Farbe der Titel ändern oder auch ändern:

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

Nun haben meine Beiträge einen subtilen Rahmen sowie die Farbänderung für den Beitragstitel:

Dies führt die Besucher zu verschiedenen Kategorien auf meiner Website, ohne dabei zu grell zu sein.

Zusammenfassung

Weil uns WordPress das gibt body_class () und post_class () Mit Vorlagen-Tags können Sie eine bestimmte Seite Ihrer Website als Ziel auswählen und anschließend die Posts in jeder Kategorie als Ziel festlegen und sie unterschiedlich gestalten.

In diesem Lernprogramm haben Sie gelernt, wie Sie festlegen, welche Klassen anvisiert werden sollen, und für jede Kategorie ein Styling hinzufügen, um Besuchern visuelle Hinweise zur Struktur Ihrer Website zu geben.

Im nächsten Tutorial zeige ich Ihnen, wie Sie dies erweitern und die verschiedenen Bereiche Ihrer Site unterschiedlich gestalten können.

Code