Instalar WordPress

Guía de Instalación

Optimizar WordPress

Optimización y Velocidad

Seguridad de WordPress

Guía de Protección

Cambiar color de barra de dirección en navegador del móvil en sitio WordPress

Cómo Cambiar Color de Barra de Dirección de Navegador de Móvil en WordPress

Hoy en día, los sitios web son cada vez más “personalizables”, cuando se trata de diseño y presentación. Sin duda alguna vez has accedido a un sitio web a partir del navegador del móvil, y te llama la atención la coherencia que existe entre el color principal dominante, y el color de la barra de dirección. Eso es lo que veremos hoy, cómo cambiar el color de barra de dirección del navegador del móvil, de una manera extremadamente sencilla, y que le da un toque profesional a tu sitio web.

Color de Barra de Dirección en WordPress

Es muy importante que el tema que estés usando en tu sitio web sea compatible con los dispositivos móviles, y la mayoría de las resoluciones actuales, para garantizar una experiencia de usuario impecable, que captaría a los usuarios.

Sin embargo, el diseño y la adaptabilidad no es lo único que puedes ofrecer a tus usuarios finales. HTML ofrece una característica estupenda, que te permite personalizar el color de barra de dirección de los navegadores en el móvil.

La impresión que dejan la concordancia de colores entre la barra de dirección en navegador móvil y tu sitio web es impresionante, y le da una apariencia de como si de una aplicación se tratara.

Esta impresión genera más confianza de los usuarios en tu sitio web, y da una sensación de seriedad y profesionalidad, esto mejora la experiencia de usuario, lo cual desembocaría en más conversión y fidelización.

La verdad es que no necesitas de mucho conocimiento técnico para implantar esta peculiaridad, aunque nunca hayas trabajado con código, pero terminas consiguiendo resultados buenos para tu sitio web.

Cambiar Color de Barra de Dirección en Móvil

Ahora bien, pasemos a la implementación de esta técnica. Primero que todo, siempre recomiendo crear una copia de respaldo Backup de los archivos del sitio web antes de realizar cambios, para preservar la integridad de tu WordPress.

Utiliza un programa FTP para acceder a los archivos de tu instalación de WordPress, para descargar un el archivo header.php de tu tema actual, o del child theme (tema hijo) del mismo.

Después abres el archivo en el editor de código de tu preferencia. Si es la primera vez que vas a editar un archivo, te sugerimos ver cómo modificar archivos en WordPress, para que lo hagas de la forma más segura y correcta.

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

Copias y pegas el siguiente código en la parte superior del archivo header.php, más precisamente justo antes del cierre de la etiqueta </head> para que el color de barra de dirección del navegador móvil concuerde con el color del sitio web.

Si te fijas bien en el código, en el valor del atributo content insertamos el color en código HEX, que es el más usado en la web y se interpreta fácilmente por los navegadores.

Si no sabes cuál es el valor del color de tu sitio web, utiliza algún programa como Photoshop para seleccionar el color y generarlo su valor en HEX de forma automática.

Seleccionar Color HEX en Photoshop

Al terminar, guardas el archivo y vuelves a subirlo justo de donde lo descargaste. Ahora accede a tu sitio web desde el navegador de tu móvil o tablet, para ver el resultado final, si no aparece, sólo borra el caché de tu navegador y tu sitio web, y vuelve a refrescar la página, seguro que funcionará.

Esto es todo, te invitamos a seguir nuestra página en Facebook, Twitter y Google+ para obtener las novedades sobre seguridad y optimización de WordPress.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Si continúas utilizando este sitio significa que aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar