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).
Schreibe einen Kommentar