Când construiți un site WordPress care doriți să funcționeze bine pe telefoane, probabil vă concentrați pe a vă asigura că totul se potrivește pe ecran și se încarcă rapid.
Dar există un mic detaliu pe care mulți oameni îl omit: culoarea barei de adrese a telefonului dvs. (bara aceea din partea de sus unde introduceți adresele site-urilor web). Obținerea corectă a acestui detaliu face ca site-ul dvs. să arate mai lustruit și mai bine pus la punct și poate consolida marca dvs. vizuală.
Am ajutat nenumărați proprietari de site-uri WordPress să-și îmbunătățească site-urile pentru utilizatorii mobili. Un truc pe care l-am învățat? Potrivirea culorii barei de adrese cu designul site-ului dvs. face ca totul să arate mai profesionist.
În acest ghid, vă vom arăta cea mai ușoară modalitate de a schimba culoarea barei de adrese mobile pentru a se potrivi cu aspectul site-ului dvs. WordPress
De ce să potriviți culoarea barei de adrese în browserul mobil?
În timp ce o temă WordPress responsivă face ca site-ul dvs. să fie funcțional pe mobil, potrivirea culorii barei de adrese vă duce prezentarea brandului un pas mai departe.
Creează un aspect mai rafinat și personalizat, care face ca site-ul dvs. web să se simtă mai mult ca o aplicație nativă.
Această atenție la detaliile vizuale are un impact real. De exemplu, studiile realizate de Adobe arată că 38% dintre oameni vor înceta să interacționeze cu un site web dacă designul este neatractiv.
Asigurându-vă că bara de adrese a browserului se potrivește cu schema de culori a site-ului dvs., creați o experiență de utilizare mai coerentă și profesională, ceea ce ajută la construirea încrederii cu vizitatorii dvs.
Acestea fiind spuse, să vedem cum să potrivim cu ușurință bara de adrese din browserul mobil cu tema dvs. WordPress.
Notă: Această funcție este acceptată de majoritatea browserelor mobile moderne, inclusiv Google Chrome pe Android și Safari pe iOS. Dacă un vizitator folosește un browser mai vechi, nesuportat, acesta va ignora pur și simplu această setare fără a cauza probleme pe site-ul dvs.
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 </head> de închidere.
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. web.
Pentru mai multe detalii despre plugin, puteți consulta recenzia noastră despre 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ă instalezi un plugin WordPress.
Notă: Pluginul WPCode are, de asemenea, 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ții 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ă responsivă sau un constructor de pagini: Fundația dvs. ar trebui să fie o temă WordPress responsivă care se adaptează la diferite dimensiuni de ecran. Pentru un control și mai mare, puteți utiliza un plugin precum SeedProd (un constructor vizual de pagini care vă permite să creați layout-uri personalizate, prietenoase cu mobilul, fără cod).
- Construiți formulare pregătite pentru mobil: Asigurați-vă că formularele de contact, formularele de conectare și sondajele sunt ușor de completat pe un ecran mic. Recomandăm un plugin precum WPForms (un constructor de formulare drag-and-drop), deoarece șabloanele sale sunt optimizate pentru dispozitive mobile chiar de la început.
- Optimizați imaginile și mediile: Imaginile mari pot încetini site-ul dvs. pe conexiunile 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: Dincolo de imagini, puteți accelera site-ul dvs. utilizând un furnizor de hosting 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.
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 creare pagini pentru WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poț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
Maybe in the future it will be more likely for desktop browsing.
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
Some other mobile browsers are starting to adopt it so it should hopefully start to be seen more often
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
Glad our guide was helpful
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
Thank you for sharing that in case someone ran into that issue
Admin
Arif
Uimitor și cel mai simplu
Suport WPBeginner
Glad our guide was helpful
Admin
kafi
Trebuia doar să spun, omule,
voi sunteți cei MAI BUNI.
Suport WPBeginner
Thank you, glad you like our content
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
Thanks for your reply
Valli M
Mulțumesc mult :)
Suport WPBeginner
You’re welcome
Admin
Amit Ayalon
Funcționează foarte bine! super ușor de instalat.
Mulțumesc mult!
Suport WPBeginner
You’re welcome, glad our guide could be helpful
Admin
Rafael
Funcționează perfect!
mulțumesc
Suport WPBeginner
Glad our guide was helpful
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
Glad our tutorial could help
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
brilliant, 2 minute job and works a treat! Thanks
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
Nice tip. Let’s figure out how to do that for all browsers on mobile.
Shu
Thanks. Much appreciated
jehangir
Foarte informativ.
Ahmad Fatah
Wow look simple.. i will try on my blog.
Terima Kasih