Kiedy tworzysz witrynę WordPress, która dobrze działa na telefonach, prawdopodobnie skupiasz się na tym, aby wszystko mieściło się na ekranie i szybko się ładowało.
Ale jest jeszcze jeden drobny szczegół, który może poprawić wrażenia mobilne Twojej witryny: zmiana koloru paska adresu w mobilnej przeglądarce, aby pasował do Twojej witryny WordPress.
Dzięki temu Twoja witryna będzie wyglądać bardziej dopracowana, profesjonalna i spójna z Twoją marką.
Pomogliśmy wielu właścicielom witryn WordPress poprawić ich projekt mobilny, a to jedna z tych prostych poprawek, które mogą przynieść zauważalną różnicę.
W tym przewodniku pokażemy najłatwiejszy sposób na zmianę koloru paska adresu w mobilnej przeglądarce, aby pasował do projektu Twojej witryny WordPress.
💡 TL;DR: Kolor paska adresu mobilnej przeglądarki w WordPress można zmienić za pomocą wtyczki WPCode. Po prostu utwórz nowy fragment kodu HTML, dodaj znacznik meta theme-color z preferowanym kolorem szesnastkowym, ustaw go na automatyczne wstawianie i aktywuj fragment, aby zastosować zmiany w całej witrynie.
Dlaczego warto zmieniać kolor paska adresu w mobilnej przeglądarce?
Zmiana koloru paska adresu w mobilnej przeglądarce sprawia, że Twoja witryna WordPress wygląda bardziej dopracowana i spójna wizualnie.
Tworzy to płynniejsze wrażenia mobilne, dopasowując interfejs przeglądarki do brandingu i projektu Twojej witryny.
Oto niektóre z największych korzyści:
- Tworzy spójność wizualną: Dopasowanie koloru paska adresu do projektu witryny nadaje jej czystszy i bardziej jednolity wygląd.
- Poprawia wrażenia mobilne: Pomaga Twojej witrynie wyglądać bardziej dopracowaną i przypominać aplikację na urządzeniach mobilnych.
- Wzmacnia Twój branding: Użycie kolorów marki w interfejsie przeglądarki sprawia, że Twoja witryna jest bardziej profesjonalna i rozpoznawalna.
- Sprawia, że Twoja witryna wydaje się bardziej nowoczesna: Dostosowany kolor mobilnej przeglądarki może sprawić, że Twoja witryna będzie się wyróżniać na tle generycznych stron mobilnych.
Chociaż jest to niewielka zmiana projektowa, może sprawić, że Twoja witryna WordPress będzie znacznie bardziej dopracowana dla odwiedzających mobilnych.
Obsługa kolorów paska adresu mobilnej przeglądarki przez przeglądarki
Zanim zmienisz kolor paska adresu mobilnej przeglądarki, ważne jest, aby wiedzieć, że obsługa może się różnić w zależności od używanej przeglądarki i urządzenia.
Oto szybki przegląd tego, jak popularne mobilne przeglądarki obsługują znacznik meta theme-color:
| Przeglądarka/Platforma | Status wsparcia | Notatki |
|---|---|---|
| Google Chrome (Android) | Pełne wsparcie | Zmienia kolor paska adresu dla spójnego wyglądu. |
| Safari (iOS) | Brak bezpośredniego wsparcia dla koloru paska adresu | Obsługuje theme-color dla manifestów PWA i elementów interfejsu przeglądarki, ale nie ogólnego paska adresu. |
| Firefox (Android) | Częściowe/Zmienne | Wsparcie może się różnić w zależności od konkretnej wersji i ustawień motywu przeglądarki. |
| Starsze/Nieobsługiwane przeglądarki | Brak wsparcia | Zignoruje ustawienie bez powodowania problemów na Twojej stronie. |
Aby zmienić kolor paska adresu, przeglądarki mobilne używają małego fragmentu kodu HTML zwanego meta tagiem theme-color. Informuje on obsługiwane przeglądarki, jakiego koloru użyć do elementów interfejsu, takich jak pasek adresu.
Możesz dodać ten kod do swojej witryny WordPress, wstawiając meta tag w sekcji <head> swojego motywu.
Mając to na uwadze, zobaczmy, jak łatwo dopasować pasek adresu w przeglądarce mobilnej do Twojego motywu WordPress.
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 niestandardowy kod do pliku header.php swojego motywu lub motywu potomnego, tuż przed zamykającym tagiem </head>.
Chociaż najmniejszy błąd może zepsuć Twoją witrynę i uczynić ją niedostępną.
Dlatego polecamy użycie WPCode. Po dokładnym przetestowaniu doszliśmy do wniosku, że jest to najlepsza wtyczka do fragmentów kodu WordPress i najbezpieczniejszy sposób dodawania kodu do Twojej witryny.
Więcej szczegółów na temat wtyczki znajdziesz w naszej recenzji WPCode.
Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.
Uwaga: Wtyczka WPCode ma również bezpłatną wersję, której możesz użyć do tego samouczka. Jednak uaktualnienie do płatnego planu zapewni Ci dostęp do funkcji takich jak biblioteka fragmentów kodu, logika warunkowa i inne.
Po aktywacji przejdź do strony Fragmenty kodu » + Dodaj fragment z paska bocznego administracji WordPress.
Tutaj kliknij przycisk „Użyj fragmentu” pod opcją „Dodaj własny kod (nowy fragment)”.
Spowoduje to przejście do strony „Utwórz niestandardowy fragment”, gdzie możesz zacząć od dodania nazwy dla fragmentu kodu. Ta nazwa nie będzie wyświetlana na froncie i służy jedynie do Twojej identyfikacji.
Następnie wybierz „Fragment HTML” jako typ kodu z pojawiającego się okna dialogowego.
Teraz wystarczy skopiować i wkleić następujący fragment kodu do pola „Podgląd kodu”:
<meta name="theme-color" content="#ff6600" />
Po wykonaniu tej czynności możesz dodać kod szesnastkowy koloru według własnego wyboru obok linii content= w kodzie.
Ten kolor zostanie następnie użyty dla paska adresu w przeglądarce mobilnej.
Wskazówka Pro: Wartość HEX koloru możesz uzyskać za pomocą dowolnego oprogramowania do edycji obrazów, takiego jak Adobe Photoshop lub Gimp.
Aby uzyskać szybszą metodę, która nie wymaga specjalnego oprogramowania, możesz użyć darmowego internetowego selektora kolorów, a nawet wbudowanego narzędzia „Zbadaj” w przeglądarce internetowej, aby znaleźć dokładny kod szesnastkowy z Twojej witryny.
Następnie przewiń w dół do sekcji „Wstawianie” i wybierz tryb „Automatyczne wstawianie”.
W ten sposób kod zostanie automatycznie wykonany na Twojej stronie po aktywacji.
Na koniec przewiń z powrotem na górę i przełącz przełącznik „Nieaktywny” na „Aktywny”.
Następnie kliknij przycisk „Zapisz fragment”, aby zapisać ustawienia i wykonać kod.
Dodatkowe wskazówki dotyczące tworzenia przyjaznej dla urządzeń mobilnych witryny WordPress
Zmiana koloru paska adresu to świetny początek, ale stworzenie prawdziwie przyjaznej dla urządzeń mobilnych witryny wymaga kilku dodatkowych kroków.
Ponieważ wyszukiwarki takie jak Google priorytetyzują indeksowanie mobilne, dobre doświadczenie mobilne jest kluczowe dla Twojego SEO. W rzeczywistości urządzenia mobilne odpowiadają za większość całego ruchu internetowego.
Oto kilka innych wskazówek, jak ulepszyć swoją witrynę dla tych odwiedzających:
- Użyj responsywnego motywu lub kreatora stron: Twoją podstawą powinien być responsywny motyw WordPress, który dostosowuje się do różnych rozmiarów ekranu. Aby uzyskać jeszcze większą kontrolę, jeśli jesteś początkującym i chcesz tworzyć niestandardowe układy bez kodowania, możesz użyć wtyczki takiej jak SeedProd. Jest to wizualny kreator stron metodą przeciągnij i upuść, któremu zaufało ponad milion użytkowników, pozwalając łatwo tworzyć niestandardowe układy przyjazne dla urządzeń mobilnych.
- Twórz formularze gotowe na urządzenia mobilne: Upewnij się, że formularze kontaktowe, formularze logowania i ankiety są łatwe do wypełnienia na małym ekranie. Polecamy wtyczkę taką jak WPForms. Jest to łatwy w użyciu kreator formularzy, któremu zaufało ponad 6 milionów witryn i który ma ocenę 4,9/5 gwiazdek. Jego interfejs przeciągnij i upuść oraz zoptymalizowane szablony sprawiają, że tworzenie formularzy gotowych na urządzenia mobilne jest niezwykle proste.
- Optymalizuj obrazy i multimedia: Duże obrazy mogą spowolnić Twoją witrynę na połączeniach mobilnych. Upewnij się, że przeskalowałeś i skomprymowałeś obrazy do sieci przed ich przesłaniem.
- Skup się na szybkości witryny: Oprócz obrazów, możesz przyspieszyć swoją witrynę, korzystając z szybkiego dostawcy hostingu WordPress, włączając leniwego ładowania komentarzy i używając wtyczki do buforowania.
Aby dowiedzieć się więcej, zapoznaj się z naszym pełnym samouczkiem na temat sposobów tworzenia przyjaznej dla urządzeń mobilnych witryny WordPress.
Dlaczego moja witryna WordPress wygląda inaczej w różnych przeglądarkach?
To całkowicie normalne, że Twoja witryna WordPress wygląda nieco inaczej w różnych przeglądarkach, takich jak Chrome, Firefox, Safari czy Edge. W większości przypadków nie oznacza to, że coś jest zepsute.
Różne przeglądarki po prostu wyświetlają strony internetowe w nieco inny sposób. Oto kilka typowych powodów, dla których tak się dzieje:
- Przeglądarki używają różnych silników renderujących: Każda przeglądarka przetwarza HTML, CSS i JavaScript inaczej, co może wpływać na układ i styl.
- Domyślne style przeglądarki mogą się różnić: Przeglądarki stosują własne domyślne style do elementów, takich jak nagłówki, przyciski i formularze.
- Urządzenia i systemy operacyjne wpływają na wygląd: Rozmiar ekranu, renderowanie czcionek i ustawienia systemu operacyjnego mogą zmieniać wygląd Twojej witryny.
- Pamięć podręczna może wyświetlać starszą zawartość: Jedna przeglądarka może nadal wyświetlać wersję z pamięci podręcznej Twojej witryny, podczas gdy inna pokazuje najnowsze aktualizacje.
- Ustawienia użytkownika mogą zmieniać wyświetlanie: Poziomy powiększenia, niestandardowe czcionki lub ustawienia dostępności mogą wpływać na to, jak odwiedzający widzą Twoją witrynę.
Aby zredukować te różnice, zalecamy użycie responsywnego motywu WordPress i testowanie witryny w wielu przeglądarkach i na różnych urządzeniach przed publikacją znaczących zmian.
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. Możesz również zapoznać się z naszym przewodnikiem dla początkujących na temat sposobów dostosowywania kolorów w witrynie WordPress oraz naszymi ekskluzywnymi wyborami najlepszych wtyczek kreatorów stron dla WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Julie
Uwielbiam wygląd karty mobilnej pasującej do nagłówka na samej górze strony internetowej, więc szukałem sposobu, aby to zrobić. Postępowałem zgodnie ze wszystkimi tymi instrukcjami, ale nic się nie zmieniło, gdy przeglądałem moją witrynę na urządzeniu mobilnym. Jakieś sugestie?
Wsparcie WPBeginner
Czy Twój telefon używa trybu ciemnego lub innego stylu, który zastępuje styl ustawiony przez motyw Twojej witryny? To najczęstszy powód, dla którego styl nie pasuje do tego, co ustawiłeś tą metodą, ponieważ Twój telefon będzie miał priorytet nad tym, co ustawiła Twoja witryna.
Administrator
Pragati Kumar Sheel
To fajne. Czy możesz nam pomóc zmienić również pasek nawigacyjny? Widziałem, że kilka witryn też to implementuje.
Wsparcie WPBeginner
Najpierw warto skonsultować się z pomocą techniczną Twojego konkretnego motywu, ponieważ każdy motyw ma swój własny projekt i ustawienia paska nawigacyjnego.
Administrator
Dennis Muthomi
Pamiętam, jak to wtedy wdrażałem. Rzeczy się zmieniły, interfejs użytkownika wygląda teraz zupełnie inaczej niż wtedy.
Mrteesurez
Szukałem sposobów, aby to zrobić, odkąd odkryłem to w tym poście. Jestem zaskoczony, że to tylko jedna linijka kodu czyni magię. Zastosuję to na mojej stronie, ponieważ podoba mi się ta funkcjonalność.
Jiří Vaněk
Dziękuję za instrukcje. Użyłem ich na mojej stronie i działa świetnie. Szkoda, że działa tylko na mobilnym Chrome.
Wsparcie WPBeginner
Może w przyszłości będzie to bardziej prawdopodobne podczas przeglądania na komputerze stacjonarnym.
Administrator
Jiří Vaněk
Dziękuję za instrukcje. Użyłem ich na mojej stronie internetowej i teraz przeglądarka Chrome na urządzeniach mobilnych wyświetla ją z kolorami nagłówka strony. Wygląda znacznie lepiej. Szkoda tylko, że najprawdopodobniej żadna inna przeglądarka poza mobilnym Chrome jej nie obsługuje.
Wsparcie WPBeginner
Niektóre inne mobilne przeglądarki zaczynają to wdrażać, więc miejmy nadzieję, że zacznie być widoczne częściej
Administrator
Jiří Vaněk
Mam nadzieję, że z czasem więcej przeglądarek będzie to obsługiwać, ponieważ do tej pory zweryfikowałem tę funkcję tylko na mobilnym Chrome. Byłoby wspaniale, gdyby wszystkie mobilne przeglądarki mogły to robić, ponieważ nie tylko sprawia, że sieć wygląda lepiej, ale także, ponieważ niewiele osób z tego korzysta, dodaje unikalnego charakteru. Mam nadzieję, że zobaczymy to w większej liczbie przeglądarek w przyszłości.
Mrteesurez
Dokładnie! Dodaje to unikalnego charakteru stronom i sprawia, że są one bardziej profesjonalne i atrakcyjne dla odwiedzających. Chociaż Chrome jako pierwszy to wprowadził, zauważyłem teraz, że inne przeglądarki, takie jak Vivaldi, również to robią. Dziękuję za Twoją obserwację.
Ankit Sahu
Absolutnie działa
Dzięki za to
Wsparcie WPBeginner
Cieszymy się, że nasz przewodnik był pomocny!
Administrator
Sarah
To chyba przestało działać… Wdrożyłem to na mojej stronie w lutym i właśnie zastosowałem to do innej… po sprawdzeniu nowej nie działa, a stara też nie! Czy coś się zmieniło w aplikacji Chrome na telefon?
Wsparcie WPBeginner
Jeśli używasz trybu ciemnego w swojej przeglądarce, Chrome zignoruje to ustawienie.
Administrator
Naveen Rana
Gdzie znaleźć plik header.php motywu lub motywu potomnego?
Wsparcie WPBeginner
Pliki Twojego motywu znajdziesz w sekcji Wygląd>Edytor motywów, korzystając z menedżera plików swojego dostawcy hostingu, lub używając narzędzia FTP zgodnie z naszym przewodnikiem poniżej:
https://014.leahstevensyj.workers.dev/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
W przypadku FTP lub menedżera plików Twojego hostingu, będziesz chciał przejść do folderu wp-content>Themes i znaleźć folder o tej samej nazwie co Twój aktywny motyw.
Administrator
Manshant Singh
Świetny post, działa, ale nie działa na stronie kategorii i gdy otwieram post.
Wsparcie WPBeginner
Powinieneś skontaktować się z pomocą techniczną swojego konkretnego motywu, aby upewnić się, że te strony nie mają przypisanego innego stylu nagłówka.
Administrator
Aditya Savita
Przede wszystkim dziękuję za ten świetny tutorial, ale teraz napotykam problem: kolor paska adresu nie wyświetla się na stronie głównej mojej witryny. Wyświetla się idealnie na wszystkich stronach i wpisach mojej witryny, z wyjątkiem strony głównej.
Co mam teraz zrobić? Proszę o pomoc!
Wsparcie WPBeginner
Możesz sprawdzić z pomocą techniczną swojego konkretnego motywu, czy nie jest on ustawiony na szablon strony głównej, który może nadpisywać Twoje ustawienia.
Administrator
Almesh
Udało mi się to zrobić za jednym razem. Dziękuję.
Wsparcie WPBeginner
Cieszymy się, że nasz przewodnik był pomocny
Administrator
Craige Wilson
Czy aktualizacja zajmuje czas?
Wsparcie WPBeginner
Może i tak, a buforowanie przeglądarki również opóźniłoby zmianę.
Administrator
Ebrahim Talebi
Dzięki wielkie.
Ale pamiętaj, że ten trik nie zadziała, jeśli użytkownik włączył tryb ciemny na swoim telefonie, ponieważ zastępuje on wszystko inne. (Niektóre telefony mają opcję zwaną trybem ciemnym)
Wsparcie WPBeginner
Dziękuję za udostępnienie tego na wypadek, gdyby ktoś napotkał ten problem
Administrator
Arif
Oszałamiające i najprostsze
Wsparcie WPBeginner
Cieszymy się, że nasz przewodnik był pomocny
Administrator
kafi
Musiałem tylko powiedzieć, stary,
wy jesteście NAJLEPSI.
Wsparcie WPBeginner
Dziękujemy, cieszymy się, że podoba Ci się nasze treści
Administrator
Fred
Kolejny bardzo łatwy samouczek od Waszego zespołu!
Chciałbym dodać kolor gradientu do paska adresu.
Czy to możliwe?
Wsparcie WPBeginner
Obecnie tą metodą nie.
Administrator
Fred
Dzięki za odpowiedź
Valli M
Bardzo dziękuję :)
Wsparcie WPBeginner
Proszę bardzo
Administrator
Amit Ayalon
Działa bardzo dobrze! super łatwe w konfiguracji.
Dziękuję bardzo!
Wsparcie WPBeginner
Proszę bardzo, cieszymy się, że nasz przewodnik mógł być pomocny
Administrator
Rafael
Działa idealnie!
dzięki
Wsparcie WPBeginner
Cieszymy się, że nasz przewodnik był pomocny
Administrator
Sunil Ilanthila
Kolor paska adresu się zmienił, ale tekst jest czarny, chcę go na biały, jak?
Wsparcie WPBeginner
Chyba że usłyszę inaczej, jest to ustalane przez przeglądarkę mobilną, a nie przez kolor, który ustawisz.
Administrator
Debora
Dziękuję. Bardzo szybko i łatwo to zrobić, a moja strona internetowa wygląda dość elegancko.
Wsparcie WPBeginner
Cieszymy się, że nasz tutorial mógł pomóc
Administrator
Rohit
Czy ktoś może mi pomóc? Czy to zadziała tylko w Chrome i czy można to również zastosować do asp.net?
Wsparcie WPBeginner
Na razie będzie działać tylko w Chrome.
Administrator
Nasim
Jak to zrobić, używając Elementor Page Builder
Syaz Amirin
To samo. Mam na myśli ten sam proces, nawet używając Elementora.
M.Surana
Jakiś fragment kodu do tego?
Philarpy
Wspaniale, u mnie też działa. Dzięki.
Mark
świetna robota, 2 minuty roboty i działa znakomicie! Dzięki
Phil Duffney
Bardzo dziękuję, to była ogromna pomoc!
Nitish
Działa również na Androidzie Kit Kat… myślę, że zaktualizowali Chrome…
JEEiEE
Dziękuję
a co z iPhone i Windowsem
Craig Jon Smith
Działało świetnie dla mnie na Weebly. Zamiast grzebać w kodzie, przejdź do ustawień i umieść go w sekcji, która dosłownie mówi kod nagłówka. Zrobiłem to już na dwóch stronach. Jeszcze jedna pozostała.
Diego
Bardzo miło… i działa! Ale jak sprawić, żeby tekst zmienił się na biały?
Taylor
Wielkie dzięki! Dokładnie tego szukałem i zadziałało dokładnie tak, jak opisałeś jego konfigurację!
Akash Gupta
Po prostu dodaj ten kod do pliku header.php swojego motywu lub motywu potomnego, tuż przed zamykającym tagiem .
ale nie działa na jednej stronie. dlaczego?
ethann
wygląda na to, że działa na Androidzie w wersji 5.0 i nowszych
enack
Świetna wskazówka, świetnie zadziałała na mojej stronie (jak zawsze Twoja strona działa) daj znać, jeśli dostaniesz kod również dla iPhone'ów, ale tak czy inaczej nie mogę narzekać. Dzięki!
Irfan Abbas
Czy ta metoda zadziała w motywach Newspaper 7.
Hamid Roshaan
Dokładnie to chcę wiedzieć
Thomyum
Jesteś super!
Zakaria
Cześć, dzięki za tę wskazówkę, ale czy to działa na szablonach blogera? Jeśli tak, jak to dodać? Próbowałem wiele razy, ale Blogger zawsze pokazuje błąd.
Saikot Hc
Niesamowity szefie! Dzięki…!!
Xaif
U mnie nie zadziałało. Miałem motyw potomny eleven40, ale nie działa.
Queven
Cześć! W jakich przeglądarkach jest to obsługiwane?
Wsparcie WPBeginner
Google Chrome na urządzeniach z systemem Android.
Administrator
Terri
Uwielbiam to! Dzięki za wskazówkę
dhiravat
Bardzo przydatna sztuczka. Dziękuję!
Alessio
To jest naprawdę super! Dzięki!
Gerard Jimenez
Świetna informacja, właśnie zmieniłem moją stronę.
Bobby
Dobra wskazówka. Dowiedzmy się, jak to zrobić dla wszystkich przeglądarek mobilnych.
Shu
Dzięki. Bardzo doceniam
Jehangir
Bardzo pouczające.
Ahmad Fatah
Wow, wygląda prosto.. Wypróbuję na moim blogu.
Terima Kasih