Cómo añadir un teléfono y un correo electrónico al menú de WordPress
Hola.
Cuando diseñamos una web corporativa, una de las necesidades más habituales es mostrar de forma rápida los principales datos de contacto de la empresa: teléfono, correo electrónico, WhatsApp, dirección, etc.
Muchos temas de WordPress incorporan estas opciones directamente en sus menús o cabeceras. Sin embargo, no todos los temas ofrecen esta posibilidad y, en ocasiones, necesitamos añadir estos elementos manualmente.
La buena noticia es que no necesitamos modificar código PHP ni tocar la plantilla del tema. Podemos hacerlo directamente desde el sistema de menús de WordPress utilizando los denominados enlaces personalizados.
En este tutorial vamos a añadir al menú principal:
- Un enlace para enviar un correo electrónico.
- Un enlace para realizar una llamada telefónica.
- Opcionalmente, un icono en lugar del texto.
La técnica es muy sencilla y funciona prácticamente con cualquier tema que utilice el sistema de menús de WordPress.
¿Qué vamos a conseguir?
El resultado final será un menú de navegación que, además de las páginas habituales de nuestra web, pueda contener elementos como:
- ✉️ Correo electrónico
- 📞 Teléfono
Al pulsar sobre el correo, el dispositivo abrirá la aplicación de correo electrónico configurada.
Al pulsar sobre el teléfono desde un smartphone, el sistema ofrecerá la posibilidad de realizar una llamada.
1. Acceder a los menús de WordPress
Lo primero que tenemos que hacer es acceder al panel de administración de nuestro WordPress.
Dependiendo de la versión de WordPress, del tema y de la configuración del sitio, podemos encontrar esta sección en:
Apariencia → Menús
En algunas instalaciones modernas basadas en el Editor del sitio, la gestión de la navegación puede encontrarse en:
Apariencia → Editor → Navegación
En este artículo utilizaremos el sistema clásico de menús.
Una vez dentro del administrador de menús, seleccionaremos el menú que queremos modificar. Normalmente será el menú principal que utiliza nuestra cabecera.
2. Añadir un correo electrónico al menú
Ahora vamos a crear un enlace que permita al visitante ponerse en contacto con nosotros mediante correo electrónico.
Para ello utilizaremos la opción:
Enlaces personalizados
Esta opción es especialmente interesante porque no estamos obligados a introducir una URL tradicional como:
https://sernastudio.com/contacto/
Podemos utilizar diferentes esquemas de URL para indicar al navegador qué acción queremos realizar.
En el caso del correo electrónico utilizaremos:
mailto:correo@dominio.com
Por ejemplo:
mailto:hola@sernastudio.com
Al pulsar sobre este enlace, el sistema operativo intentará abrir la aplicación de correo electrónico predeterminada del usuario.
¿Qué debemos introducir?
En el campo URL introduciremos:
mailto:tuemail@dominio.com
Y en Etiqueta de navegación podemos escribir el texto que queremos mostrar.
Por ejemplo:
También podemos dejar una etiqueta descriptiva como:
Contacta con nosotros
Si nuestro diseño utiliza iconos, podemos incluso mostrar únicamente el icono y prescindir del texto visible.
¿Qué es exactamente mailto:?
mailto: no es una dirección web convencional.
Es un URI scheme que indica al navegador que el destino del enlace es una dirección de correo electrónico.
Por ejemplo:
mailto:info@ejemplo.com
También podemos utilizarlo para rellenar automáticamente determinados campos del correo:
mailto:info@ejemplo.com?subject=Consulta%20desde%20la%20web
En este caso, además de indicar el destinatario, estamos solicitando que el asunto del mensaje sea:
Consulta desde la web
También podemos utilizar otros parámetros como cc y bcc, aunque para un menú de navegación normalmente no será necesario complicarlo tanto.
3. Añadir el teléfono
Ahora vamos a realizar exactamente el mismo procedimiento, pero para nuestro número de teléfono.
Volvemos a seleccionar:
Enlaces personalizados
Esta vez no utilizaremos mailto:.
Utilizaremos:
tel:
Por ejemplo:
tel:+34955123456
En la etiqueta podemos utilizar, por ejemplo:
Teléfono
O simplemente podemos utilizar un icono si nuestro tema o plugin de iconos lo permite.
¿Qué es tel:?
Al igual que mailto:, tel: es un esquema especial que permite indicar que el destino del enlace es un número de teléfono.
Por ejemplo:
tel:+34955123456
En un teléfono móvil, al pulsar el enlace normalmente aparecerá la interfaz correspondiente para realizar la llamada.
En un ordenador, el comportamiento dependerá de las aplicaciones instaladas y de cómo el sistema operativo tenga configurado el protocolo tel:.
Una recomendación importante: utiliza el formato internacional
Para teléfonos es recomendable utilizar el número en formato internacional, especialmente si nuestra web puede recibir visitantes de otros países.
Por ejemplo, para España:
tel:+34955123456
El prefijo +34 corresponde a España.
De esta forma evitamos depender del formato local del número.
4. Utilizar iconos en lugar de texto
En muchas cabeceras modernas no queremos tener algo como:
Inicio | Servicios | Contacto | Email | Teléfono
Podemos preferir una interfaz mucho más visual:
Inicio | Servicios | Contacto | ✉ | ☎
Para ello podemos utilizar un plugin que permita incorporar iconos a los elementos del menú.
En el artículo original utilizábamos el plugin Custom Menu Icons, que permite añadir iconos a elementos del menú.
La idea es sencilla: el enlace sigue siendo exactamente el mismo, pero visualmente podemos representarlo mediante un icono.
Por ejemplo:
mailto:hola@dominio.com
puede representarse mediante un icono de correo.
Y:
tel:+34955123456
puede representarse mediante un icono de teléfono.
5. ¿Por qué utilizar enlaces personalizados?
Esta técnica tiene una ventaja importante: no dependemos de una funcionalidad específica del tema.
WordPress permite introducir enlaces personalizados en los menús y el navegador entiende los esquemas mailto: y tel:.
Por tanto, podemos utilizar esta técnica incluso aunque nuestro tema no tenga una opción específica para añadir información de contacto a la cabecera.
6. ¿Funcionará en móviles?
Sí, y precisamente aquí es donde este sistema resulta especialmente interesante.
En un smartphone:
- Un enlace
tel:puede iniciar el proceso de llamada. - Un enlace
mailto:puede abrir la aplicación de correo configurada.
Esto permite convertir la cabecera de nuestra web en un punto de contacto directo.
Por ejemplo, un visitante puede estar navegando desde su teléfono y no necesitar buscar la página de contacto: simplemente pulsa el icono del teléfono.
7. ¿Podemos utilizar WhatsApp?
También podemos crear enlaces específicos para servicios externos.
Por ejemplo, WhatsApp utiliza enlaces del tipo:
https://wa.me/34123456789
En este caso debemos utilizar el número en formato internacional, normalmente sin espacios, guiones ni el signo +.
Por ejemplo:
https://wa.me/34123456789
Esto permite ampliar nuestro menú con diferentes canales de contacto:
- 📧 Correo electrónico.
- 📞 Teléfono.
- 💬 WhatsApp.
8. No olvides comprobar el comportamiento en móvil
Una vez guardado el menú, no deberíamos quedarnos únicamente con la prueba realizada desde el ordenador.
Es recomendable comprobar:
- Que el icono se muestra correctamente.
- Que el enlace de correo abre la aplicación correspondiente.
- Que el teléfono es pulsable.
- Que el menú sigue funcionando correctamente en pantallas pequeñas.
- Que los iconos tienen suficiente contraste.
- Que el usuario puede identificar fácilmente qué acción realiza cada icono.
Especialmente si eliminamos el texto y dejamos únicamente iconos, debemos prestar atención a la accesibilidad.
9. ¿Icono o texto?
Visualmente, un icono puede resultar mucho más limpio, pero no siempre es mejor.
Un teléfono suele ser bastante reconocible, pero otros iconos pueden resultar ambiguos para determinados usuarios.
Una solución interesante es utilizar:
Icono + texto en escritorio
y utilizar un diseño más compacto en dispositivos móviles.
Si utilizamos únicamente iconos, también debemos asegurarnos de que el enlace tenga una etiqueta o nombre accesible para lectores de pantalla.
10. ¿Necesitamos modificar PHP?
No.
Una de las ventajas de este método es precisamente que no necesitamos modificar el código del tema.
Todo el proceso se realiza desde el administrador de WordPress:
- Accedemos al menú.
- Añadimos un enlace personalizado.
- Utilizamos
mailto:para el correo. - Utilizamos
tel:para el teléfono. - Guardamos los cambios.
- Comprobamos el resultado en escritorio y móvil.
Resumen rápido
Si queremos añadir un correo electrónico al menú:
mailto:info@dominio.com
Si queremos añadir un teléfono:
tel:+34955123456
Y si queremos añadir WhatsApp:
https://wa.me/34123456789
Conclusión
Como podemos ver, no necesitamos que nuestro tema tenga una opción específica para colocar un teléfono o un correo electrónico en el menú principal.
Gracias a los enlaces personalizados de WordPress podemos añadir prácticamente cualquier destino que entienda el navegador, incluyendo los esquemas mailto: y tel:.
Es una solución sencilla, ligera y especialmente útil para webs corporativas, negocios, portfolios y cualquier proyecto en el que queramos facilitar al máximo el contacto con nuestros visitantes.
Y lo mejor de todo: no necesitamos tocar el código del tema ni modificar archivos del núcleo de WordPress.
Rápido, sencillo y muy práctico.
Saludos.
Ejemplo final
Un menú podría quedar conceptualmente de esta forma:
Inicio Servicios Portfolio Blog ✉ Correo ☎ Teléfono
Donde:
✉ → mailto:info@dominio.com ☎ → tel:+34955123456
De esta manera convertimos nuestro menú de navegación en una herramienta de contacto directa y accesible desde cualquier dispositivo.
Visitas: 134
Automation & Data Specialist | Web Development | Data Processing & Integration