Când construiți un site WordPress care funcționează bine pe telefoane, probabil vă concentrați pe asigurarea faptului că totul se potrivește ecranului și se încarcă rapid.
Dar există un alt mic detaliu care vă poate îmbunătăți experiența mobilă a site-ului: schimbarea culorii barei de adrese într-un browser mobil pentru a se potrivi cu site-ul dvs. WordPress.
Acest lucru face ca site-ul dvs. web să pară mai rafinat, profesional și consistent cu marca dvs.
Am ajutat mulți proprietari de site-uri WordPress să-și îmbunătățească designul mobil, iar aceasta este una dintre acele ajustări simple care pot face o diferență notabilă.
În acest ghid, vă vom arăta cea mai ușoară modalitate de a schimba culoarea barei de adrese într-un browser mobil pentru a se potrivi cu designul site-ului dvs. WordPress.
💡 TL;DR: Puteți schimba culoarea barei de adrese a browserului mobil în WordPress folosind pluginul WPCode. Pur și simplu creați o nouă piesă de cod HTML, adăugați meta tag-ul theme-color cu culoarea hexazecimală preferată, setați-l să se insereze automat și activați piesa de cod pentru a aplica modificările pe întregul site.
De ce să schimbați culoarea barei de adrese într-un browser mobil?
Schimbarea culorii barei de adrese într-un browser mobil ajută site-ul dvs. WordPress să pară mai rafinat și vizual consistent.
Creează o experiență mobilă mai fluidă prin potrivirea interfeței browserului cu brandingul și designul site-ului dvs. web.
Iată câteva dintre cele mai mari beneficii:
- Creează consistență vizuală: Potrivirea culorii barei de adrese cu designul site-ului dvs. oferă site-ului dvs. web un aspect mai curat și mai unitar.
- Îmbunătățește experiența mobilă: Ajută site-ul dvs. web să pară mai rafinat și asemănător unei aplicații pe dispozitivele mobile.
- Întărește brandingul dvs.: Utilizarea culorilor mărcii dvs. în interfața browserului face ca site-ul dvs. web să pară mai profesional și mai recunoscut.
- Face site-ul dvs. să pară mai modern: O culoare personalizată a browserului mobil poate face ca site-ul dvs. web să iasă în evidență față de paginile mobile generice.
Deși aceasta este o mică modificare de design, poate face ca site-ul dvs. WordPress să pară mult mai rafinat pentru vizitatorii mobili.
Suportul browserelor pentru culorile barei de adrese mobile
Înainte de a schimba culoarea barei de adrese a browserului mobil, este important să știți că suportul poate varia în funcție de browserul și dispozitivul utilizat.
Iată o prezentare generală rapidă a modului în care browserele mobile populare gestionează meta tag-ul theme-color:
| Browser/Platformă | Stare suport | Note |
|---|---|---|
| Google Chrome (Android) | Suport complet | Schimbă culoarea barei de adrese pentru un aspect coerent. |
| Safari (iOS) | Fără suport direct pentru culoarea barei de adrese | Gestionează theme-color pentru manifestele PWA și elementele UI ale browserului, dar nu pentru bara de adrese generală. |
| Firefox (Android) | Parțial/Variază | Suportul poate varia în funcție de versiunea specifică și de setările temei browserului. |
| Browsere vechi/ne-suportate | Fără suport | Ignoră grațios setarea fără a cauza probleme pe site-ul dvs. |
Pentru a schimba culoarea barei de adrese, browserele mobile folosesc o mică bucată de HTML numită meta tag-ul theme-color. Acesta spune browserelor compatibile ce culoare să folosească pentru elementele de interfață, cum ar fi bara de adrese.
Puteți adăuga acest cod pe site-ul dvs. WordPress inserând meta tag-ul în secțiunea <head> a temei dvs.
Acestea fiind spuse, să vedem cum să potrivim cu ușurință bara de adrese din browserul mobil cu tema dvs. WordPress.
Cum să schimbați culoarea barei de adrese în browserul mobil pentru a se potrivi cu site-ul dvs. WordPress
Puteți schimba cu ușurință culoarea barei de adrese în browserul mobil adăugând cod personalizat la tema dvs. sau la fișierul header.php al temei copil, chiar înainte de tag-ul de închidere </head>.
Deși, cea mai mică eroare vă poate defecta site-ul și îl poate face inaccesibil.
De aceea recomandăm utilizarea WPCode. După testări amănunțite, am ajuns la concluzia că este cel mai bun plugin pentru fragmente de cod WordPress și cea mai sigură modalitate de a adăuga cod pe site-ul dvs.
Pentru mai multe detalii despre plugin, puteți consulta recenzia noastră WPCode.
Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru instrucțiuni detaliate, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
Notă: Pluginul WPCode are și o versiune gratuită pe care o puteți folosi pentru acest tutorial. Cu toate acestea, actualizarea la planul plătit vă va oferi acces la funcționalități precum biblioteca de fragmente de cod, logica condițională și multe altele.
După activare, vizitați pagina Fragmente de cod » + Adăugați fragment din bara laterală de administrare WordPress.
Aici, dă clic pe butonul „Utilizează Snippet” sub opțiunea „Adaugă codul tău personalizat (Snippet nou)”.
Aceasta vă va duce la pagina „Creare fragment personalizat”, unde puteți începe prin a adăuga un nume pentru fragmentul de cod. Acest nume nu va fi afișat pe interfața vizibilă și este doar pentru identificarea dvs.
Apoi, selectați „Fragment HTML” ca tip de cod din promptul care apare.
Acum, tot ce trebuie să faceți este să copiați și să lipiți următorul fragment de cod în caseta „Previzualizare cod”:
<meta name="theme-color" content="#ff6600" />
Odată ce ați făcut acest lucru, puteți adăuga codul hexazecimal pentru culoarea aleasă de dvs. lângă linia content= din cod.
Această culoare va fi apoi utilizată pentru bara de adrese în browserul mobil.
Sfat Pro: Puteți obține valoarea HEX a unei culori folosind orice software de editare de imagini, cum ar fi Adobe Photoshop sau Gimp.
Pentru o metodă mai rapidă care nu necesită software special, puteți folosi un selector de culori online gratuit sau chiar instrumentul „Inspect” încorporat în browserul dvs. web pentru a găsi codul hexazecimal exact de pe site-ul dvs.
După aceea, derulați în jos la secțiunea „Inserare” și alegeți modul „Inserare automată”.
În acest fel, codul va fi executat automat pe site-ul dvs. web la activare.
În cele din urmă, derulați înapoi în partea de sus și comutați comutatorul 'Inactiv' la 'Activ'.
Apoi, faceți clic pe butonul „Salvare fragment” pentru a stoca setările și a executa codul.
Sfaturi bonus pentru crearea unui site WordPress optimizat pentru mobil
Schimbarea culorii barei de adrese este un început excelent, dar crearea unui site web cu adevărat prietenos pentru mobil implică mai mulți pași.
Deoarece motoarele de căutare precum Google prioritizează indexarea „mobile-first”, o experiență bună pe mobil este vitală pentru SEO-ul dvs. De fapt, dispozitivele mobile reprezintă majoritatea traficului total de internet.
Iată câteva alte sfaturi pentru a vă îmbunătăți site-ul pentru acei vizitatori:
- Utilizați o temă sau un constructor de pagini receptiv: Fundația dvs. ar trebui să fie o temă WordPress receptivă care se adaptează la diferite dimensiuni ale ecranului. Pentru un control și mai mare, dacă sunteți începător și doriți să creați layout-uri personalizate fără cod, puteți folosi un plugin precum SeedProd. Este un constructor de pagini vizual drag-and-drop, utilizat de peste 1 milion de utilizatori, permițându-vă să creați cu ușurință layout-uri personalizate, prietenoase cu dispozitivele mobile.
- Creați formulare pregătite pentru mobil: Asigurați-vă că formularele dvs. de contact, de conectare și sondajele sunt ușor de completat pe un ecran mic. Vă recomandăm un plugin precum WPForms. Este un constructor de formulare ușor de utilizat, utilizat de peste 6 milioane de site-uri web și cotat cu 4,9/5 stele. Interfața sa drag-and-drop și șabloanele optimizate fac extrem de ușoară crearea formularelor pregătite pentru mobil.
- Optimizați imaginile și media: Imaginile mari pot încetini site-ul dvs. pe conexiuni mobile. Asigurați-vă că redimensionați și comprimați imaginile pentru web înainte de a le încărca.
- Concentrați-vă pe viteza site-ului: Pe lângă imagini, puteți accelera site-ul dvs. utilizând un furnizor de găzduire WordPress rapid, activând încărcarea leneșă pentru comentarii și utilizând un plugin de caching.
Pentru a afla mai multe, consultați tutorialul nostru complet despre modalități de a crea un site WordPress prietenos cu mobilul.
De ce site-ul meu WordPress arată diferit în browsere diferite?
Este complet normal ca site-ul dvs. WordPress să arate ușor diferit în browsere precum Chrome, Firefox, Safari sau Edge. În majoritatea cazurilor, acest lucru nu înseamnă că ceva este defect.
Browserele pur și simplu afișează site-urile web în moduri ușor diferite. Iată câteva motive comune pentru care se întâmplă acest lucru:
- Browserele folosesc motoare de redare diferite: Fiecare browser procesează HTML, CSS și JavaScript diferit, ceea ce poate afecta layout-ul și stilizarea.
- Stilurile implicite ale browserului pot varia: Browserele aplică propriile stiluri implicite elementelor precum anteturi, butoane și formulare.
- Dispozitivele și sistemele de operare afectează aspectul: Dimensiunea ecranului, redarea fonturilor și setările sistemului de operare pot schimba modul în care arată site-ul dvs.
- Cache-ul poate afișa conținut mai vechi: Un browser poate afișa în continuare o versiune în cache a site-ului dvs. web, în timp ce altul afișează cele mai recente actualizări.
- Setările utilizatorului pot schimba afișajul: Nivelurile de zoom, fonturile personalizate sau setările de accesibilitate pot afecta modul în care vizitatorii văd site-ul dvs.
Pentru a reduce aceste diferențe, vă recomandăm să utilizați o temă WordPress receptivă și să testați site-ul dvs. pe mai multe browsere și dispozitive înainte de a publica modificări majore.
Sperăm că acest articol v-a ajutat să învățați cum să schimbați culoarea barei de adrese într-un browser mobil pentru a se potrivi cu site-ul dvs. WordPress. De asemenea, ați putea dori să consultați ghidul nostru pentru începători despre cum să personalizați culorile pe site-ul dvs. WordPress și selecțiile noastre de experți pentru cele mai bune plugin-uri de page builder pentru WordPress.
Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.
Julie
Îmi place aspectul tab-ului mobil care se potrivește cu antetul din partea de sus a unui site web, așa că am căutat o modalitate de a face acest lucru. Am urmat toate aceste instrucțiuni, dar nimic nu s-a schimbat când am vizualizat site-ul meu pe mobil. Aveți sugestii?
Suport WPBeginner
Telefonul dvs. folosește modul întunecat sau un alt stil care suprascrie stilul setat de tema site-ului dvs.? Acesta este cel mai frecvent motiv pentru care stilul nu se potrivește cu ceea ce ați setat prin această metodă, deoarece telefonul dvs. va avea prioritate față de ceea ce a setat site-ul dvs.
Admin
Pragati kumar sheel
E grozav. Ne-ai putea ajuta și cu schimbarea barei de navigare? Am văzut și câteva site-uri care implementează asta.
Suport WPBeginner
Ar trebui să verificați mai întâi cu suportul pentru tema dvs. specifică, deoarece fiecare temă are propriul design și setări pentru bara de navigare.
Admin
Dennis Muthomi
Îmi amintesc că am implementat asta atunci. Lucrurile s-au schimbat astăzi, interfața arată complet diferit față de atunci.
Mrteesurez
Am căutat modalități de a face acest lucru de când am descoperit-o în acest post. Sunt surprins că este doar o singură linie de cod care face magia. O voi aplica pe site-ul meu, deoarece îmi place funcționalitatea.
Jiří Vaněk
Vă mulțumesc pentru instrucțiuni. Le-am folosit pe site-ul meu și funcționează excelent. Păcat că funcționează doar pe Chrome mobil.
Suport WPBeginner
Poate în viitor va fi mai probabil pentru navigarea pe desktop.
Admin
Jiří Vaněk
Vă mulțumesc pentru instrucțiuni. Le-am folosit pe site-ul meu, iar acum browserul Chrome pe mobil îl afișează cu culorile antetului site-ului. Arată mult mai bine. Este doar păcat că, cel mai probabil, niciun alt browser în afară de Chrome mobil nu îl suportă.
Suport WPBeginner
Alți browsere mobile încep să îl adopte, deci sperăm că va începe să fie văzut mai des
Admin
Jiří Vaněk
Sperăm că mai multe browsere o vor suporta în timp, deoarece până acum am verificat această funcție doar pe Chrome mobil. Ar fi uimitor dacă toate browserele mobile ar putea face acest lucru, deoarece nu numai că face web-ul să arate mai bine, dar, deoarece nu mulți oameni o folosesc, adaugă și o notă unică. Sperăm că vom vedea acest lucru în mai multe browsere în viitor.
Mrteesurez
Exact! Adaugă o notă unică site-urilor și le face mai profesionale și mai atractive pentru vizitatori. Deși Chrome a fost primul care a adoptat-o, am observat acum că și alte browsere, precum Vivaldi, o adoptă. Mulțumesc pentru observație.
Ankit Sahu
Funcționează absolut
Mulțumesc pentru asta
Suport WPBeginner
Mă bucur că ghidul nostru a fost util!
Admin
Sarah
Se pare că acest lucru nu mai funcționează… Am implementat acest lucru pe site-ul meu în februarie și tocmai l-am aplicat altuia… verificând, cel nou nu funcționează și nici cel vechi! S-a schimbat ceva aici în aplicația mobilă Chrome?
Suport WPBeginner
Dacă folosiți modul întunecat pentru browserul dvs., Chrome va suprascrie această setare.
Admin
Naveen Rana
Unde găsesc fișierul header.php al temei sau al temei copil?
Suport WPBeginner
Veți găsi fișierele temei dvs. sub Aspect>Editor temă, folosind managerul de fișiere al furnizorului dvs. de găzduire sau folosind un instrument FTP urmând ghidul nostru de mai jos:
https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Pentru FTP sau managerul de fișiere al gazdei dvs., ar trebui să accesați wp-content>Themes și să găsiți folderul cu același nume ca tema dvs. activă.
Admin
Manshant Singh
Postare grozavă și funcționează, dar nu funcționează pe pagina de categorie și când deschid o postare.
Suport WPBeginner
Ar trebui să verificați cu suportul temei dvs. specifice dacă nu există o stilizare diferită a antetului atribuită acelor pagini.
Admin
Aditya Savita
În primul rând, mulțumesc pentru acest tutorial grozav, dar acum mă confrunt pe o problemă, culoarea barei de adrese nu apare pe pagina principală a site-ului meu. Apare perfect pe toate paginile și postările site-ului meu, cu excepția paginii principale.
Ce ar trebui să fac acum? Vă rog să mă ajuta!
Suport WPBeginner
Ați putea dori să verificați cu suportul pentru tema dvs. specifică dacă nu este setată pe șablonul paginii de pornire, care ar putea suprascrie setările dvs.
Admin
Almesh
Am reușit să o fac dintr-o singură încercare. Mulțumesc
Suport WPBeginner
Mă bucur că ghidul nostru a fost util
Admin
Craige Wilson
Durează timp pentru a se actualiza?
Suport WPBeginner
Poate și caching-ul browserului ar întârzia, de asemenea, schimbarea.
Admin
Ebrahim Talebi
Mulțumesc mult.
Dar, fiți conștienți că acest truc nu va funcționa dacă utilizatorul a activat modul întunecat pe telefonul său, deoarece acesta suprascrie totul. (Unele telefoane au o opțiune numită mod întunecat)
Suport WPBeginner
Mulțumim că ați împărtășit asta în cazul în care cineva s-a confruntat cu acea problemă
Admin
Arif
Uimitor și cel mai simplu
Suport WPBeginner
Mă bucur că ghidul nostru a fost util
Admin
kafi
Trebuia doar să spun, omule,
voi sunteți cei MAI BUNI.
Suport WPBeginner
Mulțumim, mă bucur că îți place conținutul nostru
Admin
Fred
Un alt tutorial foarte ușor de la echipa dvs.!
Aș dori să adaug o culoare gradient barei de adrese.
Este posibil?
Suport WPBeginner
Nu în acest moment cu această metodă.
Admin
Fred
Mulțumesc pentru răspunsul tău
Valli M
Mulțumesc mult :)
Suport WPBeginner
Cu plăcere
Admin
Amit Ayalon
Funcționează foarte bine! super ușor de instalat.
Mulțumesc mult!
Suport WPBeginner
Cu plăcere, mă bucur că ghidul nostru a fost util
Admin
Rafael
Funcționează perfect!
mulțumesc
Suport WPBeginner
Mă bucur că ghidul nostru a fost util
Admin
Sunil Ilanthila
Bara de adrese s-a schimbat, dar textul este negru, vreau să fie alb, cum?
Suport WPBeginner
Dacă nu aud altfel, aceasta este decisă de browserul mobil, nu de o culoare pe care o setați.
Admin
Deborah
Mulțumesc. Foarte rapid și ușor de făcut și oferă site-ului meu un aspect destul de elegant.
Suport WPBeginner
Ne bucurăm că tutorialul nostru a putut ajuta
Admin
Rohit
Cineva mă poate ajuta, va funcționa doar în Chrome și poate fi folosit și pentru asp.net?
Suport WPBeginner
Deocamdată va funcționa doar pe Chrome.
Admin
Nasim
Cum să faci asta dacă folosești Page Builder Elementor
Syaz Amirin
Este același lucru. Aceeași proces, vreau să spun, chiar și folosind Elementor.
M.Surana
Aveți un fragment pentru asta?
Philarpy
Minunat, funcționează și pentru mine. Mulțumesc.
Mark
genial, 2 minute de treabă și funcționează perfect! Mulțumesc
Phil Duffney
Mulțumesc mult, a fost de mare ajutor!
Nitish
Funcționează și pe Android Kit Kat... cred că au actualizat Chrome...
JEEiEE
Mulțumesc
dar ce zici de iphone și windows
Craig Jon Smith
Mi-a funcționat excelent pe Weebly. În loc să mă chinui cu codul, accesați setările și introduceți-l în secțiunea care spune literal cod antet. Am făcut asta pe două site-uri, acum. Încă unul de făcut
Diego
Foarte frumos… și funcționează! Dar cum facem ca textul să devină alb?
Taylor
Mulțumesc mult! Exact ce căutam și a funcționat exact așa cum ați descris configurarea!
Akash gupta
Pur și simplu adăugați acest cod în fișierul header.php al temei sau al temei copil, chiar înainte de închiderea tag-ului.
dar nu funcționează pe un site web. De ce?
ethann
se pare că funcționează pe versiunea Android 5.0 și mai sus
enack
Sfat grozav, a funcționat excelent pentru site-ul meu (așa cum funcționează mereu site-ul dvs.) anunțați-mă dacă obțineți codul și pentru iPhone, dar oricum nu mă pot plânge. Mulțumesc!
Irfan abbas
Poate funcționa această metodă pe temele de ziar 7.
Hamid Roshaan
Exact ce vreau să știu
Thomyum
Ești grozav!
zakaria
salut, mulțumesc pentru acest sfat, dar funcționează pe șabloanele blogger? dacă da, cum să-l adaug? am încercat de multe ori, dar blogger arată mereu eroare.
Saikot Hc
Super șefule! Mulțumesc...!!
Xaif
Nu a funcționat pentru mine. Aveam tema copil eleven40, dar nu funcționează
Queven
Salut! Este suportat în ce browsere?
Suport WPBeginner
Google Chrome pe dispozitive Android.
Admin
Terri
Îmi place asta! Mulțumesc pentru pont
dhiravat
Truc foarte aplicabil. Mulțumesc!
Alessio
Asta e chiar grozav! Mulțumesc!
Gerard Jimenez
O informație excelentă, tocmai mi-am schimbat site-ul.
Bobby
Un sfat bun. Să ne dăm seama cum să facem asta pentru toate browserele pe mobil.
Shu
Mulțumesc. Apreciez mult
jehangir
Foarte informativ.
Ahmad Fatah
Uau, pare simplu.. Voi încerca pe blogul meu.
Mulțumesc