Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como alterar a cor da barra de endereços no navegador móvel para corresponder ao seu site WordPress

A personalização da cor da barra de endereços em navegadores móveis para corresponder ao seu site WordPress pode melhorar a identidade visual da sua marca e criar uma experiência de usuário mais coesa.

Muitos sites populares, como a BBC e o Facebook, usam as cores de suas próprias marcas na barra de endereços dos navegadores móveis. Isso os ajudou a aumentar o envolvimento, incentivando o retorno dos usuários.

Ao longo dos anos, observamos que muitas de nossas marcas parceiras personalizaram a cor da barra de endereços de seus sites em dispositivos móveis. Essa mudança sutil ajuda seus sites a se destacarem entre outras guias abertas em navegadores móveis, tornando-os mais reconhecíveis para os usuários.

Neste artigo, mostraremos como alterar facilmente a cor da barra de endereço em um navegador móvel para que corresponda ao seu site WordPress.

Address bar color in mobile browser for WordPress site

Por que combinar a cor da barra de endereço no navegador móvel?

Os temas mais populares do WordPress são responsivos para dispositivos móveis. Isso faz com que seu site tenha uma ótima aparência em dispositivos móveis. No entanto, ele ainda tem a aparência de um site.

Ao combinar a cor da barra de endereços com o seu site WordPress, você pode proporcionar uma sensação de aplicativo nativo. Isso melhora a experiência do usuário, o que, em última análise, aumenta as vendas e as conversões.

Color address bars in mobile browser on Android

Uma cor de barra de endereço bem escolhida pode até mesmo fazer com que seu site pareça mais profissional e visualmente atraente.

Dito isso, vamos ver como combinar facilmente a barra de endereço no navegador do celular com seu tema do WordPress.

Observação: lembre-se de que esse método atualmente só funciona para o navegador da Web Google Chrome em dispositivos Android que usam o Lollipop ou versões mais recentes.

Como alterar a cor da barra de endereços no navegador móvel para corresponder ao seu site WordPress

Você pode alterar facilmente a cor da barra de endereço no navegador móvel adicionando um código personalizado ao arquivo header.php do seu tema ou tema filho, logo antes da tag de fechamento </head>.

No entanto, o menor erro pode danificar seu site e torná-lo inacessível.

É por isso que recomendamos o uso do WPCode. Ele é o melhor plug-in de snippets de código para WordPress do mercado e a maneira mais segura de adicionar código personalizado ao seu site.

Primeiro, você precisa instalar e ativar o plug-in WPCode. Para obter instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Observação: o plug-in WPCode também tem uma versão gratuita que você pode usar para este tutorial. No entanto, o upgrade para o plano pago lhe dará acesso a recursos como biblioteca de trechos de código, lógica condicional e muito mais.

Após a ativação, visite a página Code Snippets ” + Add Snippet na barra lateral do administrador do WordPress.

Aqui, clique no botão “Use Snippet” na opção “Add Your Custom Code (New Snippet)”.

Add

Isso o levará à página “Create Custom Snippet” (Criar snippet personalizado), onde você pode começar adicionando um nome para o snippet de código. Esse nome não será exibido no front-end e serve apenas para sua identificação.

Em seguida, selecione “HTML Snippet” como o tipo de código no menu suspenso à direita.

Choose HTML Snippet option to change the address bar color in mobile browsers

Agora, tudo o que você precisa fazer é copiar e colar o seguinte trecho de código na caixa “Code Preview” (Visualização de código):

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

Depois de fazer isso, você pode adicionar o código hexadecimal da cor de sua escolha ao lado da linha content= no código.

Essa cor será usada em sua barra de endereços no navegador móvel.

Dica: você pode obter o valor HEX de uma cor usando qualquer software de edição de imagens, como Adobe Photoshop, Gimp, Paint etc.

Add Hex code

Depois disso, role para baixo até a seção “Insertion” (Inserção) e escolha o modo “Auto Insert” (Inserção automática).

Dessa forma, o código será executado automaticamente em seu site após a ativação.

Choose the Auto Insert mode

Por fim, role de volta para a parte superior e alterne a chave “Inactive” (Inativo) para “Active” (Ativo).

Em seguida, clique no botão “Save Snippet” para armazenar suas configurações e executar o código.

Save the code snippet for changing the address bar color in the mobile browser

Dicas de bônus para criar um site WordPress compatível com dispositivos móveis

Além de alterar a cor da barra de endereço, você também pode usar outras dicas para criar um site compatível com dispositivos móveis. Isso ocorre porque os mecanismos de pesquisa, como o Google, priorizam a indexação mobile-first.

Além disso, as pesquisas em dispositivos móveis recebem 85,8% mais impressões do que as pesquisas em computadores, o que ajuda a gerar mais leads.

Para criar um site compatível com dispositivos móveis, recomendamos usar um tema responsivo do WordPress ou um construtor de páginas como o SeedProd.

Para obter detalhes, consulte nosso tutorial sobre como criar um tema personalizado no WordPress.

Install theme

Você também deve usar um plug-in como o WPForms para adicionar formulários ao seu site, como formulários de contato, registro e login.

Isso ocorre porque o WPForms vem com mais de 1900 modelos predefinidos, proteção completa contra spam e é especialmente otimizado para dispositivos móveis, proporcionando aos visitantes móveis uma experiência de alto nível.

WPForms page title and subtitle

Além disso, você deve redimensionar imagens grandes, usar um provedor de hospedagem rápido, carregar comentários com lazy load, criar um menu de navegação responsivo a dispositivos móveis e muito mais.

Para saber outras dicas, consulte nosso tutorial sobre maneiras de criar um site WordPress compatível com dispositivos móveis.

Esperamos que este artigo tenha ajudado você a aprender como alterar a cor da barra de endereço em um navegador móvel para que ela corresponda ao seu site WordPress. Talvez você também queira ver nosso guia para iniciantes sobre como personalizar cores em seu site WordPress e nossas escolhas de especialistas para os melhores plug-ins de construtor de páginas para WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

70 ComentáriosDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    Thank you for the instructions. I used them on my website and it works great. Too bad it only works on mobile Chrome.

    • WPBeginner Support

      Maybe in the future it will be more likely for desktop browsing. :)

      Administrador

  3. Jiří Vaněk

    Thank you for the instructions. I used them on my website, and now the Chrome browser on mobile displays it with the colors of the website’s header. It looks much better. It’s just a pity that, most likely, no other browser besides mobile Chrome supports it.

    • WPBeginner Support

      Some other mobile browsers are starting to adopt it so it should hopefully start to be seen more often :)

      Administrador

  4. Ankit Sahu

    Absolutely working

    Thanks for this

    • WPBeginner Support

      Glad our guide was helpful!

      Administrador

  5. Sarah

    This seems to have stopped working… I implemented this on my website back in Feb and I just applied it to another one… upon checking the new one doesn’t work and neither does the old! Did something change here in Chrome mobile app?

    • WPBeginner Support

      If you’re using dark mode for your browser, chrome will override this setting.

      Administrador

  6. Naveen Rana

    Where to find theme or child theme‘s header.php file?

  7. Manshant Singh

    Great post and it is working but not working on category page and when I open a post.

    • WPBeginner Support

      You would want to check with the support for your specific theme that thee is not a different header styling being assigned to those pages.

      Administrador

  8. Aditya Savita

    First of all thank you for this great tutorial but now I’m facing a problem the address bar color is not showing on the homepage of my site. It’s perfectly showing on all pages and posts of my site except my homepage.
    What should I do now? Please help!

    • WPBeginner Support

      You may want to check with the support for your specific theme that it is not set on the homepage template that could be overriding your settings.

      Administrador

  9. Almesh

    I was able to get it done by one shot. thank you

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrador

  10. Craige Wilson

    Does it takes time to update?

    • WPBeginner Support

      It can and browser caching would also delay the change as well.

      Administrador

  11. Ebrahim Talebi

    Thanks a lot.
    But, be aware that this trick won’t work if the user has enabled dark mode on its phone because it overrides everything else. (Some phones has an option called dark mode)

    • WPBeginner Support

      Thank you for sharing that in case someone ran into that issue :)

      Administrador

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrador

  12. kafi

    I just needed to say man,
    you guys are the BEST.

    • WPBeginner Support

      Thank you, glad you like our content :)

      Administrador

  13. Fred

    Another very easy tutorial from your team!

    I would like to add a gradient color to the address bar.

    Is it possible?

    • WPBeginner Support

      Not at the moment with this method.

      Administrador

    • WPBeginner Support

      You’re welcome :)

      Administrador

  14. Amit Ayalon

    Work very well! super easy to set up.
    Thank you very much!

    • WPBeginner Support

      You’re welcome, glad our guide could be helpful :)

      Administrador

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrador

  15. Sunil Ilanthila

    Address bar color changed but text is in black, I wan it in Waite, how?

    • WPBeginner Support

      Unless I hear otherwise, that is decided by the mobile browser, not a color you set.

      Administrador

  16. Deborah

    Thank you. Very quick and easy to do, and gives my website a rather posh look.

    • WPBeginner Support

      Glad our tutorial could help :)

      Administrador

  17. Rohit

    Anyonebhelp me will it only work in Chrome and can it be used for asp.net also ?

    • WPBeginner Support

      For the moment it will only work on chrome.

      Administrador

  18. Nasim

    If using elementor Page Builder How To Do That

    • Syaz Amirin

      It’s the same. The same process I meant, even using Elementor.

  19. Philarpy

    Wonderful, it’s working for me as well. Thanks.

  20. Mark

    brilliant, 2 minute job and works a treat! Thanks ;)

  21. Phil Duffney

    Thank you so much, that was a huge help!

  22. Nitish

    It is working in android kit kat too…I think they updated chrome…

  23. JEEiEE

    Thank you

    but what about iphone and windows

  24. Craig Jon Smith

    Worked great for me on Weebly. Instead of messing with the code just go to settings, and drop it in the section that literally says header code. I’ve done it to two sites, now. One more to go

  25. Diego

    Very nice… and it works! But how do we get the text to to change to white?

  26. Taylor

    Thanks so much! Just what I was looking and worked just the way you described its setup!

  27. Akash gupta

    Simply add this code in your theme or child theme‘s header.php file just before the closing tag.

    but it is not work in one website . why?

  28. ethann

    looks like it works on android version 5.0 and above

  29. enack

    Great tip, worked great for my site (as your site always does) do let me know if you get the code for iphones also but either way can’t complain. Thanks!

  30. Irfan abbas

    Can this method work on newspaper 7 themes.

    • Hamid Roshaan

      Exactly what I want to know

  31. zakaria

    hello, thanks for this tip but is that working on blogger s templates? if yes how to add it? i ve tried many times but blogger always showing error.

  32. Saikot Hc

    Awesome boss! Thanks…!!

  33. Xaif

    It didn’t work for me. I was having eleven40 child theme but it is not working

  34. Queven

    Hi! It’s supported in what browsers?

  35. Terri

    Love this! Thanks for the tip

  36. dhiravat

    Very applicable trick. Thanks!

  37. Alessio

    This is really cool! Thanks!

  38. Gerard Jimenez

    Great piece of info, just changed my site.

  39. Bobby

    Nice tip. Let’s figure out how to do that for all browsers on mobile. :-)

    • Ahmad Fatah

      Wow look simple.. i will try on my blog.
      Terima Kasih :D

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.