Arbeiten mit Klassen und IDs, die von WordPress generiert wurden

() translation by (you can also view the original English article)

Eine hilfreiche Funktion von WordPress ist die Art und Weise, wie Klassen und IDs generiert werden. Einige davon werden vom System selbst generiert, während Sie in anderen Fällen PHP in Ihr Design einfügen und WordPress dies verwendet, um dem Seiten-Markup Klassen und IDs hinzuzufügen.

In diesem Tutorial zeige ich drei Möglichkeiten, wie WordPress dies tut, und stelle praktische Anwendungen und Beispiele für jeden bereit. Die drei Bereiche, mit denen ich mich befassen werde, sind folgende:

Klassen und IDs, die für Bilder generiert werden, die Sie über den Medien-Uploader in WordPress hochladen
Vorlagen-Tags, die in den Vorlagendateien eines Themas verwendet werden, um Klassen und IDs basierend auf dem angezeigten Inhalt und der angezeigten Seite zu generieren
Parameter, die Sie beim Registrieren von Widgets und Menüs festlegen können (oder die bereits in einem gut geschriebenen Thema festgelegt werden), die Klassen und IDs generieren, die für bestimmte Widget-Typen, einzelne Widgets und Menüelemente relevant sind

Für jede davon erkläre ich ihre Funktionsweise und demonstriere sie dann mit einigen Beispielen.

Was Sie benötigen, um dieses Tutorial abzuschließen

Um den praktischen Beispielen in diesem Tutorial zu folgen, benötigen Sie:

Eine Entwicklungsinstallation von WordPress
Ein Thema, das Sie bearbeiten können

Ich werde mit einem Child-Theme von Twenty Twelve arbeiten – Sie können auf die Theme-Dateien im Code-Bundle zugreifen.

Klassen und IDS, die vom Medien-Uploader für Bilder generiert wurden

Wenn Sie Bilder über den Media Uploader hochladen, haben Sie die Möglichkeit, anzugeben, wie das Bild ausgerichtet werden soll, wie im Screenshot gezeigt. Sie werden auch gefragt, welche Bildgröße Sie anzeigen möchten: Miniaturansicht, Mittel, Groß oder Vollbild.

wordpress-generated-classes-IDs-0-image-uploader

Basierend auf Ihrer Auswahl weist WordPress dem <img>-Tag für Ihre hochgeladenen Bilder eine Reihe von Klassen zu. Die Klassen für die Ausrichtung sind wie folgt:

.alignnone
.aligncenter
.alignright
.alignleft

Darüber hinaus weist WordPress jeder Beschriftung, die Sie einem Bild hinzufügen, die Klasse .wpcaption zu. Untertitel haben diese Klasse sowie eine der obigen Ausrichtungsklassen, je nachdem, wie Sie das Bild ausrichten.

WordPress fügt auch Klassen für jede Bildgröße hinzu:

.size-full
.size-large
.size-medium
.size-thumbnail

Sie können diese verwenden, um Bilder jeder Dateigröße zu gestalten.

Die meisten Themes enthalten CSS, um jede dieser Klassen entsprechend zu stylen, zum Beispiel enthält das Twenty Twelve-Theme Folgendes:

.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft {
	margin: 12px 24px 12px 0;
	margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}
img.alignright {
	margin: 12px 0 12px 24px;
	margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}
img.aligncenter {
	margin-top: 12px;
	margin-top: 0.857142857rem;
	margin-bottom: 12px;
	margin-bottom: 0.857142857rem;
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto;
}

Das obige CSS richtet jedes Element (nicht nur Bilder) mit der .alignleft-, .alignright- oder .aligncenter-Klasse aus, was bedeutet, dass Sie diese Klassen auch verwenden können, um andere Inhalte als Bilder zu gestalten, wenn Sie möchten.

Es fügt auch Ränder zu Bildern hinzu, die diese Klassen haben, und stellt sicher, dass Bilder in voller und großer Größe nicht außerhalb ihres umgebenden Elements verlaufen, wobei max-width: 100% verwendet wird.

Den Effekt können Sie im Screenshot unten sehen. Das erste Bild ist rechtsbündig und das zweite zentriert und in voller Größe.

wordpress-generated-classes-IDs-1-images-twenty-twelve

Fügen Sie Ihr eigenes Styling mit diesen Klassen und IDs hinzu

Sie können nicht nur Ausrichtung und Ränder für jede dieser Klassen festlegen, sondern auch zusätzliche Formatierungen hinzufügen.

Das erste Bild im obigen Screenshot ist rechtsbündig. Wenn die Größe des Bildschirms geändert wird, bleibt er gleich groß und der Text umbricht ihn unordentlich:

wordpress-generated-classes-IDs-2-images-screen-resized-twenty-twelve

Sie können Styling hinzufügen, um sicherzustellen, dass jedes rechtsbündig ausgerichtete Bild nicht mehr als 50 % der Bildschirmbreite einnimmt, damit der Text sauberer umbrochen wird, indem Sie Ihrem Stylesheet das folgende CSS hinzufügen:

1	img.alignright {
2	max-width: 50%;
3	}

Wenn die Seite nun auf einem schmalen Bildschirm angezeigt wird, ist das Bild weniger dominant:

wordpress-generated-classes-IDs-3-images-screen-resized-with-styling

Sie können nicht nur CSS für das Layout oder die Größe hinzufügen, sondern auch Bildern, die auf eine bestimmte Weise ausgerichtet sind, einen dekorativen Stil hinzufügen. Um zentrierten Bildern in voller Größe einen dekorativen Stil hinzuzufügen, fügen Sie Ihrem Stylesheet Folgendes hinzu:

img.size-full.aligncenter {
	width: 75%;
	padding: 5px;
	border: 2px dotted #ccc;
}

Dies fügt dem Bild einen Rahmen hinzu und reduziert seine Größe:

wordpress-generated-classes-IDs-4-full-size-image-with-styling

Vorlagen-Tags zum Hinzufügen von Klassen und IDs

Die Klassen und IDs, die wir für Bilder betrachtet haben, werden von WordPress selbst generiert. Andere Klassen und IDs können durch Vorlagen-Tags in Ihrem Design generiert werden.

Hinweis: Wenn Sie mit Vorlagen-Tags nicht vertraut sind, sehen Sie sich den Artikel Vorlagen-Tags von Codex an.

Es gibt zwei Sätze von Vorlagen-Tags: einen für das HTML-Tag <body> und zwei für einzelne Beiträge.

Das `body_class()` Template-Tag

Ein gut geschriebenes Theme hat das folgende Tag in seiner header.php-Datei:

1	<body <?php body_class(); ?>>

Dies ersetzt das normale <body>-Tag. Das Template-Tag body_class() weist WordPress an, dem <body>-Tag Klassen zuzuweisen, basierend auf der angezeigten Seite und der verwendeten Vorlagendatei aus dem aktiven Design.

Die Liste der erzeugbaren Klassen ist lang und Sie finden sie im WordPress-Codex.

Einige Beispiele sind:

.home für die Homepage
.single-postid-{ID}, wenn ein einzelner Beitrag angezeigt wird, wobei ID die numerische ID dieses Beitrags ist
.archive für jede Archivseite
.page-template-{filename}-php, wenn eine benutzerdefinierte Seitenvorlage verwendet wird

Wenn Sie dem <body>-Tag zusätzliche Klassen hinzufügen möchten, die nicht von WordPress generiert werden, können Sie dies tun. Um beispielsweise die Klasse "hello" hinzuzufügen, lautet der Code:

1	<body <?php body_class( 'hello' ); ?>>

Sie können auf diese Weise beliebig viele Klassen hinzufügen, indem Sie sie durch Leerzeichen trennen.

Sie können die vom body_class()-Tag generierten Klassen verwenden, um Stile hinzuzufügen, die für einen bestimmten Ort in der Site oder eine Vorlagendatei oder für Elemente in dieser Vorlagendatei spezifisch sind.

Zum Beispiel habe ich in meinem Child-Theme eine Seitenvorlage namens page-full-width-with-sidebar.php erstellt, die darauf ausgelegt ist, Seiten mit dem Inhalt in voller Breite und der Seitenleiste unterhalb des Inhalts anstatt rechts davon anzuzeigen. Sie finden diese Seitenvorlage im Codepaket.

Unter Verwendung des body_class()-Tags generiert WordPress eine .page-template-page-full-width-with-sidebar-php-Klasse für das <body>-Tag (neben anderen Klassen).

Um Elemente auf einer Seite mit dieser Vorlage zu gestalten, fügen Sie Ihrem Stylesheet Folgendes hinzu:

/* style layout for full page template with sidebar */
.page-template-page-full-width-with-sidebar-php .site-content,
.page-template-page-full-width-with-sidebar-php .widget-area {
	width: 100%;
	clear: both;
}
.page-template-page-full-width-with-sidebar-php #secondary.widget-area .widget {
	width: 48%;
	margin: 0 1%;
	float: left;
}

Dadurch wird die Breite des Hauptinhalts und der Seitenleiste (#secondary) auf 100 % gesetzt und auch die Widgets in der Seitenleiste nebeneinander ausgerichtet. Sie können den Effekt im Screenshot sehen:

wordpress-generated-classes-IDs-5-full-width-page-template

Hinweis: Wenn Ihr Thema reagiert, stellen Sie sicher, dass Sie die Breite der Widgets auf schmalen Bildschirmen in Ihren Medienabfragen anpassen.

Die Vorlagen-Tags `post_class()` und `post_ID()`

Diese Tags funktionieren ähnlich wie das body_class()-Tag, aber Sie verwenden sie mit einzelnen Posts in der Schleife anstelle des <body>-Elements.

Im Twenty Twelve-Theme wird beispielsweise jeder Beitrag in der Schleife in ein <article>-Element mit diesen angewendeten Tags eingeschlossen:

1	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
2	// content here
3	</article>

Dadurch werden eine Reihe von Klassen basierend auf der Kategorie und dem Typ des Beitrags und eine ID basierend auf der numerischen ID des Beitrags generiert. Für einen Beitrag auf meiner Demo-Site mit der Kategorie "rot" werden beispielsweise die folgenden Klassen und IDs generiert:

1	<article id="post-10" class="post-10 post type-post status-publish format-standard hentry category-red">
2	// content
3	</article>

Sie können diese Klassen verwenden, um Beiträge aus einzelnen Kategorien unterschiedlich zu gestalten. Auf der Demo-Site sind drei Kategorien eingerichtet: "rot", "blau" und "wichtig".

Um diese zu formatieren, fügen Sie dem Stylesheet des Themas das folgende CSS hinzu:

/* style posts in 'red' category */
.category-red {
	border-top: 2px solid #cc0000;
}

/* style posts in 'blue' category */
.category-blue {
	border-top: 2px solid #3366ff;
}

/* style posts in 'important' category */
.blog .category-important {
	padding-top: 2em;
	margin-left: 2em;
}
.category-important:before {
	content: 'READ THIS POST! IT IS IMPORTANT';
}

Dadurch wird für jede der Kategorien ein Styling hinzugefügt: ein farbiger Rahmen für jede der Farbkategorien und ein zusätzlicher Rand für die Kategorie "wichtig". Es verwendet auch ein Pseudo-Element, um vor jedem Beitrag in der Kategorie "wichtig" zusätzlichen Inhalt einzufügen.

Das Ergebnis ist im Screenshot dargestellt.

wordpress-generated-classes-IDs-6-category-styling

Verwenden von Klassen und IDs mit Widgets und Menüs

Wenn Widgets in einem Theme (oder manchmal einem Plugin) registriert sind, können die verwendeten Funktionen Code enthalten, der WordPress anweist, Klassen und IDs basierend auf dem Namen, Typ und ID des Widgets zu generieren.

Wenn Menüs registriert sind, kann WordPress Klassen basierend auf dem Namen des Menüs, der Position der Elemente im Menü und der Position auf der Site generieren. Sie können all dies verwenden, um Ihre Widgets und Menüs zu gestalten.

Klassen und IDs für Widgets

Um einen Widget-Bereich zu registrieren, verwenden Sie die Funktion register_sidebar() in der Datei functions.php Ihres Themes. Dies erfordert die folgenden Parameter:

<?php register_sidebar = array(
	'name'          => __( 'Sidebar name', 'theme_text_domain' ),
	'id'            => 'unique-sidebar-id',
	'description'   => ' ',
	'class'         => ' ',
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>' );
?>

Es gibt zwei Parameter, die Klassen und/oder IDs generieren:

'class' => ' '
'before_widget' => '<li id="%1$s">'

Mit dem Parameter 'class' können Sie manuell eine Klasse für den Widget-Bereich angeben. Die Einstellungen für den Parameter 'before_widget' weisen WordPress an, für jedes Widget im Widget-Bereich eine eindeutige ID und auch eine Reihe von Klassen dafür zu generieren, die auf dem Widget-Typ basieren.

Auf der Demo-Site habe ich zum Beispiel zwei Widgets hinzugefügt - eine Liste mit Beiträgen und eine Liste mit Seiten. Für die Liste der Beiträge wird folgender HTML-Code ausgegeben:

1	<aside id="recent-posts-2" class="widget widget_recent_entries">
2	// widget contents
3	</aside>

Für die Seitenliste wird folgender HTML-Code ausgegeben:

1	<aside id="pages-2" class="widget widget_pages"><h3 class="widget-title">
2	// widget contents
3	</aside>

Sie können dies verwenden, um Widgets zu stylen, die Beiträge auflisten, indem Sie das folgende CSS zum Stylesheet des Themes hinzufügen:

/* style specific widget */
aside.widget_pages {
	border: 1px solid #3366ff;
	padding: 5px;
}

Dies fügt den Widget-Auflistungsseiten einen Rahmen hinzu, wie im Screenshot gezeigt:

wordpress-generated-classes-IDs-7-styling-widgets

Hinweis: Dies funktioniert auf der Demo-Site, da ein untergeordnetes Thema des Themas Zwölfzwölf verwendet wird, bei dem die Seitenleisten korrekt registriert sind. Wenn Sie Ihr eigenes Thema erstellen, müssen Sie das Tag register_sidebar() mit den obigen Parametern hinzufügen. Wie das geht, erfahren Sie im zugehörigen Codex-Artikel.

Klassen und IDs für Menüs

Navigationsmenüs werden mit dem wp_nav_menu()-Tag in der header.php-Datei Ihres Themes angezeigt. Dies erfordert eine Reihe von Parametern, wie im Artikel wp_nav_menu beschrieben.

Eine davon fügt jedem Menüpunkt im Menü Klassen und IDs hinzu:

1	'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>'

Dadurch werden jedem Element eine ID und eine Reihe von Klassen hinzugefügt. Die Klassen basieren auf der Klasse für das Menü selbst und der Position auf der Site. Wenn sich der Benutzer beispielsweise auf einer Seite der Site befindet, hat sein Eintrag im Navigationsmenü die Klasse .current_page_item.

Sie können dies verwenden, um dem Eintrag der aktuellen Seite im Menü ein Styling hinzuzufügen. Um beispielsweise der aktuellen Seite eine Unterstreichung hinzuzufügen, fügen Sie Ihrem Stylesheet Folgendes hinzu:

1	/* style active page link in navigation */
2	.main-navigation .current_page_item a {
3	text-decoration: underline;
4	}

Die resultierende Unterstreichung ist im Screenshot zu sehen (sowie die Farbänderung, die bereits im Stylesheet des Parent-Themes enthalten ist):

wordpress-generated-classes-IDs-8-styling-menus

Hinweis: Da ich ein untergeordnetes Thema des zwölfundzwanzigsten Themas verwende, muss ich das Tag wp_nav_menu() nicht hinzufügen, da dieses bereits im übergeordneten Thema vorhanden ist.

Zusammenfassung

Wie wir oben beschrieben haben, gibt es eine Reihe von Möglichkeiten, wie WordPress Klassen und IDs für Elemente in einer Site generiert. Einige davon werden von WordPress selbst generiert und andere verwenden Template-Tags oder Funktionsparameter, um WordPress anzuweisen, die Klassen und IDs auszugeben. Sie können diese verwenden, um Seiten, Menüs, Widgets, Beitragslisten und andere Elemente in Ihrem Design zu formatieren.

Es gibt viele andere Möglichkeiten, wie Sie diese Klassen und IDs verwenden können, um Ihre Projekte zu gestalten. Beispielsweise:

Sie können eine Site mit mehreren unterschiedlichen Abschnitten erstellen, indem Sie Klassen verwenden, die vom Tag body_class() generiert werden, damit der Inhalt in jedem Abschnitt sehr unterschiedlich aussieht
Sie können einzelne Post-Listings auf einer Archivseite anders gestalten, indem Sie auf die vom the_ID()-Tag generierte ID abzielen
Sie können aktuelle Menüpunkte in Ihrer Navigation hervorheben, einen knopfähnlichen Effekt erzeugen und Bilder, Hintergründe, Farbverläufe und mehr verwenden using
Sie können eine Kombination aus den oben genannten verwenden, zum Beispiel bestimmte Widgets in verschiedenen Bereichen der Site unterschiedlich gestalten

Die Möglichkeiten sind nur durch Ihre Vorstellungskraft begrenzt!

Ressourcen

Einige nützliche Codex-Seiten zu den in diesem Tutorial behandelten Themen:

Für Bilder generierte 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 the_ID()-Tag: http://codex.wordpress.org/Function_Reference/the_ID
Die Funktion wp_register_sidebar(): 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