Personalizzare il colore della barra degli indirizzi di Chrome per Android con WordPress

Come personalizzare il colore della barra degli indirizzi del browser con WordPress

Hai mai pensato di dare un tocco di classe in più al tuo sito web? Un qualcosa che permetta ai tuoi visitatori da smartphone di avere una navigazione più “personalizzata” mentre sfogliano le pagine del tuo sito web?

In questo articolo andremo a vedere fare per personalizzare il colore delle barra degli indirizzi del browser Google Chrome per Android quando si trovano all’interno del tuo sito web.

I backup sono essenziali per ogni sito web. Non farti trovare impreparato nel momento del bisogno, usa UpdraftPlus per i backup del tuo sito web!

Si tratta di una personalizzazione molto carina, che andrà a colorare la barra degli indirizzi del browser dell’utente con un colore scelto da noi, magari con un colore che riprende la colorazione del sito stesso, in modo da integrare barra di navigazione col sito web e uniformarlo.

Colorare la barra degli indirizzi del browser

Come spiegato precedentemente, colorare la barra degli indirizzi del browser, renderà la navigazione all’interno del proprio sito web più gratificante a livello visivo rimuovendo il distacco che c’è tra la barra e l’inizio del sito web, facendo sembrare il tutto un’unica struttura.

Ecco un esempio di come appare WPSpecial.com senza la barra degli indirizzi colorata e invece con la barra colorata:

Esempio di WPSpecial.com senza e con la barra degli indirizzi colorata
Esempio di WPSpecial.com senza e con la barra degli indirizzi colorata

Come si può vedere, l’effetto estetico è davvero notevole, e tutto ciò può essere fatto con una sola riga di codice 🙂

Come colorare la barra degli indirizzi del browser su WordPress

Il codice che dobbiamo inserire per colorare la barra degli indirizzi del browser è:

<meta name="theme-color" content="#202641" />	

In questo codice di esempio abbiamo voluto colorare la barra degli indirizzi del colore #202641 ma ovviamente il codice può essere cambiato con quello che più si addice al nostro sito web.

Se hai già il tuo codice colore a portata di mano, basterà sostituirlo con il tuo all’interno del codice in alto, se invece non hai il codice del colore puoi affidarti a questo servizio online per il color picker che ti permette di copiare il codice esadecimale del colore che hai scelto.

Bene, adesso che il codice è pronto e abbiamo scelto il nostro colore, non dobbiamo fare altro che inserirlo su WordPress.

Per fare ciò, basterà aggiungere una riga di codice all’interno del proprio sito WordPress e, come spiegato in molti precedenti tutorial, per fare ciò è sempre consigliato utilizzare un child theme o al limite un plugin che permetta di inserire codice PHP su WordPress, questo per evitare di modificare il template del sito web con tutti i rischi e problemi che potrebbe comportare.

Quindi, accedi al tuo sito web via FTP, modifica il file “functions.php” del tuo child theme e inserisci questo codice PHP al suo interno:

function wpspecial_colore_barra_indirizzi_browser(){
	?>
	<meta name="theme-color" content="#202641" />
	<?php
}
add_action('wp_head', 'wpspecial_colore_barra_indirizzi_browser');

Questa funzione PHP non farà altro che inserire il codice per colorare la barra degli indirizzi del browser all’interno del tag <head> del nostro sito WordPress.

A questo punto non ti resta che salvare le modifiche.

Limitazioni e browser compatibili

Nonostante si tratti di una personalizzazione molto carina, colorare la barra degli indirizzi del browser ha delle forti limitazioni riguardanti i browser e i dispositivi compatibili.

Attualmente, almeno nel momento in cui stiamo scrivendo questo articolo, questa personalizzazione è attuabile solo sul browser Google Chrome per Android e sul browser Samsung Internet (sempre per Android).

Compatibilità del tag name: theme-color con i vari browser
Compatibilità del tag name: theme-color con i vari browser

Quindi colorare la barra degli indirizzi del browser non funzionerà sui browser desktop e neanche sui browser per iPhone o di altri sistemi operativi per smartphone.
Nel caso volessi controllare la compatibilità di questo meta tag nel tempo e nel futuro, puoi dare un occhiata al sito Can I use.

Conclusioni

Abbiamo visto come fare per personalizzare la barra degli indirizzi del browser con WordPress, abbiamo anche visto come fare per ottenere il codice per il colore nel caso non lo avessimo, e abbiamo anche visto quali sono i browser compatibili con questa personalizzazione.

E tu? Hai già applicato questa personalizzazione al tuo sito WordPress? Faccelo sapere nei commenti 😉

Sei in cerca di una live chat per il tuo sito web? Chatra è uno dei migliori programmi di live chat in circolazione, dai un'occhiata.

Piaciuto l'articolo? Condividilo sui social!

Hey, aspetta!!!

Riceverai news e promozioni da parte di WP Special sul mondo WordPress. Niente spam, solo un paio di email al mese.

x