Logo Support in WordPress 4.5
2016
Themedesigner aufgepasst. Das Release von WordPress 4.5 ist angesetzt für den zwölften April und hat – neben anderen Neuerungen – eine sehr schöne Neuerung für Euch bereit: Logosupport! Wollte man das Logo einer Seite über den Customizer auswechselbar machen, so musste man bisher immer entweder selbst eine entsprechende Sektion definieren – oder, was auch häufiger geschah – man zweckentfremdete den „Header Image“-Bereich für das Logo. Ab der Version 4.5 stellt WordPress eine offizielle Einstellung vor, welche vom Theme unterstützt werden kann: 'site-logo'.
Dieses Feature kannte man bisher aus dem Jetpack Plugin, von welchem es in den Core übernommen wird. Da es sich jetzt um eine offizielle Einstellung handelt, welche man im Theme unterstützen kann, wird es für Seitenbetreiber leichter, Logos beim Themewechsel so zu übernehmen, dass diese auch im neuen Layout mit der angemessenen Größe dargestellt werden.
Schauen wir deshalb kurz in den Code, wie diese neue Funktion eingebaut werden kann. In der functions.php kann man sich dazu in die 'after_setup_theme'-Aktion einhaken, und dort die Unterstützung deklarieren:
Dazu nutzt man add_theme_support(), übergibt mit 'site-logo' das unterstützte Feature und im Argumente-Array schließlich noch die gewünschte Bildgröße, welche man zuvor mit add_image_size() festlegen kann.
Danach muss man natürlich noch die header.php entsprechend anpassen. Hier gibt es am Version 4.5 einen neuen Template-Tag! get_the_site_logo() beziehungsweise the_site_logo(). Diese Funktion kann in wp-includes/general-template.php gefunden werden und gibt zum einen einen Link auf die Startseite, sowie das Bild aus.
Gefiltert werden kann die Ausgabe über den Filter 'get_the_site_logo', welche zum einen den zu filternden HTML-String, zum anderen die angestrebte Bildgröße übergibt. So könnte es ja sein, dass der ein oder andere das Logo nicht gleich mit einem Link auf die Startseite verknüpfen möchte oder ähnliches.
Standardmäßig verfügt der Link über die Klasse .site-logo-link und der IMG-Tag über .site-logo und .attachment-{$groesse}.
In der header.php kann man daher das Logo wie folgt einbinden:
Wie Ihr seht prüfe ich hier zunächst, ob der Template Tag existiert, also die aktuellste WordPress Version verwendet wird. So verhindert man, dass das Theme auf einer älteren WordPress Version einen Fatal Error auswirft.
Wollt Ihr Euch die neuen Funktionen in WordPress 4.5 schon einmal ansehen: Die aktuelle WordPress 4.5 beta kann hier heruntergeladen werden. Twenty Sixteen wird das Feature auch unterstützen. Die aktuelle Github Version mit 'site-logo'-Support kann hier heruntergeladen werden. Get your Theme ready für 'site-logo', am 12. April ist es soweit 🙂
Wenn ich das dann jetzt richtig verstehe, ist das jetzt nur ein neuer Template Tag, mit dem halt das Logo ausgespielt wird (was aber nur korrekt mitgeführt wird, wenn es nicht im Themeverzeichnis selbst abgelegt wird). Um die bestmögliche Einbindung im Theme muss sich der Designer weiterhin selbst kümmern.
Da will ich mal sagen … hm, das ist wieder so eine Neuerung, die man braucht oder auch nicht. Wir werden sehen, was es noch Neues geben wird.
Ja, nach wie vor muss der Designer selbst noch festlegen, wie das Logo schließlich dargestellt wird. Alles andere wäre ja pure Magic 🙂
Natürlich kann man auch weiterhin seinen eigenen erprobten Weg gehen, das Logo über den Customizer einzuspielen, trotzdem denke ich, wenn es da sozusagen eine „offizielle“ Schnittstelle gibt, lohnt es sich immer, diese zu nehmen. Insbesondere dann, wenn man ein Theme nicht für einen speziellen Kunden entwirft, sondern eventuell ein breiteres Publikum adressiert. Die Leute werden sich nach einiger Zeit an diesen Weg das Logo einzuspielen gewöhnen, es wird also Teil der spezifischen WordPress User Experience.
Außerdem – ich mag Filter – gibt es hier einen Filter für die Ausgabe, was es wiederrum Plugins ermöglicht, sich hier einzuhaken, was sicherlich auch zu interessanten Verwendungen (nicht, dass mir auf Anhieb eine einfiele 😀 ) führen kann.
Das klingt vielversprechend, löst jedoch kaum mein Problem.
Ich suche verzweifelt nach einer Möglichkeit, im Header statt einer Hintergrundfarbe ein Bild als Hintergrund zu definieren. So dass ich dann darüber ein Logo (klickbar) ziehen kann.
Meine beschränkten Kenntnisse in CSS und PHP reichen dafür nicht aus.
Haben Sie eine Idee dazu?
Danke und Gruss.
Hanspeter
Hallo Hanspeter,
also meine Antwort würde jetzt ganz davon abhängen, was Du unter beschränkten CSS und PHP Kenntnissen verstehst und welchen Scope Deine Aufgabe hat. Passt Du einfach nur ein Theme an, beziehungsweise entwirfst ein Child-Theme oder bist Du dabei ein eigenes Theme zu entwerfen? Aber gehen wir einmal vom einfachsten Fall aus und es geht Dir nur darum, dass Du ein Hintergrundbild im Header-Bereich möchtest. Sagen wir Dein Header sieht etwa so aus:
header.site-header soll nun ein Hintergrundbild erhalten. Dieses Bild speichern wir im gleichen Ordner wie die style.css vom Theme. Dann könnten wir in der style.css folgendes hinterlegen:
header.site-header{ background-image: url( bild.jpg ); }Aber die Lösung hängt natürlich stark von Deinem Theme und von Deinen Wünschen ab und lässt sich so einfach wohl nicht beantworten. Ich hoffe trotzdem, dass ich Dir helfen konnte.
Da hilft nur, selbst Hand anzulegen und in die Childtheme Erstellung einzusteigen oder ein Theme einzusetzen, was genau dieses Hintergrundbild beinhaltet und über den Customizer einstellen lässt.
Hey David,
jetzt bin ich aus Neugier dem Link in meinen Dashboard gefolgt und habe deinen Beitrag entdeckt 🙂 Klasse Artikel und super beschrieben!
LG Gianni
Danke Gianni 🙂