Share
In einem früheren Tutorial habe ich Ihnen gezeigt, wie Sie die Kategorien in Ihrer Site anders gestalten können. Wenn Ihre Site Abschnitte für jede Postkategorie enthält, können Sie sie ganz anders aussehen lassen.
Aber was ist, wenn Ihre Site auf statischen Seiten basiert? Es ist nicht ungewöhnlich, große Websites zu sehen, die auf einer hierarchischen Seitenstruktur basieren. Daher können Sie diese Techniken für eine solche Site verwenden?
Die Antwort ist ja. WordPress gibt Ihnen einige CSS-Klassen, die sich auf die Seitenstruktur Ihrer Site beziehen, mit der Sie das Styling anvisieren und Abschnitte für Ihre seitenbasierte Site erstellen können, die ganz anders aussehen.
In diesem Lernprogramm arbeiten wir mit einer Site, die auf hierarchischen Seiten basiert, und gestalten jeden Abschnitt der Site mit einer anderen Farbe für jeden Abschnitt. Wir betrachten auch eine alternative Technik, die auf dem Hinzufügen von Kategorien zu Seiten basiert.
Um diesem Tutorial zu folgen, benötigen Sie:
Wenn Sie bereits über ein Thema verfügen, für das Sie diese Technik verwenden möchten, arbeiten Sie an der Stylesheet- und Funktionsdatei Ihres Themas. Ich werde ein untergeordnetes Thema des zwanzig fünfzehn Designs erstellen und die Stylesheet- und Funktionsdatei 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 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-seitenweise.
Erstellen Sie in diesem Ordner eine leere CSS-Datei mit dem Namen style.css und füge folgendes hinzu:
Accentsconagua
/ * Themenname: Tuts + Styleseiten nach Abschnitt Theme URI: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Beschreibung: Theme Tuts + Tutorial für das Gestalten von Seiten in jedem Abschnitt einer Website unterschiedlich zu unterstützen. 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.
Wenn für Ihre Site bereits Seiten eingerichtet sind, können Sie diesen Abschnitt überspringen. Im Folgenden erfahren Sie, wie Sie die Testdaten der Themeneinheiten in Ihre Site importieren.
xml Datei, die mit verlinkt ist.Standardmäßig weist WordPress dem Hauptmenü ein Navigationsmenü mit allen Blogkategorien zu und legt die Blogseite als Startseite fest. Da wir mit statischen Seiten arbeiten, müssen Sie dies im WordPress-Administrator ändern.
WordPress verwendet die body_class () Template-Tag zur Ausgabe von Klassen gemäß dem angezeigten Seitentyp. Sie fügen dieses Tag Ihrem Thema hinzu header.php Datei: fügt Klassen zum hinzu Karosserie Element entsprechend dem Typ der angezeigten Seite.
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 Seiten Ihrer Website in einem Browser öffnen und Entwickler-Tools verwenden, um den Ausgabe-HTML-Code zu überprüfen, wird das angezeigt body_class () Template-Tag hat Ihrer Seite eine Reihe von Klassen hinzugefügt. Hier habe ich eine untergeordnete Seite geöffnet:
Das Karosserie Element wird mit mehreren Klassen ausgegeben:
Diese sagen dem Browser, dass wir uns auf einer statischen Seite befinden, der ID der Seite, der Tatsache, dass es sich um ein Kind handelt und wovon es ein Kind ist, und seiner Seitenvorlage, unter anderem.
Wir werden zwei dieser Klassen verwenden, um Seiten in verschiedenen Teilen der Website als Ziel festzulegen: Die, die sich auf die Seiten-ID und die übergeordnete Seite beziehen.
Um Seiten in einem Abschnitt einer hierarchischen Site als Ziel festzulegen, verwenden wir zwei Klassen: die Seiten-ID für die übergeordnete Seite und die übergeordnete Seiten-ID für die untergeordneten Seiten.
Zuerst müssen Sie die IDs Ihrer Top-Level-Seiten identifizieren. Öffnen Sie dazu jeweils die Administrationsbildschirme und prüfen Sie die URL für den Bearbeitungsbildschirm. Die URL enthält den Text 'post = X', wobei X die eindeutige ID der Seite ist. Ignorieren Sie die Tatsache, dass "post" und nicht "page" (Seiten sind eigentlich eine Art Post) angegeben werden, und verwenden Sie diese ID, um Ihr Styling zu steuern.
In meiner Website sind die IDs der obersten Seiten mit Kindern 5 und 17, und die Seiten ohne Kinder haben die IDs 146, 701, 703, 733 und 735. Ich werde für jede der beiden hierarchischen Abschnitte eine Farbe verwenden und noch eine für die Seiten ohne Kinder. Wenn Ihre Seiten alle in Abschnitten sind, können Sie für jeden Abschnitt eine andere Farbe verwenden.
Öffnen Sie das Stylesheet Ihres Themes und fügen Sie das folgende CSS hinzu:
.page-id-5 h1, .parent-pageid-5 h1 color: # 6cd2c8; .page-id-17 h1, .parent-pageid-17 h1 color: # e5572f; .page-id-146 h1, .page-id-701 h1, .page-id-703 h1, .page-id-733 h1, .page-id-735 h1 color: # 933bbe;
Hinweis: Sie müssen die Post- und Eltern-IDs entsprechend Ihrer eigenen Website ändern. Möglicherweise möchten Sie die Farben an Ihr Design anpassen.
Speichern Sie jetzt Ihr Stylesheet und sehen Sie sich Ihre Site an. Meine Website verwendet die Farben in jedem Abschnitt. Hier ist eine Seite ohne Hierarchie:
Und eine Top-Level-Seite:
Hier ist ein Kind dieser Top-Level-Seite:
Bei diesem Ansatz gibt es jedoch einige Probleme. Die erste ist, dass ich für jede der Top-Level-Seiten manuell Klassen hinzufügen musste, was bedeutet, wenn jemand meiner Site in Zukunft weitere Abschnitte oder Top-Level-Seiten hinzufügt oder eine meiner Top-Level-Seiten an eine andere Stelle in der Hierarchie gibt es für sie kein Styling. Die zweite ist, dass dies nur für direkte Kinder meiner Top-Level-Seiten funktioniert. Keines meiner Stylings gilt für Enkel der Seiten.
Wenn Ihre Website über eine mehrstufige Hierarchie verfügt, ist dies sehr schwer zu implementieren, da Sie untergeordnete Elemente aller untergeordneten Elemente Ihrer obersten Seiten anvisieren müssen. Unmöglich, wenn regelmäßig neue Seiten hinzugefügt werden!
Ich brauche also eine alternative Methode, nämlich Kategorien zu verwenden.
Standardmäßig weist WordPress den Seiten keine Kategorien zu. Sie können jedoch Seiten mit einer Funktion problemlos Kategorien hinzufügen. Dazu verwenden Sie die register_taxonomy_for_object_type () Funktion, die in diesem Lernprogramm zur Zuordnung von Kategorien zu Anhängen erläutert wird.
Öffne dein Thema Functions.php Datei oder, falls noch nicht vorhanden, eine erstellen. Fügen Sie Folgendes hinzu:
Funktion tutsplus_add_categories_to_pages () register_taxonomy_for_object_type ('category', 'page'); add_action ('init', 'tutsplus_add_categories_to_pages');Das wird das hinzufügen 'Kategorie' Taxonomie auf die 'Seite' Objekttyp bedeutet, dass Sie Seiten Kategorien zuordnen können.
Dies bedeutet jedoch nicht, dass die body_class () tag gibt die Kategorie als eine der Klassen auf einer Seite mit Kategorien aus, da Seiten standardmäßig keine Kategorien haben.
Sie können dies ändern, indem Sie eine Funktion schreiben und an die anhängen body_class Filterhaken. Fügen Sie dies erneut in Ihre Funktionsdatei ein:
Funktion tutsplus_add_categories_to_body_class ($ classes) if (is_page ()) $ categories = get_the_category ($ post-> ID); foreach ($ categories als $ category) $ classes [] = 'category-'. $ category-> slug; Rückgabe von $ classes; add_filter ('body_class', 'tutsplus_add_categories_to_body_class');Dadurch wird eine Funktion erstellt tutsplus_add_categories_to_body_class () mit der Variable $ Klassen als sein Objekt. Es prüft, ob wir uns auf einer Seite befinden, und erstellt in diesem Fall eine Variable namens $ categories welche alle Kategorien enthält, in denen sich die Seite befindet. Dann fügt sie für jede Kategorie den Kategorie-Slug hinzu (vorangestellt mit 'Kategorie-' für die Konsistenz) auf die $ Klassen Array und gibt diese zurück. Zum Schluss haken Sie die Funktion an die body_class filtern, fügt er das Ausgabearray der Slugs zu den Klassen hinzu, die von der ausgegeben werden body_class () Vorlagen-Tag.
Versuchen Sie nun, den Seiten Ihrer Website einige Kategorien hinzuzufügen, um ihnen Abschnitte zu geben. Ich füge eine Kategorie von Abschnitt 1, Abschnitt 2 und Abschnitt 3 hinzu. Stellen Sie sicher, dass sich jede Seite nur in einem Abschnitt befindet.
So sehen meine Seiten in den Admin-Bildschirmen mit hinzugefügten Kategorien aus:
Im nächsten Schritt fügen Sie den Zielseiten in den einzelnen Abschnitten Stil hinzu. Ich werde die Überschriftenfarbe nicht ändern, da ich dies bereits mit der Seitenhierarchie getan habe. Stattdessen füge ich eine Grenze hinzu.
Fügen Sie im Stylesheet Ihres Themas Folgendes hinzu (oder ähnliches, indem Sie die Slugs für Ihre Kategorien und die verwendeten Farben verwenden):
.page.category-section-1 h1 border-bottom: 2px solid # 933bbe; Polsterung: 0.5em; .page.category-section-2 h1 border-bottom: 2px fest # 6cd2c8; Polsterung: 0.5em; .page.category-section-3 h1 border-bottom: 2px fest # e5572f; Polsterung: 0.5em;
Speichern Sie nun Ihr Stylesheet und überprüfen Sie Ihre Seiten.
Hier ist eine Seite in Abschnitt 1:
Wenn Sie Ihre Website überprüfen, werden Sie feststellen, dass jede Seite, der Sie eine der Kategorien mit gezieltem Stil zugewiesen haben, den richtigen Stil hat, unabhängig davon, wo sie sich in der Seitenhierarchie befindet. Auf diese Weise können Sie die Gestaltung genauer steuern und Bereiche einer Website mit einer mehrstufigen Hierarchie gestalten.
Der andere Vorteil dieses kategoriebasierten Ansatzes ist, dass Sie ihn für Seiten und Posts auf Ihrer Website verwenden können. Wenn Sie also bereits kategoriebasiertes Styling für Ihre Blogbeiträge verwendet haben, können Sie dies problemlos auch auf statische Seiten anwenden.
Wenn Ihre Site auf einer hierarchischen Seitenstruktur basiert, enthält sie wahrscheinlich Abschnitte, denen Sie möglicherweise eine eindeutige Identität geben möchten.
In diesem Lernprogramm haben Sie zwei Möglichkeiten kennengelernt, um das Styling auf Seiten in verschiedenen Abschnitten Ihrer Website anzupassen.
Zuerst haben Sie die Seitenhierarchie verwendet, die den Vorteil hat, mit Standard-WordPress-Einstellungen zu arbeiten, aber den Nachteil, dass sie nicht mehr als zwei Ebenen mit einer Hierarchie arbeitet.
Schließlich haben Sie gelernt, wie Sie Kategorien auf Seiten anwenden und Kategorien hinzufügen body_class () Tag für Seiten, und schreiben Sie dann CSS für die Klassen, die WordPress ausgibt.
