WordPress – individuelle, flexible Graphiken

Du kennst das Problem, Du möchtest das Layout Deines WordPress Blogs etwas flexibler gestalten oder bestimmte Kategorien hervorheben? Du möchtest z.B. unterschiedliche Headergraphiken für Deine verschiedenen Kategorien im Layout benutzen? Du möchtest in jedem Beitrag eine Graphik, die eine Zugehörigkeit zu einer Kategorie zeigt, ein Kategoriebildchen? Du möchtest in der Kategorieansicht ein separates Foto?

WordPress anpassen - individuelle, flexible Graphiken

Je nachdem, ob Du direkt den img-tag benutzen willst oder aber eine Graphik mit CSS einbinden willst, gibt es hier unterschiedliche Ansatzpunkte.

!!! Aufpassen bei copy und paste !!! Um den Quelltext hier zeigen zu können, habe ich vor bzw. nach „?“ bei PHP-Aufruf einen Unterstrich „_“ gesetzt. Zudem stellt WP die „Anführungszeichen“ nicht immer korrekt dar!

<_?php single_cat_title(''); ?_>

liefert uns die Kategoriebezeichnung also zum Beispiel „Allgemein“. Damit können wir uns doch recht einfach Pfade zu Graphiken bzw. Fotos basteln, oder?

Du willst zum Beispiel in der Einzelansicht (single.php) jedes Beitrages das zugehörige Kategoriebild zeigen?

<img src=‘<_?php echo get_option('home'); ?_>/images/Kategorie-<_?php single_cat_title(''); ?_>.gif‘ alt=‘<_?php single_cat_title(''); ?_>‚ />

wird uns ein gif namens „Kategorie-Allgemein.gif“ mit dem alt-Text „Allgemein“ zeigen. Der Pfad zu img-URL hier lautet:

deineDomain.tld/images/Kategorie-Allgemein.gif (case sensitive beachten!)

Erstelle vorher eine gif Deiner Wahl mit der Bezeichung der jeweiligen Kategorie (hier:+“Kategorie-“ also „Kategorie-Allgemein.gif“, Case sensitive, Gross und Kleinschreibung beachten!), erstelle das Verzeichnis „images“ im root Deiner Domain, lade die gif per ftp-Programm in das soeben erstellte Verzeichnis, fertig!

Wer ungern Layout-Images im Quelltext haben will, kann natürlich das ganze auch mit CSS lösen. Da Stylesheets in der Regel nicht gerendert werden, hier zwei Möglichkeiten.

CSS die entsprechende direkt im head des WP-Themes einfügen:

<head>

<style type=’text/css‘>

#Kategorie-Image {
background:url(‚<_?php echo get_option('home'); ?_>/images/Kategorie-<_?php single_cat_title(''); ?_>.gif‘) no-repeat; }

</style>

</head>

Dies ändert gleich den Pfad zur Image in der Eigenschaft background (hier: der ID „Kategorie-Image“).

Bildung von ID-Beizeichnungen

Man bildet gleich unterschiedliche ID für die Kategorien unter Benutzung des WP-Tags in den Themefiles.

<.. id=’Kategorie-<_?php single_cat_title(''); ?_>‚>

und in der CSS:

#Kategorie-Allgemein {
background: url(‚deineDomain.tld/images/Kategorie-Allgemein.gif‘) no-repat;
}

#Kategorie-Musik {
background: url(‚deineDomain.tld/images/Kategorie-Musik.gif‘) no-repat;
}

….

Will man das noch spezialisieren, eine Image z.B. nur auf bestimmten Seiten zeigen, kann man das natürlich auch mit den bekannten Tags erweitern.

<head>

<_?php /* wenn Einzel- oder Kategorieansicht */ if (is_single()|is_category()) { ?_>

<style type=’text/css‘>

#Kategorie-Image {
background:url(„<_?php echo get_option('home'); ?_>/images/Kategorie-<_?php single_cat_title(''); ?_>.gif“) no-repeat; }

</style>

<_?php } ?_>


</head>

würde nur auf Einzel- oder Kategorieansicht in den head Tag eingebunden und verwendet.

Genialerweise ist dies zudem nur eine kleines Beispiel, was sich beliebig erweitern, kombinieren und nicht nur auf Kategorien anwenden lässt. No limits – nur der Kopf.

Ein Gedanke zu „WordPress – individuelle, flexible Graphiken“

Kommentare sind geschlossen.