Quando stai creando un sito WordPress che funzioni bene sui telefoni, probabilmente ti concentri sull'assicurarti che tutto si adatti allo schermo e si carichi velocemente.
Ma c'è un altro piccolo dettaglio che può migliorare l'esperienza mobile del tuo sito: cambiare il colore della barra degli indirizzi in un browser mobile per abbinarlo al tuo sito WordPress.
Questo rende il tuo sito web più curato, professionale e coerente con il tuo brand.
Abbiamo aiutato molti proprietari di siti WordPress a migliorare il loro design mobile, e questa è una di quelle semplici modifiche che possono fare una differenza notevole.
In questa guida, ti mostreremo il modo più semplice per cambiare il colore della barra degli indirizzi in un browser mobile per abbinarlo al design del tuo sito WordPress.
💡 TL;DR: Puoi cambiare il colore della barra degli indirizzi del browser mobile in WordPress utilizzando il plugin WPCode. Crea semplicemente uno snippet HTML nuovo, aggiungi il meta tag theme-color con il tuo colore esadecimale preferito, impostalo per l'inserimento automatico e attiva lo snippet per applicare le modifiche al tuo sito.
Perché cambiare il colore della barra degli indirizzi in un browser mobile?
Cambiare il colore della barra degli indirizzi in un browser mobile aiuta il tuo sito WordPress ad apparire più curato e visivamente coerente.
Crea un'esperienza mobile più fluida abbinando l'interfaccia del browser al branding e al design del tuo sito web.
Ecco alcuni dei maggiori vantaggi:
- Crea coerenza visiva: Abbinare il colore della barra degli indirizzi al design del tuo sito conferisce al tuo sito web un aspetto più pulito e unificato.
- Migliora l'esperienza mobile: Aiuta il tuo sito web a sembrare più curato e simile a un'app sui dispositivi mobili.
- Rafforza il tuo branding: Utilizzare i colori del tuo brand nell'interfaccia del browser rende il tuo sito web più professionale e riconoscibile.
- Rende il tuo sito più moderno: Un colore personalizzato del browser mobile può far risaltare il tuo sito web rispetto alle pagine mobili generiche.
Sebbene si tratti di una piccola modifica di design, può far sentire il tuo sito WordPress molto più raffinato per i visitatori da mobile.
Supporto del browser per i colori della barra degli indirizzi mobile
Prima di cambiare il colore della barra degli indirizzi del browser mobile, è importante sapere che il supporto può variare a seconda del browser e del dispositivo utilizzato.
Ecco una rapida panoramica di come i browser mobili più diffusi gestiscono il meta tag theme-color:
| Browser/Piattaforma | Stato del supporto | Note |
|---|---|---|
| Google Chrome (Android) | Supporto completo | Cambia il colore della barra degli indirizzi per un look coerente. |
| Safari (iOS) | Nessun supporto diretto per il colore della barra degli indirizzi | Gestisce theme-color per i manifest PWA e gli elementi dell'interfaccia utente del browser, ma non per la barra degli indirizzi generale. |
| Firefox (Android) | Parziale/Varia | Il supporto può variare in base alla versione specifica e alle impostazioni del tema del browser. |
| Browser più vecchi/non supportati | Nessun supporto | Ignora con grazia l'impostazione senza causare problemi sul tuo sito. |
Per cambiare il colore della barra degli indirizzi, i browser mobili utilizzano un piccolo pezzo di HTML chiamato meta tag theme-color. Questo indica ai browser supportati quale colore utilizzare per gli elementi dell'interfaccia utente come la barra degli indirizzi.
Puoi aggiungere questo codice al tuo sito WordPress inserendo il meta tag all'interno della sezione <head> del tuo tema.
Detto questo, vediamo come abbinare facilmente la barra degli indirizzi nel browser mobile al tuo tema WordPress.
Come Cambiare il Colore della Barra degli Indirizzi nel Browser Mobile per Corrispondere al Tuo Sito WordPress
Puoi facilmente cambiare il colore della barra degli indirizzi nel browser mobile aggiungendo codice personalizzato al tuo tema o al file header.php del tema child, 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 usare 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 WordPress.
Nota: Il plugin WPCode ha anche una versione gratuita che puoi usare 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 usando qualsiasi software di fotoritocco 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 responsive: La tua base dovrebbe essere un tema WordPress responsive che si adatta a diverse dimensioni dello schermo. Per un controllo ancora maggiore, se sei un principiante che desidera creare layout personalizzati senza codice, puoi utilizzare un plugin come SeedProd. È un page builder visuale drag-and-drop utilizzato da oltre 1 milione di utenti, che ti consente di creare facilmente layout personalizzati adatti ai dispositivi mobili.
- Crea moduli pronti per dispositivi mobili: Assicurati che i tuoi moduli di contatto, moduli di accesso e sondaggi siano facili da compilare su uno schermo piccolo. Raccomandiamo un plugin come WPForms. È un costruttore di moduli facile da usare, utilizzato da oltre 6 milioni di siti web e valutato 4,9/5 stelle. La sua interfaccia drag-and-drop e i modelli ottimizzati rendono super facile la creazione di moduli pronti per dispositivi mobili.
- 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 lazy 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.
Perché il mio sito WordPress appare diverso su browser diversi?
È del tutto normale che il tuo sito WordPress appaia leggermente diverso su browser come Chrome, Firefox, Safari o Edge. Nella maggior parte dei casi, ciò non significa che qualcosa non funzioni.
Browser diversi visualizzano semplicemente i siti web in modi leggermente diversi. Ecco alcuni motivi comuni per cui ciò accade:
- I browser utilizzano motori di rendering diversi: Ogni browser elabora HTML, CSS e JavaScript in modo diverso, il che può influire sul layout e sullo stile.
- Gli stili predefiniti del browser possono variare: I browser applicano il proprio stile predefinito a elementi come intestazioni, pulsanti e moduli.
- Dispositivi e sistemi operativi influiscono sull'aspetto: Le dimensioni dello schermo, il rendering dei caratteri e le impostazioni del sistema operativo possono modificare l'aspetto del tuo sito.
- La cache potrebbe mostrare contenuti più vecchi: Un browser potrebbe mostrare ancora una versione memorizzata nella cache del tuo sito web, mentre un altro mostra gli ultimi aggiornamenti.
- Le impostazioni dell'utente possono modificare la visualizzazione: Livelli di zoom, caratteri personalizzati o impostazioni di accessibilità possono influire su come i visitatori vedono il tuo sito.
Per ridurre queste differenze, ti consigliamo di utilizzare un tema WordPress responsive e di testare il tuo sito su più browser e dispositivi prima di pubblicare modifiche importanti.
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 per page builder per WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche 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
Forse in futuro sarà più probabile per la navigazione desktop.
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
Altri browser mobili stanno iniziando ad adottarlo, quindi si spera che inizi a essere visto più spesso
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://014.leahstevensyj.workers.dev/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
Siamo lieti che la nostra guida sia stata utile
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
Grazie per aver condiviso questo nel caso qualcuno si sia imbattuto in quel problema
Amministratore
Arif
Sbalorditivo e semplicissimo
Supporto WPBeginner
Siamo lieti che la nostra guida sia stata utile
Amministratore
kafi
Dovevo solo dire, amico,
voi ragazzi siete il MIGLIORE.
Supporto WPBeginner
Grazie, siamo lieti che ti piacciano i nostri contenuti
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
Grazie per la tua risposta
Valli M
Grazie mille :)
Supporto WPBeginner
Prego
Amministratore
Amit Ayalon
Funziona benissimo! super facile da configurare.
Grazie mille!
Supporto WPBeginner
Prego, siamo lieti che la nostra guida sia stata utile
Amministratore
Rafael
Funziona perfettamente!
grazie
Supporto WPBeginner
Siamo lieti che la nostra guida sia stata utile
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
Siamo lieti che il nostro tutorial abbia potuto aiutare
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
brillante, lavoro di 2 minuti e funziona alla grande! Grazie
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
Bel consiglio. Vediamo come fare per tutti i browser su dispositivi mobili.
Shu
Grazie. Molto apprezzato
jehangir
Molto informativo.
Ahmad Fatah
Wow, sembra semplice.. lo proverò sul mio blog.
Terima Kasih