Quando stai creando un sito WordPress che vuoi funzioni bene sui telefoni, probabilmente ti concentri sull'assicurarti che tutto si adatti allo schermo e si carichi velocemente.
Ma c'è un piccolo dettaglio che molte persone trascurano: il colore della barra degli indirizzi del tuo telefono (quella barra in alto dove digiti gli indirizzi dei siti web). Ottenere questo dettaglio giusto rende il tuo sito più curato e rifinito, e può rafforzare il tuo brand visivo.
Abbiamo aiutato innumerevoli proprietari di siti WordPress a migliorare i loro siti web per gli utenti mobili. Un trucco che abbiamo imparato? Abbinare il colore della barra degli indirizzi al design del tuo sito web rende tutto più professionale.
In questa guida, ti mostreremo il modo più semplice per cambiare il colore della barra degli indirizzi mobile per abbinarlo all'aspetto del tuo sito WordPress.
Perché abbinare il colore della barra degli indirizzi nel browser mobile?
Mentre un tema WordPress responsive rende il tuo sito funzionale su dispositivi mobili, l'abbinamento del colore della barra degli indirizzi porta la presentazione del tuo brand un passo avanti.
Crea un aspetto più rifinito e personalizzato che fa sembrare il tuo sito web più un'app nativa.
Questa attenzione ai dettagli visivi ha un impatto reale. Ad esempio, studi di Adobe mostrano che il 38% delle persone smetterà di interagire con un sito web se il design è poco attraente.
Assicurando che la barra degli indirizzi del browser corrisponda allo schema cromatico del tuo sito, crei un'esperienza utente più coesa e professionale, che aiuta a costruire fiducia con i tuoi visitatori.
Detto questo, vediamo come abbinare facilmente la barra degli indirizzi nel browser mobile al tuo tema WordPress.
Nota: Questa funzionalità è supportata dalla maggior parte dei browser mobili moderni, inclusi Google Chrome su Android e Safari su iOS. Se un visitatore sta utilizzando un browser più vecchio e non supportato, ignorerà semplicemente questa impostazione senza causare problemi al tuo sito.
Come Cambiare il Colore della Barra degli Indirizzi nel Browser Mobile per Corrispondere al Tuo Sito WordPress
Puoi cambiare facilmente il colore della barra degli indirizzi nel browser mobile aggiungendo codice personalizzato al tuo tema o al file header.php del tuo tema figlio, appena prima del tag di chiusura </head>.
Sebbene il più piccolo errore possa compromettere il tuo sito web e renderlo inaccessibile.
Ecco perché ti consigliamo di utilizzare WPCode. Dopo test approfonditi, abbiamo concluso che è il miglior plugin per snippet di codice WordPress e il modo più sicuro per aggiungere codice al tuo sito web.
Per maggiori dettagli sul plugin, puoi dare un'occhiata alla nostra recensione di WPCode.
Innanzitutto, devi installare e attivare il plugin WPCode. Per istruzioni dettagliate, consulta la nostra guida passo passo su come installare un plugin di WordPress.
Nota: Il plugin WPCode ha anche una versione gratuita che puoi utilizzare per questo tutorial. Tuttavia, l'aggiornamento al piano a pagamento ti darà accesso a funzionalità come la libreria di snippet di codice, la logica condizionale e altro ancora.
Dopo l'attivazione, visita la pagina Snippet di codice » + Aggiungi snippet dalla barra laterale di amministrazione di WordPress.
Qui, fai clic sul pulsante 'Usa snippet' sotto l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'.
Questo ti porterà alla pagina 'Crea snippet personalizzato', dove puoi iniziare aggiungendo un nome per lo snippet di codice. Questo nome non verrà visualizzato sul front-end ed è solo per tua identificazione.
Successivamente, seleziona 'Snippet HTML' come tipo di codice dal prompt che appare.
Ora, tutto ciò che devi fare è copiare e incollare il seguente snippet di codice nella casella 'Anteprima codice':
<meta name="theme-color" content="#ff6600" />
Una volta fatto ciò, puoi aggiungere il codice esadecimale del colore di tua scelta accanto alla riga content= nel codice.
Questo colore verrà quindi utilizzato per la barra degli indirizzi nel browser mobile.
Suggerimento Pro: Puoi ottenere il valore HEX di un colore utilizzando qualsiasi software di editing di immagini come Adobe Photoshop o Gimp.
Per un metodo più rapido che non richiede software speciali, puoi utilizzare un color picker online gratuito o persino lo strumento "Ispeziona" integrato nel tuo browser web per trovare il codice esadecimale esatto dal tuo sito.
Successivamente, scorri verso il basso fino alla sezione ‘Inserimento’ e scegli la modalità ‘Inserimento Automatico’.
In questo modo, il codice verrà eseguito automaticamente sul tuo sito web al momento dell'attivazione.
Infine, scorri di nuovo verso l'alto e imposta l'interruttore ‘Inattivo’ su ‘Attivo’.
Successivamente, fai clic sul pulsante ‘Salva snippet’ per memorizzare le impostazioni ed eseguire il codice.
Suggerimenti bonus per creare un sito WordPress ottimizzato per dispositivi mobili
Cambiare il colore della barra degli indirizzi è un ottimo inizio, ma creare un sito web veramente ottimizzato per i dispositivi mobili richiede alcuni passaggi aggiuntivi.
Poiché i motori di ricerca come Google danno priorità all'indicizzazione mobile-first, una buona esperienza mobile è fondamentale per la tua SEO. Infatti, i dispositivi mobili rappresentano la maggior parte di tutto il traffico Internet.
Ecco alcuni altri suggerimenti per migliorare il tuo sito per questi visitatori:
- Utilizza un tema o un page builder reattivo: La tua base dovrebbe essere un tema WordPress reattivo che si adatti a diverse dimensioni dello schermo. Per un controllo ancora maggiore, puoi utilizzare un plugin come SeedProd (un costruttore di pagine visivo che ti consente di creare layout personalizzati ottimizzati per dispositivi mobili senza codice).
- Crea moduli ottimizzati per dispositivi mobili: Assicurati che i tuoi moduli di contatto, moduli di accesso e sondaggi siano facili da compilare su uno schermo piccolo. Consigliamo un plugin come WPForms (un costruttore di moduli drag-and-drop) perché i suoi modelli sono ottimizzati per i dispositivi mobili fin dall'inizio.
- Ottimizza immagini e media: Immagini di grandi dimensioni possono rallentare il tuo sito su connessioni mobili. Assicurati di ridimensionare e comprimere le tue immagini per il web prima di caricarle.
- Concentrati sulla velocità del sito: Oltre alle immagini, puoi velocizzare il tuo sito utilizzando un provider di hosting WordPress veloce, abilitando il caricamento pigro per i commenti e utilizzando un plugin di caching.
Per saperne di più, consulta il nostro tutorial completo su modi per creare un sito WordPress ottimizzato per dispositivi mobili.
Speriamo che questo articolo ti abbia aiutato a capire come cambiare il colore della barra degli indirizzi in un browser mobile per abbinarlo al tuo sito WordPress. Potresti anche voler consultare la nostra guida per principianti su come personalizzare i colori sul tuo sito WordPress e le nostre scelte esperte per i migliori plugin page builder per WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Julie
Mi piace l'aspetto della scheda mobile che corrisponde all'intestazione in alto di un sito web, quindi ho cercato un modo per farlo. Ho seguito tutte queste istruzioni, ma non è cambiato nulla quando ho visualizzato il mio sito su dispositivi mobili. Suggerimenti?
Supporto WPBeginner
Il tuo telefono utilizza la modalità scura o un altro stile che sovrascrive lo stile impostato dal tema del tuo sito? Questa è la ragione più comune per cui lo stile non corrisponde a quello che hai impostato con questo metodo, poiché il tuo telefono avrà la precedenza su ciò che ha impostato il tuo sito.
Amministratore
Pragati kumar sheel
Fantastico. Potresti aiutarci a cambiare anche la barra di navigazione? Ho visto pochi siti implementare anche questo.
Supporto WPBeginner
Dovresti prima verificare con il supporto del tuo tema specifico, poiché ogni tema ha il proprio design e le proprie impostazioni per la barra di navigazione.
Amministratore
Dennis Muthomi
Ricordo di aver implementato questo all'epoca. Le cose sono cambiate oggigiorno, l'interfaccia utente ora ha un aspetto completamente diverso da allora.
Mrteesurez
Ho cercato modi per farlo da quando l'ho scoperto in questo post. Sono sorpreso che sia solo una singola riga di codice a fare la magia. Lo applicherò al mio sito perché mi piace la funzionalità.
Jiří Vaněk
Grazie per le istruzioni. Le ho usate sul mio sito web e funziona benissimo. Peccato che funzioni solo su Chrome per dispositivi mobili.
Supporto WPBeginner
Maybe in the future it will be more likely for desktop browsing.
Amministratore
Jiří Vaněk
Grazie per le istruzioni. Le ho usate sul mio sito web e ora il browser Chrome su dispositivi mobili lo visualizza con i colori dell'intestazione del sito web. Ha un aspetto molto migliore. È solo un peccato che, molto probabilmente, nessun altro browser oltre a Chrome per dispositivi mobili lo supporti.
Supporto WPBeginner
Some other mobile browsers are starting to adopt it so it should hopefully start to be seen more often
Amministratore
Jiří Vaněk
Speriamo che più browser lo supportino nel tempo, perché finora ho verificato questa funzione solo su Chrome per dispositivi mobili. Sarebbe fantastico se tutti i browser per dispositivi mobili potessero farlo perché non solo rende il web più bello, ma poiché non molte persone lo usano, aggiunge anche un tocco unico. Speriamo di vederlo in più browser in futuro.
Mrteesurez
Esatto! aggiunge un tocco unico ai siti e li rende più professionali e attraenti per i visitatori. Sebbene Chrome sia stato il primo ad adottarlo, ora ho notato che anche altri browser, come Vivaldi, lo stanno adottando. Grazie per la tua osservazione.
Ankit Sahu
Funziona assolutamente
Grazie per questo
Supporto WPBeginner
Siamo lieti che la nostra guida sia stata utile!
Amministratore
Sarah
Sembra che abbia smesso di funzionare... L'ho implementato sul mio sito web a febbraio e l'ho appena applicato a un altro... controllando il nuovo non funziona e nemmeno il vecchio! È cambiato qualcosa qui nell'app mobile di Chrome?
Supporto WPBeginner
Se stai usando la modalità scura per il tuo browser, Chrome sovrascriverà questa impostazione.
Amministratore
Naveen Rana
Dove trovare il file header.php del tema o del tema child?
Supporto WPBeginner
Troverai i file del tuo tema sotto Aspetto > Editor Tema, utilizzando il file manager del tuo provider di hosting, o utilizzando uno strumento FTP seguendo la nostra guida qui sotto:
https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Per FTP o il file manager del tuo host, dovrai andare su wp-content > Themes e trovare la cartella con lo stesso nome del tuo tema attivo.
Amministratore
Manshant Singh
Ottimo post e funziona, ma non funziona sulla pagina della categoria e quando apro un post.
Supporto WPBeginner
Dovresti verificare con il supporto del tuo tema specifico che non ci sia uno stile di intestazione diverso assegnato a quelle pagine.
Amministratore
Aditya Savita
Innanzitutto grazie per questo ottimo tutorial, ma ora sto riscontrando un problema: il colore della barra degli indirizzi non viene visualizzato sulla homepage del mio sito. Viene visualizzato perfettamente su tutte le pagine e i post del mio sito, tranne la homepage.
Cosa devo fare ora? Aiuto!
Supporto WPBeginner
Potresti voler verificare con il supporto del tuo tema specifico che non sia impostato sul modello della homepage che potrebbe sovrascrivere le tue impostazioni.
Amministratore
Almesh
Sono riuscito a farlo in un colpo solo. grazie
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Craige Wilson
Ci vuole tempo per aggiornare?
Supporto WPBeginner
Può succedere e la cache del browser ritarderebbe anche il cambiamento.
Amministratore
Ebrahim Talebi
Grazie mille.
Ma, tieni presente che questo trucco non funzionerà se l'utente ha abilitato la modalità scura sul suo telefono perché sovrascrive tutto il resto. (Alcuni telefoni hanno un'opzione chiamata modalità scura)
Supporto WPBeginner
Thank you for sharing that in case someone ran into that issue
Amministratore
Arif
Sbalorditivo e semplicissimo
Supporto WPBeginner
Glad our guide was helpful
Amministratore
kafi
Dovevo solo dire, amico,
voi ragazzi siete il MIGLIORE.
Supporto WPBeginner
Thank you, glad you like our content
Amministratore
Fred
Un altro tutorial molto facile dal tuo team!
Vorrei aggiungere un colore sfumato alla barra degli indirizzi.
È possibile?
Supporto WPBeginner
Al momento non con questo metodo.
Amministratore
Fred
Thanks for your reply
Valli M
Grazie mille :)
Supporto WPBeginner
You’re welcome
Amministratore
Amit Ayalon
Funziona benissimo! super facile da configurare.
Grazie mille!
Supporto WPBeginner
You’re welcome, glad our guide could be helpful
Amministratore
Rafael
Funziona perfettamente!
grazie
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Sunil Ilanthila
Il colore della barra degli indirizzi è cambiato ma il testo è nero, lo voglio bianco, come?
Supporto WPBeginner
A meno che non senta diversamente, questo è deciso dal browser mobile, non da un colore che imposti tu.
Amministratore
Deborah
Grazie. Molto veloce e facile da fare, e dà al mio sito web un aspetto piuttosto elegante.
Supporto WPBeginner
Glad our tutorial could help
Amministratore
Rohit
Qualcuno può aiutarmi? Funzionerà solo su Chrome e si può usare anche per asp.net?
Supporto WPBeginner
Per il momento funzionerà solo su Chrome.
Amministratore
Nasim
Se si usa Elementor Page Builder, come si fa?
Syaz Amirin
È lo stesso. Intendo lo stesso processo, anche usando Elementor.
M.Surana
C'è uno snippet per questo?
Philarpy
Meraviglioso, funziona anche per me. Grazie.
Mark
brilliant, 2 minute job and works a treat! Thanks
Phil Duffney
Grazie mille, è stato di grande aiuto!
Nitish
Funziona anche su Android Kit Kat... penso che abbiano aggiornato Chrome...
JEEiEE
Grazie
ma per iPhone e Windows?
Craig Jon Smith
Ha funzionato benissimo per me su Weebly. Invece di pasticciare con il codice, vai su impostazioni e inseriscilo nella sezione che dice letteralmente "codice header". L'ho fatto su due siti, ne manca uno.
Diego
Molto bello... e funziona! Ma come facciamo a far diventare il testo bianco?
Taylor
Grazie mille! Esattamente quello che cercavo e ha funzionato proprio come hai descritto la sua configurazione!
Akash gupta
Aggiungi semplicemente questo codice nel file header.php del tuo tema o tema figlio, appena prima della chiusura del tag .
ma non funziona su un sito web. perché?
ethann
sembra che funzioni su Android versione 5.0 e successive
enack
Ottimo consiglio, ha funzionato benissimo per il mio sito (come sempre fa il tuo sito) fammi sapere se ottieni il codice anche per iPhone, ma in ogni caso non posso lamentarmi. Grazie!
Irfan abbas
Questo metodo può funzionare sui temi Newspaper 7?
Hamid Roshaan
Esattamente quello che voglio sapere
Thomyum
Sei un grande!
zakaria
Ciao, grazie per questo consiglio, ma funziona sui modelli di Blogger? se sì, come aggiungerlo? ho provato molte volte ma Blogger mostra sempre un errore.
Saikot Hc
Fantastico capo! Grazie...!!
Xaif
Non ha funzionato per me. Avevo il tema figlio eleven40 ma non funziona
Queven
Ciao! È supportato in quali browser?
Supporto WPBeginner
Google Chrome sui dispositivi Android.
Amministratore
Terri
Adoro! Grazie per il consiglio
dhiravat
Trucco molto applicabile. Grazie!
Alessio
Questo è davvero fantastico! Grazie!
Gerard Jimenez
Ottima informazione, ho appena cambiato il mio sito.
Bobby
Nice tip. Let’s figure out how to do that for all browsers on mobile.
Shu
Thanks. Much appreciated
jehangir
Molto informativo.
Ahmad Fatah
Wow look simple.. i will try on my blog.
Terima Kasih