Seit einiger Zeit gibt es auf dreitehabee Asides. Asides kann man entweder als gewöhnliche, aber kurze Artikel ausgeben, oder aber optisch und strukturell von allen anderen Artikeln abtrennen. Asides können Artikel der Kategorie Asides sein („einfache Asides“, zB: kurze Anmerkungen), oder aber auch Artikel einer anderen Kategorie, die auch zur Kategorie Asides gehören („kombinierte Asides“, zB: kurze Filmrezensionen). In diesem Artikel zeige ich 3 Varianten auf, wie man in WordPress einfache und kombinierte Asides erstellen kann. Variante 1, eine If-else-Abfrage im Loop, ermöglicht die Berücksichtigung von HTML-Konstruktionen, verbraucht aber mehr Prozessorleistung am Server, vor allem, wenn man mit kombinierten Asides zu tun hat. Variante 2 zielt auf die die optische Gestaltung eines Artikels mittels Zuweisung von Artikel-Metadaten als CSS-Klassen, ermöglicht es aber nicht, den Artikel strukturell anders darzustellen. Um aber einfache und kombinierte Asides vernünftig darzustellen, ist eine Kombination aus beiden Varianten notwendig: Variante 3.
Variante 1: Asides mittels If-else
Die Idee hinter Asides mittels If-else-Abfrage liegt darin, dem Loop eine Abfrage hinzuzufugen, der die Kategorie eines Artikels überprüft und im Fall von „Asides“ speziellen HTML-Code ausgibt, ansonsten gewöhnlichen Code. Solch eine Abfrage wurde – stark vereinfacht – in etwa so aussehen, wie in diesem Beispiel: Asides mittels If-else.
if (have_posts()) :
while (have_posts()) : the_post();
if (in_category(ASIDES)) :
/* "ASIDES" muss durch die ID der Kategorie Asides ersetzt werden!
HTML oder sonstiger Code für Asides-Artikel
HTML, PHP or CSS for your Asides */
else :
/* HTML oder sonstiger Code für Artikel anderer Kategorien
HTML, PHP or CSS for all other articles */
endif;
endwhile;
endif;
Der Vorteil der If-else-Abfrage liegt darin, nicht nur das optische Erscheinungsbild verändern zu können, sondern auch das strukturelle Markup. Wenn in einem gewöhnlichen Artikel zum Beispiel standardmäßig alle Metadaten (Anzahl der Kommentare, Veröffentlichungsdatum, zugewiesene Kategorien ua) angezeigt werden, so kann man im speziellen HTML-Code die Angabe dieser Metadaten ganz einfach herauslöschen oder stark reduzieren. Den Nachteil der If-else-Abfrage bringt Abhijit Nadgouda auf den Punkt:
Of course, you know the categories, you have the post and you have the if-else PHP command using which you can create different HTML code as per categories. (…) Everything is available and it is very tempting to use this. The only problem is that this can cause performance problems in future. Everytime an if-else is executed, processor cycles are spent in taking the decision. This can escalate to a severe performance problem if the number of categories increase.
Obwohl Abhijit in seinem Artikel fur die Variante Nr. 2 plädiert, lasst sich eine If-else-Abfrage nicht so leicht verhindern, denn wie er schon sagt: Mittels If-else-Abfrage kann ich für jede gewünschte Kategorie unterschiedlichen HTML-Code ausgeben.
Variante 2: Asides mittels CSS-Klassen
Die Idee hinter Variante 2 ist einfach. Wir verwenden die Metadaten eines Artikels und setzen sie als CSS-Klassen in den bereits vorhandenen Code zur Laufzeit ein. Namensgleiche Klassen in der CSS-Datei übernehmen dann die Formatierung der Artikel. Durch die kaskadierende Eigenschaft von CSS und durch ihre Möglichkeit, einem Objekt gleichzeitig mehrere Klassen zuweisen zu können, sind kombinierte Asides kein Problem. Wahrend wir in Variante 1 problemlos mit der ID der Kategorie arbeiten konnten, so empfiehlt sich das allein schon der Übersichtlichkeit halber in Variante 2 nicht. Wir müssen zuerst eine Funktion erstellen, die den Namen der Kategorie ausgibt. Hierzu genügt die folgende Abfrage in die „functions.php“ (sollte bei fast jedem Theme dabei sein; wenn nicht, dann erstellen) kopiert: Code fur die Datei functions.php.
functions.php
function the_category_unlinked( $separator = ' ' ) {
$categories = ( array ) get_the_category();
$thelist = '';
foreach( $categories as $category ) {
$thelist .= $separator . $category->category_nicename;
}
echo $thelist;
}
Im Loop von WordPress findet sich ein Artikel meist in einen div-Layer der Klasse „post“ eingeschlossen. Diesen Layer bearbeiten wir nun, indem wir ihm nebst der Standardklasse „post“ alle weiteren Kategorien des Artikels als Klassen hinzufugen: Codebeispiel.
Kategorien als Klassen
<div class="post<?php the_category_unlinked(' '); ?>">
/* Hier steht einiges */
</div>
Das führt bei einem Artikel der Kategorie „Asides“ zur Ausgabe <div class="post asides">
bei einem Artikel der Kategorien „Asides“, „Schweiz“ und „Zeitungsente“ zur Ausgabe <div class="post asides schweiz zeitungsente">
(die Kategorien werden alphabetisch geordnet der Standardklasse angehangt).
Mittels CSS-Klassen und -Selektoren kann man nun am Erscheinungsbild der verschiedenen Elemente arbeiten. (Wer seinen Code semantisch korrekt klassifiziert, ist hier klar im Vorteil…)
Variante 3: die Kombinationslösung
Die Optimalvariante liegt in der Kombination aus Variante 1 und 2. Einerseits ermöglicht sie uns, die Struktur von Asides-Artikeln im Vergleich zu allen anderen Artikeln zu verändern, andererseits müssen wir das Erscheinungsbild nicht uber den Umweg der Struktur bestimmen. Die Idee? Wir fragen die Kategorie mittels If-else ab und ordnen ihr gleichzeitig die aus den Metadaten des Artikels stammenden Klassen zu. Der Vorteil? Wir können eine geringere Anzahl an Kategorien definieren, die die Struktur des Codes verändern (spart Prozessorzyklen), gleichzeitig bleibt uns uber die CSS-Schiene die Vielfalt an Gestaltungsmöglichkeiten des Erscheinungsbilds offen. Die Lösung? Eine Kombination aus Variante 1 und 2. Hier der – stark vereinfachte – Code, der aber auch die Funktion zur Ausgabe des Kategorienamens aus Variante 2 benötigt: Codebeispiel fur die Asides-Kombinationslösung.
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if (in_category(ASIDES)) : ?>
/* "ASIDES" muss durch die ID der Kategorie Asides ersetzt werden! */
<div class="post<?php the_category_unlinked(' '); ?>">
/* HTML, PHP, CSS für alle Artikel der Kategorie Asides */
</div>
<?php else : ?>
<div class="post<?php the_category_unlinked(' '); ?>">
/* HTML, PHP, CSS für alle andere Artikel */
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
Mit einer dementsprechend angepassten CSS-Datei lasst diese Version keine Wunsche in puncto Erscheinungsbild/Struktur oder Performance offen. Viel Spaß mit den einfachen wie auch kombinierten Asides!
Weitere Informationen
Die Codevorlage zur Variante 1 (und eine genauere Erklärung als meine) findet sich bei Remote Sensing Tools. Die Codevorlage zur Variante 2 (und eine genauere Erklärung) findet sich bei Lorelle.