Eine hilfreiche Funktion von WordPress ist die Art und Weise, wie Klassen und IDs generiert werden. Einige davon werden vom System selbst generiert, während Sie in anderen Fällen PHP in Ihr Design einfügen, das von WordPress verwendet wird, um Klassen und IDs zur Seitenmarkierung hinzuzufügen.
In diesem Tutorial werde ich drei Möglichkeiten aufzeigen, wie WordPress dies ausführt, und praktische Anwendungen und Beispiele für beide bereitstellen. Die drei Bereiche, mit denen ich mich beschäftige, lauten wie folgt:
Klassen und IDs, die für Bilder generiert werden, die Sie über den Medien-Uploader in WordPress hochladen
Vorlagen-Tags, die in den Vorlagendateien eines Themas verwendet werden, um Klassen und IDs basierend auf dem Inhalt und der angezeigten Seite zu generieren
Parameter, die Sie beim Registrieren von Widgets und Menüs festlegen können (oder die bereits in einem gut geschriebenen Thema festgelegt werden), mit denen Klassen und IDs generiert werden, die für bestimmte Widgetarten, einzelne Widgets und Menüelemente relevant sind
Für jeden von ihnen werde ich erklären, wie sie funktionieren, und dann anhand von Beispielen demonstrieren.
Was Sie benötigen, um dieses Lernprogramm abzuschließen
Um den praktischen Beispielen in diesem Lernprogramm zu folgen, benötigen Sie:
Eine Entwicklungsinstallation von WordPress
Ein Thema, das Sie bearbeiten können
Ich arbeite mit einem untergeordneten Thema von Twenty Twelve - Sie können auf die Designdateien im Code-Bundle zugreifen.
Vom Medien-Uploader für Bilder erzeugte Klassen und IDS
Wenn Sie Bilder über den Media Uploader hochladen, können Sie festlegen, wie das Bild ausgerichtet werden soll (siehe Abbildung). Sie werden auch gefragt, welche Bildgröße Sie anzeigen möchten: Miniaturansicht, mittlere, große oder volle Größe.
Basierend auf Ihrer Auswahl weist WordPress die Zuweisung zu Tag für Ihre hochgeladenen Bilder eine Reihe von Klassen. Die Klassen für die Ausrichtung sind wie folgt:
.Alignnone
.im Zentrum anordnen
.rechts ausrichten
.linksbündig
Darüber hinaus weist WordPress die .wpcaption Klasse zu jeder Bildunterschrift, die Sie zu einem Bild hinzufügen. Untertitel haben diese Klasse sowie eine der oben genannten Ausrichtungsklassen, je nachdem, wie Sie das Bild ausrichten.
WordPress fügt auch Klassen für jede Bildgröße hinzu:
.Größe voll
.Größe groß
.Konfektionsgröße M
.Größe-Miniaturansicht
Sie können diese zum Gestalten von Bildern mit jeder Dateigröße verwenden.
Die meisten Themen enthalten CSS, um jede dieser Klassen entsprechend zu gestalten. Zum Beispiel enthält das Thema Zwanzig Zwölf folgende Elemente:
Das obige CSS richtet alle Elemente (nicht nur Bilder) an der aus .linksbündig, .rechts ausrichten oder .im Zentrum anordnen Klasse, was bedeutet, dass Sie diese Klassen auch verwenden können, um Inhalte anders als Bilder zu gestalten, wenn Sie möchten.
Außerdem werden Bildern, die diese Klassen aufweisen, Ränder hinzugefügt, und es wird sichergestellt, dass vollständige und große Bilder nicht mit ihrem umgebenden Element verlaufen Max-Breite: 100%.
Sie können den Effekt in der Abbildung unten sehen. Das erste Bild ist rechts ausgerichtet und das zweite ist zentriert und in voller Größe.
Fügen Sie mit diesen Klassen und IDs Ihr eigenes Styling hinzu
Neben dem Festlegen von Ausrichtung und Rändern für jede dieser Klassen können Sie sie verwenden, um weitere Formatierungen hinzuzufügen.
Das erste Bild in der Abbildung oben ist rechtsbündig. Wenn die Größe des Bildschirms geändert wird, bleibt die Größe des Bildschirms unverändert, und der Text wird unregelmäßig umschlossen:
Sie können ein Styling hinzufügen, um sicherzustellen, dass jedes rechtsbündige Bild nicht mehr als 50% der Bildschirmbreite einnimmt. Der Text wird dadurch besser umbrochen, indem Sie Ihrem Stylesheet das folgende CSS hinzufügen:
img.alignright max-Breite: 50%;
Wenn die Seite nun auf einem schmalen Bildschirm angezeigt wird, ist das Bild weniger dominant:
Sie können nicht nur CSS für Layout oder Größenänderung hinzufügen, sondern auch Bilder, die auf bestimmte Weise ausgerichtet sind, mit einem dekorativen Stil versehen. Wenn Sie zentrierten Bildern in voller Größe ein dekoratives Styling hinzufügen möchten, fügen Sie Ihrem Stylesheet Folgendes hinzu:
Dies fügt dem Bild einen Rahmen hinzu und verringert seine Größe:
Vorlagen-Tags zum Hinzufügen von Klassen und IDs
Die Klassen und IDs, die wir uns für Bilder angesehen haben, werden von WordPress selbst generiert. Andere Klassen und IDs können durch Vorlagen-Tags in Ihrem Design generiert werden.
Hinweis: Wenn Sie nicht mit Vorlagetags vertraut sind, lesen Sie den Artikel des Codex-Vorlagetags.
Es gibt zwei Sätze von Vorlagen-Tags: einen für den HTML-Tag und zwei, die für einzelne Beiträge gelten.
Das body_class () Template-Tag
Ein gut geschriebenes Thema enthält das folgende Tag header.php Datei:
>
Dies ersetzt das Normal Etikett. Das body_class () Template-Tag weist WordPress an, der Klasse Klassen zuzuweisen Tag basierend auf der angezeigten Seite und der verwendeten Vorlagendatei aus dem aktiven Design.
Die Liste der Klassen, die erzeugt werden können, ist lang und Sie können sie im WordPress-Codex finden.
Einige Beispiele sind:
.Zuhause für die Homepage
.Einzel-Post-ID Wenn ein einzelner Beitrag angezeigt wird, wobei ID die numerische ID dieses Beitrags ist
.Archiv für jede Archivseite
.Seitenvorlage- Dateiname -php wenn eine benutzerdefinierte Seitenvorlage verwendet wird
Wenn Sie weitere Klassen hinzufügen möchten Tags, die nicht von WordPress generiert werden, können Sie. Um beispielsweise die Klasse "Hallo" hinzuzufügen, lautet der Code:
>
Sie können auf diese Weise beliebig viele Klassen hinzufügen und diese durch Leerzeichen trennen.
Sie können die von der generierten Klassen verwenden body_class () Tag, um einen Stil hinzuzufügen, der für einen bestimmten Ort in der Site oder eine Vorlagendatei oder für Elemente in dieser Vorlagendatei spezifisch ist.
Zum Beispiel habe ich in meinem untergeordneten Design eine Seitenvorlage erstellt, die als aufrufend bezeichnet wird page-full-width-with-sidebar.php, Hier können Seiten angezeigt werden, deren Inhalt in voller Breite und die Seitenleiste unterhalb des Inhalts und nicht rechts davon angezeigt wird. Diese Seitenvorlage finden Sie im Code-Bundle.
Verwendung der body_class () Tag, generiert WordPress eine .page-template-page-full-width-with-sidebar-php Klasse für die Tag (unter anderen Klassen).
Um Elemente auf einer Seite mit dieser Vorlage zu gestalten, fügen Sie Ihrem Stylesheet daher Folgendes hinzu:
Hiermit wird die Breite des Hauptinhalts und der Seitenleiste (#sekunde) auf 100% und richtet auch die Widgets in der Seitenleiste nebeneinander aus. Sie können den Effekt im Screenshot sehen:
Hinweis: Wenn Ihr Design reagiert, stellen Sie sicher, dass Sie die Breite der Widgets auf den schmalen Bildschirmen Ihrer Medienabfragen anpassen.
Das post_class () und post_ID () Vorlagen-Tags
Diese Tags funktionieren ähnlich wie die body_class () tag, aber Sie verwenden sie mit einzelnen Beiträgen in der Schleife anstelle von Element.
Im Zwanzig Zwölf-Thema wird zum Beispiel jeder Beitrag in der Schleife in ein Element mit folgenden Tags:
> // hier Inhalt
Dies generiert eine Anzahl von Klassen basierend auf der Kategorie und dem Typ des Beitrags und eine ID auf der Grundlage der numerischen ID des Beitrags. Bei einem Post auf meiner Demo-Site mit der Kategorie "rot" werden beispielsweise folgende Klassen und IDs generiert:
// Inhalt
Sie können diese Klassen verwenden, um Beiträge aus einzelnen Kategorien unterschiedlich zu gestalten. In der Demo-Site gibt es drei Kategorien: 'rot', 'blau' und 'wichtig'..
Um diese zu gestalten, fügen Sie dem Stylesheet des Themes das folgende CSS hinzu:
/ * Beiträge in 'roter' Kategorie * / .category-red border-top: 2px solid # cc0000; / * Beiträge in 'blauer' Kategorie * / .category-blue border-top: 2px solid # 3366ff; / * style posts in 'important' category * / .blog .category-important padding-top: 2em; Rand links: 2em; .category-important: vor content: 'DIESES POST LESEN! ES IST WICHTIG';
Dadurch wird für jede der Kategorien ein Stil hinzugefügt: ein farbiger Rahmen für jede der Farbkategorien und ein zusätzlicher Rand für die Kategorie "wichtig". Es wird auch ein Pseudoelement verwendet, um vor jedem Beitrag in der Kategorie "wichtige" zusätzlichen Inhalt einzufügen.
Das Ergebnis wird im Screenshot gezeigt.
Klassen und IDs mit Widgets und Menüs verwenden
Wenn Widgets in einem Design (oder manchmal auch in einem Plugin) registriert sind, können die verwendeten Funktionen Code enthalten, der WordPress anweist, Klassen und IDs basierend auf Namen, Typ und ID des Widgets zu generieren.
Wenn Menüs registriert werden, kann WordPress Klassen basierend auf dem Namen des Menüs, der Position von Elementen innerhalb des Menüs und der Position auf der Site generieren. Sie können alle diese Elemente verwenden, um Ihre Widgets und Menüs zu gestalten.
Klassen und IDs für Widgets
Um einen Widgetbereich zu registrieren, verwenden Sie die register_sidebar () Funktion in Ihrem Thema Functions.php Datei. Dies erfordert die folgenden Parameter:
Es gibt zwei Parameter, die Klassen und / oder IDs generieren:
'class' => "
'before_widget' => '
'
Das 'Klasse' Mit diesem Parameter können Sie manuell eine Klasse für den Widgetbereich angeben. Die Einstellungen für die 'before_widget' Parameter teilen WordPress mit, eine eindeutige ID für jedes Widget im Widgetbereich und eine Reihe von Klassen für dieses Widget zu generieren, die sich nach dem jeweiligen Widget-Typ richten.
In der Demo-Site habe ich zum Beispiel zwei Widgets hinzugefügt - eine Liste mit Beiträgen und eine Liste mit Seiten. Für die Liste der Beiträge wird der folgende HTML-Code ausgegeben:
Für die Liste der Seiten wird folgender HTML-Code ausgegeben:
Sie können dies verwenden, um Widgets zu formatieren, in denen die Beiträge aufgelistet werden, indem Sie dem Stylesheet des Themes das folgende CSS hinzufügen:
Dadurch wird den Widgets, die Seiten auflisten, ein Rahmen hinzugefügt, wie im Screenshot gezeigt:
Hinweis: Dies funktioniert auf der Demo-Site, da ein untergeordnetes Thema des zwanzigundzwanzig Designs verwendet wird, bei dem die Seitenleisten korrekt registriert sind. Wenn Sie ein eigenes Thema erstellen, müssen Sie den Tag register_sidebar () mit den oben genannten Parametern hinzufügen. Informationen dazu finden Sie im zugehörigen Codex-Artikel.
Klassen und IDs für Menüs
Navigationsmenüs werden mit angezeigt wp_nav_menu () kennzeichnen Sie in Ihrem Thema header.php Datei. Dies erfordert eine Reihe von Parametern, wie in beschrieben wp_nav_menu Artikel.
Eine davon fügt Klassen und IDs zu jedem Menüpunkt hinzu:
'items_wrap' => '
% 3 $ s
'
Dies fügt jedem Element eine ID und eine Anzahl von Klassen hinzu. Die Klassen basieren auf der Klasse für das Menü selbst und dem Ort auf der Site. Befindet sich der Benutzer beispielsweise auf einer Seite der Website, erhält der Eintrag im Navigationsmenü die Option .current_page_item Klasse.
Sie können dies verwenden, um dem Eintrag der aktuellen Seite im Menü einen Stil hinzuzufügen. Um beispielsweise der aktuellen Seite eine Unterstreichung hinzuzufügen, fügen Sie Ihrem Stylesheet Folgendes hinzu:
/ * Stil aktiver Seitenlink in der Navigation * / .main-navigation .current_page_item a text-decoration: underline;
Die resultierende Unterstreichung ist im Screenshot zu sehen (sowie die Farbänderung, die bereits im Stylesheet des übergeordneten Themes enthalten ist):
Hinweis: Da ich ein Kindermotiv des zwanzigundzwanzigsthemas verwende, muss ich das nicht hinzufügen wp_nav_menu () Tag, da dieser bereits im übergeordneten Thema vorhanden ist.
Zusammenfassung
Wie bereits oben erläutert, gibt es verschiedene Möglichkeiten, wie WordPress Klassen und IDs für Elemente in einer Site generiert. Einige davon werden von WordPress selbst generiert, andere verwenden Template-Tags oder Funktionsparameter, um WordPress mit der Ausgabe der Klassen und IDs zu sagen. Sie können diese verwenden, um Seiten, Menüs, Widgets, Beitragslisten und andere Elemente in Ihrem Design zu gestalten.
Es gibt viele andere Möglichkeiten, wie Sie diese Klassen und IDs verwenden können, um Ihre Projekte zu gestalten. Zum Beispiel:
Sie können eine Site mit einer Reihe von unterschiedlichen Abschnitten erstellen, indem Sie Klassen verwenden, die vom erstellt wurden body_class () Tag, um den Inhalt in jedem Abschnitt sehr unterschiedlich aussehen zu lassen
Sie können einzelne Beitragseinträge auf einer Archivseite anders gestalten, indem Sie die von der generierte ID als Ziel festlegen die ID() Etikett
Sie können aktuelle Menüelemente in Ihrer Navigation hervorheben, einen schaltflächenähnlichen Effekt erstellen und Bilder, Hintergründe, Farbverläufe usw. verwenden
Sie können eine Kombination der obigen Optionen verwenden, z. B. bestimmte Widgets in verschiedenen Bereichen der Website unterschiedlich gestalten
Die Möglichkeiten sind nur durch Ihre Vorstellungskraft begrenzt!
Ressourcen
Einige nützliche Codex-Seiten zu den in diesem Tutorial behandelten Themen:
Für Bilder erzeugte Klassen: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
Das body_class () Tag: http://codex.wordpress.org/Function_Reference/body_class
Das post_class () Tag: http://codex.wordpress.org/Function_Reference/post_class
Das die ID() Tag: http://codex.wordpress.org/Function_Reference/the_ID
Das wp_register_sidebar () Funktion: http://codex.wordpress.org/Function_Reference/register_sidebar
Das wp_nav_menu () Tag: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Eine Anleitung zu Vorlagen-Tags: http://codex.wordpress.org/Template_Tags
Share
Accentsconagua
