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

Cómo cambiar el color de la barra de direcciones en el navegador / explorador móvil para que coincida con su sitio de WordPress

Personalizar el color de la barra de direcciones en los navegadores móviles para que coincida con su sitio de WordPress puede mejorar la identidad visual de su marca y crear una experiencia de usuario más cohesiva.

Muchos sitios web populares, como la BBC y Facebook, utilizan los colores de su propia marca para la barra de direcciones de los navegadores móviles. Esto les ha ayudado a potenciar el engagement al fomentar las visitas recurrentes de los usuarios.

A lo largo de los años, hemos observado que muchas de nuestras marcas asociadas han personalizado el color de la barra de direcciones de sus sitios web en los dispositivos móviles. Este sutil cambio ayuda a que sus sitios destaquen entre otras pestañas abiertas en los navegadores móviles, haciéndolos más reconocibles para los usuarios.

En este artículo, le mostraremos cómo cambiar fácilmente el color de la barra de direcciones en un navegador / explorador móvil para que coincida con su sitio de WordPress.

Address bar color in mobile browser for WordPress site

¿Por qué hacer coincidir el color de la barra de direcciones en el navegador / explorador móvil?

Los temas de WordPress más populares son adaptables a dispositivos móviles. Esto hace que su sitio se vea muy bien en los dispositivos móviles. Sin embargo, sigue pareciendo un sitio web.

Al adaptar el color de la barra de direcciones a su sitio de WordPress, puede proporcionar una sensación similar a la de una aplicación nativa. Esto mejora la experiencia del usuario, lo que en última instancia aumenta las ventas y las conversiones.

Color address bars in mobile browser on Android

Un color de barra de direcciones bien elegido puede incluso hacer que su sitio web parezca más profesional y visualmente atractivo.

Dicho esto, veamos cómo hacer coincidir fácilmente la barra de direcciones del navegador / explorador del móvil con tu tema de WordPress.

Nota: Recuerda que este método solo funciona actualmente para el navegador / explorador web Google Chrome en dispositivos Android que utilicen Lollipop o versiones más recientes.

Cómo cambiar el color de la barra de direcciones en el navegador / explorador móvil para que coincida con su sitio de WordPress

Puedes cambiar fácilmente el color de la barra de direcciones en el navegador móvil añadiendo código personalizado al archivo header. php de tu tema o tema hijo justo antes de la etiqueta de cierre </head>.

Aunque el más mínimo error puede romper su sitio web y hacerlo inaccesible.

Por eso recomendamos usar WPCode. Es el mejor plugin de fragmentos de código de WordPress del mercado y la forma más segura de añadir código personalizado a su sitio web.

Primero, necesitas instalar y activar el plugin WPCode. Para obtener instrucciones detalladas, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Nota: El plugin WPCode también tiene una versión gratuita que puedes utilizar para este tutorial. Sin embargo, la actualización al plan de pago le dará acceso a funciones como la biblioteca de fragmentos de código, la lógica condicional y mucho más.

Una vez activado, visite la página Fragmentos de código ” + Añadir fragmento desde la barra lateral del administrador de WordPress.

Aquí, haga clic en el botón “Usar fragmento de código” bajo la opción “Añadir su código personalizado (nuevo fragmento de código)”.

Add

Esto te llevará a la página “Crear fragmento de código personalizado”, donde puedes empezar añadiendo un nombre para el fragmento de código. Este nombre no se mostrará en el front-end y es sólo para su identificación.

A continuación, seleccione “Fragmento de código HTML” como tipo de código en el menú desplegable de la derecha.

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

Ahora, todo lo que tiene que hacer es copiar y pegar el siguiente fragmento de código en el cuadro “Vista previa del código”:

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

Una vez hecho esto, puede añadir el código hexadecimal del color de su elección junto a la línea content= del código.

Este color se utilizará en la barra de direcciones del navegador / explorador del móvil.

Consejo: Puedes obtener el valor HEX de un color utilizando cualquier software de edición de imágenes como Adobe Photoshop, Gimp, Paint, etc.

Add Hex code

A continuación, desplácese hasta la sección “Inserción” y elija el modo “Inserción automática”.

De este modo, el código se ejecutará automáticamente en su sitio web tras la activación.

Choose the Auto Insert mode

Por último, desplázate hasta la parte superior y activa el conmutador “Inactivo”.

A continuación, haga clic en el botón “Guardar fragmento de código” para establecer los ajustes y ejecutar el código.

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

Consejos adicionales para crear un sitio WordPress compatible con dispositivos móviles

Además de cambiar el color de la barra de direcciones, también puede utilizar otros consejos para crear un sitio web adaptado a dispositivos móviles. Esto se debe a que los motores de búsqueda como Google dan prioridad a la indexación mobile-first.

Además, las búsquedas móviles reciben un 85,8% más de impresiones que sus homólogas de escritorio, lo que le ayuda a generar más clientes potenciales.

Para crear un sitio adaptado a dispositivos móviles, recomendamos utilizar un tema de WordPress adaptable o un creador de páginas como SeedProd.

Para más detalles, consulte nuestro tutorial sobre cómo crear un tema personalizado en WordPress.

Install theme

También debe utilizar un plugin como WPForms para añadir formularios a su sitio web, como formularios de contacto, registro e inicio de sesión.

Esto se debe a que WPForms viene con más de 1900 plantillas prediseñadas, protección completa contra spam y está especialmente optimizado para dispositivos móviles, lo que brinda a los visitantes móviles una experiencia de primer nivel.

WPForms page title and subtitle

Aparte de eso, debes redimensionar las imágenes grandes, utilizar un proveedor de alojamiento rápido, hacer lazy load de los comentarios, crear un menú de navegación que responda a los dispositivos móviles, y mucho más.

Para conocer otros consejos, consulte nuestro tutorial sobre cómo crear un sitio WordPress adaptado a dispositivos móviles.

Esperamos que este artículo te haya ayudado a aprender cómo cambiar el color de la barra de direcciones en un navegador móvil para que coincida con tu sitio de WordPress. También puedes consultar nuestra guía para principiantes sobre cómo personalizar los colores de tu sitio web de WordPress y nuestra selección de expertos sobre los mejores plugins de creación de páginas para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso 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.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

69 comentariosDeja una respuesta

  1. 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

  2. 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

  3. Ankit Sahu

    Absolutely working

    Thanks for this

    • WPBeginner Support

      Glad our guide was helpful!

      Administrador

  4. 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

  5. Naveen Rana

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

  6. 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

  7. 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

  8. Almesh

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

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrador

  9. Craige Wilson

    Does it takes time to update?

    • WPBeginner Support

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

      Administrador

  10. 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

  11. kafi

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

    • WPBeginner Support

      Thank you, glad you like our content :)

      Administrador

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. Nasim

    If using elementor Page Builder How To Do That

    • Syaz Amirin

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

  18. Philarpy

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

  19. Mark

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

  20. Phil Duffney

    Thank you so much, that was a huge help!

  21. Nitish

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

  22. JEEiEE

    Thank you

    but what about iphone and windows

  23. 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

  24. Diego

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

  25. Taylor

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

  26. 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?

  27. ethann

    looks like it works on android version 5.0 and above

  28. 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!

  29. Irfan abbas

    Can this method work on newspaper 7 themes.

    • Hamid Roshaan

      Exactly what I want to know

  30. 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.

  31. Saikot Hc

    Awesome boss! Thanks…!!

  32. Xaif

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

  33. Queven

    Hi! It’s supported in what browsers?

  34. Terri

    Love this! Thanks for the tip

  35. dhiravat

    Very applicable trick. Thanks!

  36. Alessio

    This is really cool! Thanks!

  37. Gerard Jimenez

    Great piece of info, just changed my site.

  38. 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

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.