Wenn Sie eine WordPress-Website erstellen, die auf Mobiltelefonen gut funktioniert, konzentrieren Sie sich wahrscheinlich darauf, dass alles auf den Bildschirm passt und schnell geladen wird.
Aber es gibt ein weiteres kleines Detail, das das mobile Erlebnis Ihrer Website verbessern kann: das Ändern der Farbe der Adressleiste in einem mobilen Browser, damit sie zu Ihrer WordPress-Website passt.
Dies lässt Ihre Website polierter, professioneller und konsistenter mit Ihrer Marke erscheinen.
Wir haben vielen WordPress-Website-Besitzern geholfen, ihr mobiles Design zu verbessern, und dies ist eine dieser einfachen Anpassungen, die einen spürbaren Unterschied machen können.
In diesem Leitfaden zeigen wir Ihnen den einfachsten Weg, die Farbe der Adressleiste in einem mobilen Browser zu ändern, damit sie zum Design Ihrer WordPress-Website passt.
💡 TL;DR: Sie können die Farbe der Adressleiste des mobilen Browsers in WordPress mit dem WPCode-Plugin ändern. Erstellen Sie einfach einen neuen HTML-Snippet, fügen Sie das theme-color-Meta-Tag mit Ihrer bevorzugten Hex-Farbe hinzu, stellen Sie es auf automatische Einfügung ein und aktivieren Sie den Snippet, um die Änderungen auf Ihrer gesamten Website anzuwenden.
Warum die Farbe der Adressleiste in einem mobilen Browser ändern?
Das Ändern der Farbe der Adressleiste in einem mobilen Browser lässt Ihre WordPress-Website polierter und visuell konsistenter erscheinen.
Es schafft ein reibungsloseres mobiles Erlebnis, indem die Browseroberfläche an das Branding und Design Ihrer Website angepasst wird.
Hier sind einige der größten Vorteile:
- Schafft visuelle Konsistenz: Das Anpassen der Farbe der Adressleiste an das Design Ihrer Website verleiht ihr ein saubereres und einheitlicheres Erscheinungsbild.
- Verbessert das mobile Erlebnis: Es hilft Ihrer Website, auf Mobilgeräten polierter und App-ähnlicher zu wirken.
- Stärkt Ihr Branding: Die Verwendung Ihrer Markenfarben in der Browser-Oberfläche lässt Ihre Website professioneller und wiedererkennbarer erscheinen.
- Lässt Ihre Website moderner wirken: Eine angepasste Farbe des mobilen Browsers kann Ihre Website im Vergleich zu generischen mobilen Seiten hervorheben.
Obwohl dies eine kleine Designänderung ist, kann sie Ihre WordPress-Website für mobile Besucher deutlich raffinierter wirken lassen.
Browserunterstützung für Farben von mobilen Adressleisten
Bevor Sie die Farbe der Adressleiste Ihres mobilen Browsers ändern, ist es wichtig zu wissen, dass die Unterstützung je nach Browser und Gerät variieren kann.
Hier ist eine kurze Übersicht, wie beliebte mobile Browser das theme-color-Meta-Tag handhaben:
| Browser/Plattform | Unterstützungsstatus | Notizen |
|---|---|---|
| Google Chrome (Android) | Volle Unterstützung | Ändert die Farbe der Adressleiste für ein zusammenhängendes Erscheinungsbild. |
| Safari (iOS) | Keine direkte Unterstützung für die Farbe der Adressleiste | Verarbeitet theme-color für PWA-Manifeste und Browser-UI-Elemente, aber nicht für die allgemeine Adressleiste. |
| Firefox (Android) | Teilweise/Variiert | Die Unterstützung kann je nach spezifischer Version und den Einstellungen des Browser-Themes variieren. |
| Ältere/Nicht unterstützte Browser | Keine Unterstützung | Ignoriert die Einstellung elegant, ohne Probleme auf Ihrer Website zu verursachen. |
Um die Farbe der Adressleiste zu ändern, verwenden mobile Browser ein kleines HTML-Fragment namens theme-color-Meta-Tag. Dies teilt unterstützten Browsern mit, welche Farbe für Benutzeroberflächenelemente wie die Adressleiste verwendet werden soll.
Sie können diesen Code zu Ihrer WordPress-Website hinzufügen, indem Sie das Meta-Tag in den <head>-Bereich Ihres Themes einfügen.
Nichtsdestotrotz sehen wir uns an, wie Sie die Adressleiste im mobilen Browser einfach an Ihr WordPress-Theme anpassen können.
So ändern Sie die Farbe der Adressleiste im mobilen Browser passend zu Ihrer WordPress-Website
Sie können die Farbe der Adressleiste im mobilen Browser einfach ändern, indem Sie benutzerdefinierten Code zur header.php-Datei Ihres Themes oder Child-Themes hinzufügen, kurz bevor sich der schließende </head>-Tag befindet.
Obwohl der kleinste Fehler Ihre Website beschädigen und unzugänglich machen kann.
Deshalb empfehlen wir die Verwendung von WPCode. Nach gründlichen Tests sind wir zu dem Schluss gekommen, dass es das beste WordPress-Code-Snippet-Plugin und die sicherste Methode ist, um Code zu Ihrer Website hinzuzufügen.
Weitere Details zum Plugin finden Sie in unserem WPCode-Testbericht.
Zuerst müssen Sie das WPCode-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Hinweis: Das WPCode-Plugin hat auch eine kostenlose Version, die Sie für dieses Tutorial verwenden können. Wenn Sie jedoch auf den kostenpflichtigen Plan upgraden, erhalten Sie Zugriff auf Funktionen wie eine Code-Snippet-Bibliothek, bedingte Logik und mehr.
Nach der Aktivierung besuchen Sie die Seite Code-Snippets » + Snippet hinzufügen in der Admin-Seitenleiste von WordPress.
Klicken Sie hier auf die Schaltfläche 'Snippet verwenden' unter der Option 'Benutzerdefinierten Code hinzufügen (Neues Snippet)'.
Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie mit der Eingabe eines Namens für das Code-Snippet beginnen können. Dieser Name wird nicht im Frontend angezeigt und dient nur Ihrer Identifizierung.
Wählen Sie als Nächstes „HTML-Snippet“ als Code-Typ aus der erscheinenden Eingabeaufforderung aus.
Nun müssen Sie nur noch den folgenden Code-Snippet kopieren und in das Feld „Code-Vorschau“ einfügen:
<meta name="theme-color" content="#ff6600" />
Sobald Sie das getan haben, können Sie den Hex-Code für die Farbe Ihrer Wahl neben die Zeile content= im Code einfügen.
Diese Farbe wird dann für Ihre Adressleiste im mobilen Browser verwendet.
Profi-Tipp: Sie können den HEX-Wert einer Farbe mit jeder Bildbearbeitungssoftware wie Adobe Photoshop oder Gimp ermitteln.
Für eine schnellere Methode, die keine spezielle Software erfordert, können Sie einen kostenlosen Online-Farbpicker oder sogar das integrierte „Untersuchen“-Tool Ihres Webbrowsers verwenden, um den genauen Hex-Code von Ihrer Website zu ermitteln.
Scrollen Sie danach zum Abschnitt „Einfügen“ und wählen Sie den Modus „Automatisch einfügen“.
Auf diese Weise wird der Code nach der Aktivierung automatisch auf Ihrer Website ausgeführt.
Scrollen Sie schließlich wieder nach oben und schalten Sie den Schalter 'Inaktiv' auf 'Aktiv'.
Klicken Sie anschließend auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern und den Code auszuführen.
Bonustipps für eine mobilfreundliche WordPress-Website
Das Ändern der Adressleistenfarbe ist ein guter Anfang, aber die Erstellung einer wirklich mobilfreundlichen Website erfordert noch einige weitere Schritte.
Da Suchmaschinen wie Google Mobile-First-Indexing priorisieren, ist eine gute mobile Erfahrung für Ihr SEO unerlässlich. Tatsächlich machen mobile Geräte den Großteil des gesamten Internetverkehrs aus.
Hier sind einige weitere Tipps zur Verbesserung Ihrer Website für diese Besucher:
- Verwenden Sie ein responsives Theme oder einen Page Builder: Ihre Grundlage sollte ein responsives WordPress-Theme sein, das sich an verschiedene Bildschirmgrößen anpasst. Für noch mehr Kontrolle, wenn Sie Anfänger sind und benutzerdefinierte Layouts ohne Code erstellen möchten, können Sie ein Plugin wie SeedProd verwenden. Es ist ein visueller Drag-and-Drop-Page-Builder, dem über 1 Million Benutzer vertrauen, und mit dem Sie einfach benutzerdefinierte mobilfreundliche Layouts erstellen können.
- Erstellen Sie mobilfreundliche Formulare: Stellen Sie sicher, dass Ihre Kontaktformulare, Anmeldeformulare und Umfragen auf einem kleinen Bildschirm einfach auszufüllen sind. Wir empfehlen ein Plugin wie WPForms. Es ist ein einfach zu bedienender Formularersteller, dem über 6 Millionen Websites vertrauen und der mit 4,9/5 Sternen bewertet wurde. Seine Drag-and-Drop-Oberfläche und optimierten Vorlagen machen es super einfach, mobilfreundliche Formulare zu erstellen.
- Optimieren Sie Bilder und Medien: Große Bilder können Ihre Website bei mobilen Verbindungen verlangsamen. Stellen Sie sicher, dass Sie Ihre Bilder vor dem Hochladen für das Web in der Größe anpassen und komprimieren.
- Konzentrieren Sie sich auf die Website-Geschwindigkeit: Abgesehen von Bildern können Sie Ihre Website beschleunigen, indem Sie einen schnellen WordPress-Hosting-Anbieter nutzen, Lazy Loading für Kommentare aktivieren und ein Caching-Plugin verwenden.
Weitere Informationen finden Sie in unserem vollständigen Tutorial zu Möglichkeiten zur Erstellung einer mobilfreundlichen WordPress-Website.
Warum sieht meine WordPress-Website in verschiedenen Browsern anders aus?
Es ist völlig normal, dass Ihre WordPress-Website in verschiedenen Browsern wie Chrome, Firefox, Safari oder Edge leicht unterschiedlich aussieht. In den meisten Fällen bedeutet dies nicht, dass etwas kaputt ist.
Verschiedene Browser stellen Websites einfach auf leicht unterschiedliche Weise dar. Hier sind einige häufige Gründe dafür:
- Browser verwenden unterschiedliche Rendering-Engines: Jeder Browser verarbeitet HTML, CSS und JavaScript unterschiedlich, was Layout und Styling beeinflussen kann.
- Standard-Browserstile können variieren: Browser wenden ihre eigenen Standardstile auf Elemente wie Überschriften, Schaltflächen und Formulare an.
- Geräte und Betriebssysteme beeinflussen das Erscheinungsbild: Bildschirmgröße, Schriftartendarstellung und Betriebssystemeinstellungen können ändern, wie Ihre Website aussieht.
- Caching zeigt möglicherweise ältere Inhalte an: Ein Browser zeigt möglicherweise immer noch eine zwischengespeicherte Version Ihrer Website an, während ein anderer die neuesten Updates anzeigt.
- Benutzereinstellungen können die Anzeige ändern: Zoomstufen, benutzerdefinierte Schriftarten oder Barrierefreiheitseinstellungen können beeinflussen, wie Besucher Ihre Website sehen.
Um diese Unterschiede zu reduzieren, empfehlen wir die Verwendung eines responsiven WordPress-Themes und das Testen Ihrer Website in mehreren Browsern und Geräten, bevor Sie größere Änderungen veröffentlichen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die Farbe der Adressleiste in einem mobilen Browser an Ihre WordPress-Website anpassen können. Möglicherweise möchten Sie auch unseren Anfängerleitfaden zur Anpassung von Farben auf Ihrer WordPress-Website und unsere Expertenauswahl der besten Page-Builder-Plugins für WordPress lesen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Julie
Ich liebe das Aussehen des mobilen Tabs, der mit der obersten Kopfzeile einer Website übereinstimmt, daher suche ich nach einer Möglichkeit, dies zu tun. Ich habe all diese Anweisungen befolgt, aber nichts hat sich geändert, als ich meine Website auf dem Handy angesehen habe. Irgendwelche Vorschläge?
WPBeginner-Support
Verwendet Ihr Telefon den Dunkelmodus oder ein anderes Styling, das das von Ihrem Website-Theme festgelegte Styling überschreibt? Das ist der häufigste Grund, warum das Styling nicht mit dem übereinstimmt, was Sie mit dieser Methode festgelegt haben, da Ihr Telefon Vorrang vor dem hat, was Ihre Website festgelegt hat.
Administrator
Pragati Kumar Sheel
Das ist cool. Könnten Sie uns helfen, auch die Navigationsleiste zu ändern? Ich habe gesehen, dass einige Websites das auch implementieren.
WPBeginner-Support
Sie sollten sich zuerst an den Support Ihres spezifischen Themes wenden, da jedes Theme sein eigenes Design und seine eigenen Einstellungen für seine Navigationsleiste hat.
Administrator
Dennis Muthomi
Ich erinnere mich, dass ich das damals implementiert habe. Heutzutage hat sich vieles geändert, die Benutzeroberfläche sieht jetzt komplett anders aus als damals.
Mrteesurez
Ich habe nach Möglichkeiten gesucht, dies zu tun, seit ich es in diesem Beitrag entdeckt habe. Ich bin überrascht, dass es nur eine einzige Codezeile ist, die die Magie bewirkt. Ich werde es auf meiner Website anwenden, weil mir die Funktionalität gefällt.
Jiří Vaněk
Vielen Dank für die Anleitung. Ich habe sie auf meiner Website verwendet und sie funktioniert großartig. Schade, dass sie nur auf dem mobilen Chrome funktioniert.
WPBeginner-Support
Vielleicht wird es in Zukunft für die Desktop-Nutzung wahrscheinlicher.
Administrator
Jiří Vaněk
Vielen Dank für die Anleitung. Ich habe sie auf meiner Website verwendet, und jetzt zeigt der Chrome-Browser auf Mobilgeräten sie mit den Farben des Headers der Website an. Es sieht viel besser aus. Es ist nur schade, dass wahrscheinlich kein anderer Browser außer Chrome für Mobilgeräte dies unterstützt.
WPBeginner-Support
Einige andere mobile Browser beginnen, ihn zu übernehmen, sodass er hoffentlich häufiger zu sehen sein wird
Administrator
Jiří Vaněk
Hoffentlich werden mehr Browser dies im Laufe der Zeit unterstützen, da ich diese Funktion bisher nur auf dem mobilen Chrome verifiziert habe. Es wäre erstaunlich, wenn alle mobilen Browser dies könnten, denn es lässt das Web nicht nur besser aussehen, sondern verleiht ihm auch eine einzigartige Note, da nicht viele Leute es nutzen. Hoffentlich werden wir dies in Zukunft in mehr Browsern sehen.
Mrteesurez
Genau! Es verleiht Websites eine einzigartige Note und macht sie professioneller und attraktiver für Besucher. Obwohl Chrome es zuerst übernommen hat, habe ich jetzt bemerkt, dass auch andere Browser wie Vivaldi es übernehmen. Danke für Ihre Beobachtung.
Ankit Sahu
Absolut funktionierend
Danke dafür
WPBeginner-Support
Wir freuen uns, dass unser Leitfaden hilfreich war!
Administrator
Sarah
Das scheint nicht mehr zu funktionieren... Ich habe das im Februar auf meiner Website implementiert und es gerade auf einer anderen angewendet... bei der Überprüfung funktioniert die neue nicht und die alte auch nicht! Hat sich hier etwas in der Chrome-Mobil-App geändert?
WPBeginner-Support
Wenn Sie den Dark Mode für Ihren Browser verwenden, überschreibt Chrome diese Einstellung.
Administrator
Naveen Rana
Wo finde ich die Datei header.php des Themes oder Child-Themes?
WPBeginner-Support
Sie finden die Dateien Ihres Themes entweder unter Design > Theme-Editor, über den Dateimanager Ihres Hosting-Anbieters oder mit einem FTP-Tool, indem Sie unserer Anleitung unten folgen:
https://014.leahstevensyj.workers.dev/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Für FTP oder den Dateimanager Ihres Hosts möchten Sie unter wp-content>Themes navigieren und den Ordner mit demselben Namen wie Ihr aktives Theme finden.
Administrator
Manshant Singh
Toller Beitrag und es funktioniert, aber nicht auf der Kategorieseite und wenn ich einen Beitrag öffne.
WPBeginner-Support
Sie sollten sich beim Support Ihres spezifischen Themas erkundigen, ob diesen Seiten keine andere Kopfzeilenformatierung zugewiesen wird.
Administrator
Aditya Savita
Zuerst einmal vielen Dank für dieses großartige Tutorial, aber jetzt stehe ich vor einem Problem: Die Farbe der Adressleiste wird auf der Homepage meiner Website nicht angezeigt. Sie wird auf allen Seiten und Beiträgen meiner Website perfekt angezeigt, außer auf meiner Homepage.
Was soll ich jetzt tun? Bitte helfen Sie mir!
WPBeginner-Support
Möglicherweise möchten Sie den Support für Ihr spezifisches Theme überprüfen, ob es nicht auf der Homepage-Vorlage eingestellt ist, die Ihre Einstellungen überschreiben könnte.
Administrator
Almesh
Ich konnte es auf Anhieb erledigen. Danke
WPBeginner-Support
Wir freuen uns, dass unser Leitfaden hilfreich war
Administrator
Craige Wilson
Dauert die Aktualisierung?
WPBeginner-Support
Es kann und Browser-Caching würde die Änderung ebenfalls verzögern.
Administrator
Ebrahim Talebi
Vielen Dank.
Aber seien Sie sich bewusst, dass dieser Trick nicht funktioniert, wenn der Benutzer den Dunkelmodus auf seinem Telefon aktiviert hat, da dieser alles andere überschreibt. (Einige Telefone haben eine Option namens Dunkelmodus)
WPBeginner-Support
Vielen Dank, dass Sie das geteilt haben, falls jemand auf dieses Problem gestoßen ist
Administrator
Arif
Atemberaubend und am einfachsten
WPBeginner-Support
Wir freuen uns, dass unser Leitfaden hilfreich war
Administrator
kafi
Ich musste nur sagen, Mann,
ihr seid die BESTEN.
WPBeginner-Support
Danke, es freut uns, dass Ihnen unsere Inhalte gefallen
Administrator
Fred
Ein weiteres sehr einfaches Tutorial von Ihrem Team!
Ich möchte der Adressleiste eine Farbverlaufsfarbe hinzufügen.
Ist es möglich?
WPBeginner-Support
Mit dieser Methode derzeit nicht.
Administrator
Fred
Danke für Ihre Antwort
Valli M
Vielen Dank:)
WPBeginner-Support
Gern geschehen
Administrator
Amit Ayalon
Funktioniert sehr gut! Super einfach einzurichten.
Vielen Dank!
WPBeginner-Support
Gern geschehen, wir freuen uns, dass unsere Anleitung hilfreich sein konnte
Administrator
Rafael
Funktioniert perfekt!
Danke
WPBeginner-Support
Wir freuen uns, dass unser Leitfaden hilfreich war
Administrator
Sunil Ilanthila
Adressleiste Farbe geändert, aber Text ist schwarz, ich will ihn in Weiß, wie?
WPBeginner-Support
Sofern ich nichts anderes höre, wird dies vom mobilen Browser bestimmt, nicht von einer Farbe, die Sie festlegen.
Administrator
Deborah
Danke. Sehr schnell und einfach zu machen, und verleiht meiner Website ein ziemlich schickes Aussehen.
WPBeginner-Support
Schön, dass unser Tutorial helfen konnte
Administrator
Rohit
Kann mir jemand helfen? Funktioniert das nur in Chrome und kann es auch für ASP.NET verwendet werden?
WPBeginner-Support
Vorerst funktioniert es nur unter Chrome.
Administrator
Nasim
Wenn Sie den Elementor Page Builder verwenden, wie machen Sie das?
Syaz Amirin
Es ist dasselbe. Ich meine, derselbe Prozess, auch mit Elementor.
M.Surana
Irgendein Snippet dafür?
Philarpy
Wunderbar, es funktioniert auch bei mir. Danke.
Mark
brillant, 2-Minuten-Job und funktioniert einwandfrei! Danke
Phil Duffney
Vielen Dank, das war eine riesige Hilfe!
Nitish
Es funktioniert auch unter Android Kit Kat... Ich glaube, sie haben Chrome aktualisiert...
JEEiEE
Danke
aber was ist mit iPhone und Windows
Craig Jon Smith
Hat bei mir auf Weebly super funktioniert. Anstatt mit dem Code herumzuspielen, gehen Sie einfach zu den Einstellungen und fügen Sie ihn in den Abschnitt ein, in dem buchstäblich Header-Code steht. Ich habe es jetzt auf zwei Websites gemacht. Eine noch zu erledigen.
Diego
Sehr schön… und es funktioniert! Aber wie bekommen wir den Text dazu, sich in Weiß zu ändern?
Taylor
Vielen Dank! Genau das, was ich gesucht habe und es hat genau so funktioniert, wie Sie es beschrieben haben!
Akash Gupta
Fügen Sie diesen Code einfach in die Header.php-Datei Ihres Themes oder Child-Themes direkt vor dem schließenden Tag ein.
aber es funktioniert nicht auf einer Website. Warum?
Ethann
sieht so aus, als würde es auf Android Version 5.0 und höher funktionieren
Enack
Toller Tipp, hat bei meiner Website super funktioniert (wie Ihre Website immer tut). Lassen Sie mich wissen, wenn Sie auch den Code für iPhones bekommen, aber so oder so kann ich mich nicht beschweren. Danke!
Irfan Abbas
Kann diese Methode bei Newspaper 7 Themes funktionieren.
Hamid Roshaan
Genau das möchte ich wissen
Thomyum
Du bist spitze!
Zakaria
Hallo, danke für diesen Tipp, aber funktioniert das auch bei Blogger-Vorlagen? Wenn ja, wie füge ich es hinzu? Ich habe es viele Male versucht, aber Blogger zeigt immer einen Fehler an.
Saikot Hc
Super Chef! Danke…!!
Xaif
Es hat bei mir nicht funktioniert. Ich hatte das Eleven40 Child Theme, aber es funktioniert nicht
Queven
Hallo! In welchen Browsern wird es unterstützt?
WPBeginner-Support
Google Chrome auf Android-Geräten.
Administrator
Terri
Liebe das! Danke für den Tipp
Dhiravat
Sehr anwendbarer Trick. Danke!
Alessio
Das ist wirklich cool! Danke!
Gerard Jimenez
Tolle Information, hat gerade meine Seite verändert.
Bobby
Guter Tipp. Lassen Sie uns herausfinden, wie das für alle mobilen Browser geht.
Shu
Danke. Sehr geschätzt
Jehangir
Sehr informativ.
Ahmad Fatah
Wow, sieht einfach aus.. Ich werde es auf meinem Blog ausprobieren.
Terima Kasih