Czy chcesz zmienić kolor paska adresu w przeglądarce mobilnej, aby pasował do twojej witryny WordPress?
Wiele popularnych witryn internetowych, takich jak BBC i Facebook, używa własnych kolorów marki na pasku adresu w przeglądarkach mobilnych. Może to stworzyć bardziej spójne i markowe doświadczenie dla twoich użytkowników i zwiększyć zaangażowanie.
W tym artykule pokażemy, jak łatwo zmienić kolor paska adresu w przeglądarce mobilnej, aby pasował do twojej witryny WordPress.
Dlaczego warto dopasować kolor paska adresu w przeglądarce mobilnej?
Większość popularnych motywów WordPress jest responsywna dla urządzeń mobilnych. Dzięki temu Twoja witryna wygląda świetnie na urządzeniach mobilnych. Jednak nadal wygląda i działa jak witryna internetowa.
Dopasowując kolor paska adresu do twojej witryny WordPress, możesz zapewnić wrażenie natywnej aplikacji. Poprawia to wrażenia użytkownika, co ostatecznie zwiększa sprzedaż i konwersje.
Dobrze dobrany kolor paska adresu może nawet sprawić, że twoja witryna internetowa będzie wyglądać bardziej profesjonalnie i atrakcyjnie wizualnie.
Powiedziawszy to, zobaczmy, jak łatwo dopasować pasek adresu w przeglądarce mobilnej do twojego motywu WordPress.
Uwaga: Należy pamiętać, że ta metoda działa obecnie tylko w przeglądarce internetowej Google Chrome na urządzeniach z systemem Android korzystających z wersji Lollipop lub nowszych.
Jak zmienić kolor paska adresu w przeglądarce mobilnej, aby pasował do twojej witryny WordPress?
Możesz łatwo zmienić kolor paska adresu w przeglądarce mobilnej, dodając własny kod do pliku header. php twojego motywu lub motywu potomnego tuż przed zamykającym tagiem </head>.
Chociaż najmniejszy błąd może zepsuć twoją witrynę internetową i uczynić ją niedostępną.
Dlatego zalecamy korzystanie z WPCode. Jest to najlepsza wtyczka do fragmentów kodu WordPress na rynku i najbezpieczniejszy sposób na dodanie własnego kodu do twojej witryny internetowej.
Najpierw należy zainstalować i włączyć wtyczkę WPCode. Aby uzyskać szczegółowe instrukcje, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Uwaga: Wtyczka WPCode ma również darmową wersję, której można użyć w tym poradniku. Jednak przejście na płatny plan daje dostęp do funkcji takich jak biblioteka fragmentów kodu, logika warunkowa i inne.
Po włączaniu, przejdź na stronę Code Snippets ” + Add Snippet z panelu bocznego administratora WordPress.
Tutaj kliknij przycisk „Użyj fragmentu kodu” pod opcją „Dodaj swój konfigurator (nowy fragment kodu)”.
Spowoduje to przejście do strony „Create Custom Snippet”, gdzie można rozpocząć od dodania nazwy fragmentu kodu. Nazwa ta nie będzie wyświetlana na front-endzie i służy wyłącznie do twojej identyfikacji.
Następnie wybierz „Fragment kodu HTML” jako rodzaj kodu z rozwijanego menu po prawej stronie.
Teraz wystarczy skopiować i wkleić poniższy fragment kodu w polu „Podgląd kodu”:
<meta name="theme-color" content="#ff6600" />
Gdy to zrobisz, możesz dodać kod szesnastkowy dla wybranego przez ciebie koloru obok linii content= w kodzie.
Kolor ten będzie następnie używany w pasku adresu twojej przeglądarki mobilnej.
Wskazówka: Wartość HEX koloru można uzyskać za pomocą dowolnego oprogramowania do edycji obrazków, takiego jak Adobe Photoshop, Gimp, Paint itp.
Następnie przewiń w dół do sekcji „Wstawianie” i wybierz tryb „Automatyczne wstawianie”.
W ten sposób kod zostanie automatycznie wykonany na twojej witrynie internetowej po włączaniu.
Na koniec przewiń z powrotem do góry i przełącz przełącznik „Nieaktywne” na „Aktywne”.
Następnie kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje ustawienia i wykonać kod.
Dodatkowe wskazówki dotyczące tworzenia witryny WordPress przyjaznej dla urządzeń mobilnych
Oprócz zmiany koloru paska adresu, można również skorzystać z kilku innych wskazówek, aby stworzyć witrynę internetową przyjazną dla urządzeń mobilnych. Wynika to z faktu, że wyszukiwarki takie jak Google priorytetowo traktują indeksowanie mobilne.
Ponadto wyszukiwania mobilne mają o 85,8% więcej wyświetleń niż ich odpowiedniki na komputerach stacjonarnych, co pomaga generować więcej potencjalnych klientów.
Aby stworzyć witrynę przyjazną dla urządzeń mobilnych, zalecamy użycie responsywnego motywu WordPress lub kreatora stron, takiego jak SeedProd.
Aby uzyskać szczegółowe informacje, zapoznaj się z naszym poradnikiem na temat tworzenia własnego motywu w WordPress.
Musisz również użyć wtyczki takiej jak WPForms, aby dodać formularze do twojej witryny internetowej, takie jak formularze kontaktowe, rejestracyjne i logowania.
Wynika to z faktu, że WPForms zawiera ponad 1700 gotowych szablonów, jest w pełni zabezpieczony przed spamem i jest specjalnie zoptymalizowany pod kątem urządzeń mobilnych, zapewniając użytkownikom mobilnym najwyższą jakość.
Poza tym należy zmienić rozmiar dużych obrazków, korzystać z szybkiego dostawcy hostingu, leniwie wczytywać komentarze, stworzyć menu nawigacyjne reagujące na urządzenia mobilne i wiele więcej.
Aby poznać inne wskazówki, zapoznaj się z naszym poradnikiem na temat sposobów tworzenia witryny WordPress przyjaznej dla urządzeń mobilnych.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak zmienić kolor paska adresu w przeglądarce mobilnej, aby pasował do twojej witryny WordPress. Warto również zapoznać się z naszym przewodnikiem dla początkujących na temat dostosowywania kolorów na własnej witrynie internetowej WordPress i naszymi eksperckimi propozycjami najlepszych wtyczek do tworzenia stron dla WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Thank you for the instructions. I used them on my website and it works great. Too bad it only works on mobile Chrome.
WPBeginner Support says
Maybe in the future it will be more likely for desktop browsing.
Administrator
Jiří Vaněk says
Thank you for the instructions. I used them on my website, and now the Chrome browser on mobile displays it with the colors of the website’s header. It looks much better. It’s just a pity that, most likely, no other browser besides mobile Chrome supports it.
WPBeginner Support says
Some other mobile browsers are starting to adopt it so it should hopefully start to be seen more often
Administrator
Ankit Sahu says
Absolutely working
Thanks for this
WPBeginner Support says
Glad our guide was helpful!
Administrator
Sarah says
This seems to have stopped working… I implemented this on my website back in Feb and I just applied it to another one… upon checking the new one doesn’t work and neither does the old! Did something change here in Chrome mobile app?
WPBeginner Support says
If you’re using dark mode for your browser, chrome will override this setting.
Administrator
Naveen Rana says
Where to find theme or child theme‘s header.php file?
WPBeginner Support says
You would either find your theme’s files under Appearance>Theme Editor, using your hosting provider’s file manager, or using an FTP tool following our guide below:
https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
For FTP or your host’s file manager, you would want to go under your wp-content>Themes and find the folder with the same name as your active theme.
Administrator
Manshant Singh says
Great post and it is working but not working on category page and when I open a post.
WPBeginner Support says
You would want to check with the support for your specific theme that thee is not a different header styling being assigned to those pages.
Administrator
Aditya Savita says
First of all thank you for this great tutorial but now I’m facing a problem the address bar color is not showing on the homepage of my site. It’s perfectly showing on all pages and posts of my site except my homepage.
What should I do now? Please help!
WPBeginner Support says
You may want to check with the support for your specific theme that it is not set on the homepage template that could be overriding your settings.
Administrator
Almesh says
I was able to get it done by one shot. thank you
WPBeginner Support says
Glad our guide was helpful
Administrator
Craige Wilson says
Does it takes time to update?
WPBeginner Support says
It can and browser caching would also delay the change as well.
Administrator
Ebrahim Talebi says
Thanks a lot.
But, be aware that this trick won’t work if the user has enabled dark mode on its phone because it overrides everything else. (Some phones has an option called dark mode)
WPBeginner Support says
Thank you for sharing that in case someone ran into that issue
Administrator
Arif says
Mind-Blowing and simplest
WPBeginner Support says
Glad our guide was helpful
Administrator
kafi says
I just needed to say man,
you guys are the BEST.
WPBeginner Support says
Thank you, glad you like our content
Administrator
Fred says
Another very easy tutorial from your team!
I would like to add a gradient color to the address bar.
Is it possible?
WPBeginner Support says
Not at the moment with this method.
Administrator
Fred says
Thanks for your reply
Valli M says
Thank you so much:)
WPBeginner Support says
You’re welcome
Administrator
Amit Ayalon says
Work very well! super easy to set up.
Thank you very much!
WPBeginner Support says
You’re welcome, glad our guide could be helpful
Administrator
Rafael says
Works perfectly!
thanks
WPBeginner Support says
Glad our guide was helpful
Administrator
Sunil Ilanthila says
Address bar color changed but text is in black, I wan it in Waite, how?
WPBeginner Support says
Unless I hear otherwise, that is decided by the mobile browser, not a color you set.
Administrator
Deborah says
Thank you. Very quick and easy to do, and gives my website a rather posh look.
WPBeginner Support says
Glad our tutorial could help
Administrator
Rohit says
Anyonebhelp me will it only work in Chrome and can it be used for asp.net also ?
WPBeginner Support says
For the moment it will only work on chrome.
Administrator
Nasim says
If using elementor Page Builder How To Do That
Syaz Amirin says
It’s the same. The same process I meant, even using Elementor.
M.Surana says
Any snippet for this?
Philarpy says
Wonderful, it’s working for me as well. Thanks.
Mark says
brilliant, 2 minute job and works a treat! Thanks
Phil Duffney says
Thank you so much, that was a huge help!
Nitish says
It is working in android kit kat too…I think they updated chrome…
JEEiEE says
Thank you
but what about iphone and windows
Craig Jon Smith says
Worked great for me on Weebly. Instead of messing with the code just go to settings, and drop it in the section that literally says header code. I’ve done it to two sites, now. One more to go
Diego says
Very nice… and it works! But how do we get the text to to change to white?
Taylor says
Thanks so much! Just what I was looking and worked just the way you described its setup!
Akash gupta says
Simply add this code in your theme or child theme‘s header.php file just before the closing tag.
but it is not work in one website . why?
ethann says
looks like it works on android version 5.0 and above
enack says
Great tip, worked great for my site (as your site always does) do let me know if you get the code for iphones also but either way can’t complain. Thanks!
Irfan abbas says
Can this method work on newspaper 7 themes.
Hamid Roshaan says
Exactly what I want to know
Thomyum says
You’re rock!
zakaria says
hello, thanks for this tip but is that working on blogger s templates? if yes how to add it? i ve tried many times but blogger always showing error.
Saikot Hc says
Awesome boss! Thanks…!!
Xaif says
It didn’t work for me. I was having eleven40 child theme but it is not working
Queven says
Hi! It’s supported in what browsers?
WPBeginner Support says
Google Chrome on Android devices.
Administrator
Terri says
Love this! Thanks for the tip
dhiravat says
Very applicable trick. Thanks!
Alessio says
This is really cool! Thanks!
Gerard Jimenez says
Great piece of info, just changed my site.
Bobby says
Nice tip. Let’s figure out how to do that for all browsers on mobile.
Shu says
Thanks. Much appreciated
jehangir says
Very informative.
Ahmad Fatah says
Wow look simple.. i will try on my blog.
Terima Kasih