Hur man enkelt ändrar färg på adressfältet på en hemsida byggd med WordPress 2018
Jag arbetar kontinuerligt med att förbättra min hemsida både för dess besökare och sökmotorerna. Igår satt jag och bläddrade igenom hemsidan på mobilen för att se hur mobilversionen fungerade med de senaste uppdateringarna. Efter att jag antecknat några mindre justeringar slog det mig att det hade sett lite extra proffsigt ut att ha adressfältet i en färg av eget val för visning på mobila enheter.
För ett tag sedan såg vi att vissa större aktörer som Facebook, CNN och Nike hade lagt till deras signaturfärg vid adressraden av mobilversionen. Det ger ett mer påkostat och seriöst intryck samtidigt som den totala upplevelsen förstärks. Först fungerade det endast för webbläsaren Chrome på android-enheter och kunde medföra mindre störningar vid inläsningen av sidan. Numera stödjer även Firefox och Opera funktionen och allt fungerar felfritt och tynger inte laddtiden. På senare tid har därav även många svenska företag och plattformar börjat använda en specialanpassad färg i adressfältet. Nedan beskriver jag hur du enkelt ändrar färg på adressfältet för din WordPress hemsida. Jag delar även koden jag skrivit för att underlätta så gott som möjligt för dig.
Att ändra adressfältets färg på en mobilanpassad hemsida i WordPress
Min prioritet var att koden skulle fungera för samtliga webbläsare och operativsystem. Tyvärr har dock inte Safari för Appleprodukter stöd för detta ännu utan man kan endast välja svart eller original. Jag tar ändå med den raden då det ryktas om att Apple kommer införa förbättringar i Safari under 2018. Vidare fokuserade jag på att den skulle vara enkel för andra att använda. Så man behöver endast skriva in HTML färgkoden en gång i koden. En HTML-färgkod är en 6 tecken lång kod som dels används för att bestämma färg på en hemsidas olika objekt. Du kan använda Adobe Photoshop och färgpipetten (I) för att hitta er färgkod likt nedan:
Det går även att välja HTML-färgkod även kallad HEX direkt via nätet på exempelvis: https://html-color-codes.info/
Färgkoden du vill använda skriver du sedan in stället för #007BFF markerat i grönt i själva koden jag skrivit nedan:
/* This code is written by West-Tech, TB Hillberg https://www.west-tech.se/
With the aim of helping others to easily create a more advanced colorized addressbar */
add_action(’wp_head’,’color_address_bar’);
function color_address_bar() {
<!– Simply change the HTML color code here set in green –>
$color =”#007BFF”;
<!– Written to forgive user if no ”#” before color –>
$color = (strpos($color,’#’) !== false ? $color : ’#’ . $color);
<!– HTML to Header –>
$color_meta = ’
<!– Chrome Firefox and Opera –>
<meta name=”theme-color” content=”’ . $color . ’”>
<!– Windows smartphones –>
<meta name=”msapplication-navbutton-color” content=”’ . $color . ’”>
<!– iOS Safari works only in black delete the next line if you do not want it –>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>’;
echo $color_meta;
}
Kopiera enkelt koden ovan och klistra sedan in den längst ned i functions.php filen på din WordPress hemsida. Kom ihåg att ändra till just den HTML-färgkod du önskar markerat i grönt ovan. Functions.php filen hittar du antingen direkt i WordPress-kontrollpanelen under Utseende – Redigerare eller via insticksprogrammet WP Editor alternativt via hemsidans FTP under wp-content/themes/.
Väljer man en mörkare färg på adressfältet så kommer URL:n och övriga symboler visas i vitt för att vara så lättläst som möjligt. Standard är annars en svart färgsättning på texten i adressfältet och den är oförändrad vid användning av ljusare färger. Testa dig därför fram och se vad du tycker blir snyggast för just din webbplats.
Sammanfattning – Så här gör du steg för steg
1. Kopiera koden
2. Byt till din HTML-färgkod
3. Klistra in hela koden i filen functions.php
4. Spara & granska
Jag hoppas att detta inlägg kan vara till hjälp för dig. Har du någon fundering så är du välkommen att skicka iväg ett mail till mig. Har ni eventuellt en WordPress-lösning idag som ni önskar fick ett lyft rent visuellt men även sett till innehåll, funktion, säkerhet och prestanda så kan ni läsa mer om mina tjänster inom webbdesign här. Jag ger er en gratis offert med fast pris utifrån era önskemål och behov. Kontakta mig för mer information.
Notis:
Skulle du vilja att det fanns en enklare kod att använda än den utökade jag skrivit ovan. Absolut, då kan du använda endast denna raden presenterad nedan och lägga in i header.php filen strax ovan den avslutande </head> ändelsen. Samma här ändrar du färgkoden markerat i grönt efter eget val. Dessvärre fungerar detta alternativ endast för Chrome-läsare på Android så var medveten om att det är en kompromiss.
<meta name=”theme-color” content=”#007BFF” />