WordPress Theme Ordner: Eigene Bilder verlinken

Um eigene Bilder oder andere Dateien aus dem WordPress Theme zu verlinken, hat WordPress eine praktische Funktion eingebaut: Damit kann man direkt auf das aktuell ausgewählte Theme verweisen und so Dateien aus dem Theme einbinden.

Hat man zum Beispiel innerhalb des Theme-Ordners einen Ordner “bilder” erstellt, in dem man Buttons, Hintergründe oder das eigene Logo gespeichert hat, kann man mit dieser Funktion aus den PHP Dateien im Theme ganz einfach darauf verweisen, ohne den kompletten Pfadnamen angeben zu müssen (was problematisch sein kann, wenn sich die Ordnerstruktur einmal ändert).

get_stylesheet_directory_uri()

Mit dieser Funktion erhält man den Pfad zum aktuellen Theme. Um also das Bild “logo.png” aus dem Ordner “bilder” innerhalb des Theme-Ordners einzubauen, hilft dieser Code:

<img src="<?php echo get_template_directory_uri(); ?>/bilder/logo.png">

Bilder in der style.css verlinken

Möchte man allerdings direkt aus der Stylesheet-Datei “style.css” das Logo einbinden, funktioniert die Funktion nicht (es sei denn, man lässt auch .css Dateien von PHP bearbeiten – das ist aber keine Standard-Einstellung auf dem Server).

Hier helfen dann relative Pfade, die die Bilder abhängig von dem Ort der aktuellen Datei benennen: Da die Datei “style.css” im Hauptordner des Themes ganz oben liegt, verweist man hier auf das Logo (zum Beispiel als Hintergrund) so:

.logo {
   background-image:url('./bilder/logo.png');
}

Mit “./” gibt man den aktuellen Ordner an, mit “../” einen übergeordneten Ordner. Das Bild “logo.png” liegt also im Ordner “bilder”, dieser Ordner liegt wiederum im gleichen Ordner wie die Datei “style.css”, in der das Bild aufgerufen werden soll.