Innerhalb vom Theme gespeichertes Foto als Hintergrundbild direkt in einem Template einbinden

z01 0456
Foto von Gabriele Lässer

Grundsätzlich würde man ein Hintergrundbild in einem bestimmten Template ja einfach über den Block-Editor (bei FSE) festlegen. Innerhalb eines Templates müsste man die absolute URL eines Bilder angeben, da bei einer relativen URL je nach aufgerufenem ungültigen Link ansonsten 404-Fehler passieren können.

In einem Theme, das mehrfach verwendet wird, ist eine absolute URL nicht so günstig. Und was man in einem Template nicht mehr hat sind über PHP ermittelbare Daten darüber, welches Template grade verwendet wird. Im Template selbst kann man mit PHP überaupt nichts mehr machen.

Das 404-Template zum Beispiel kommt ja nur bei 404-Fehlern zum Einsatz, und daher lässt sich über die Funktion is_404() ermitteln, ob es geladen wird. Ein Hintergrundbild für ein 404-Template festzulegen ist daher ganz einfach. Auch global ein Hintergrundbild für Seiten (is_page()), Beiträge (is_singular(‚post‘), custom post types, archive etc. ist auf diese Weise möglich. Es macht allerdings tatsächlich in erster Linie nur dann Sinn, wenn das Theme mehrfach verwendet wird (in meinem Fall rund 25 mal für unterschiedliche Subdomains, das Design soll immer dasselbe sein, da spart es viel Aufwand, wenn so viel wie möglich bereits themeseitig festgelgt wird), und immer dasselbe Bild in einem bestimmten Template zum Einsatz kommen soll.

add_action('wp_head', function () {
	if (is_404()) { ?>
		<style>
			main.wp-block-group {
				background-image: url('<?php echo get_theme_file_uri('assets/images/background.jpg'); ?>');
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
		</style> <?php
	}
});

Selbst direkt im Template gibt es einen Weg, wie sich die URL des Bildes innerhalb vom Theme ermitteln lässt. Also auch diese Variante die über die REST API geht, funktionierte im Test.

<!-- wp:html -->
<script>
	fetch('/wp-json/wp/v2/themes?status=active')
		.then(response => response.json())
		.then(themes => {
			const activeTheme = themes[0];
			const screenshotUrl = activeTheme.screenshot;
			const imageUrl = screenshotUrl.replace('screenshot.png', 'assets/images/background.jpg');
			const groupBlock = document.querySelector('main.wp-block-group');
			groupBlock.style.backgroundImage = `url(${imageUrl})`;
			groupBlock.style.backgroundPosition = 'center center';
			groupBlock.style.backgroundRepeat = 'no-repeat';
			groupBlock.style.backgroundSize = 'cover';
		});
</script>
<!-- /wp:html -->

Letztlich ist es allerdings so, dass beide Methoden nicht vorgesehen sind („doing it wrong“). Man würde dafür einfach ein Pattern verwenden. Patterns sind PHP-Dateien, und in Patterns stehen Funktionen wie

get_theme_file_uri()

zur Verfügung. Was man mit PHP in Patterns machen kann (und was nicht) beschreibt der verlinkte Beitrag ausführlich (in Englisch).

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable