Muchos sitios web de negocios muestran un número de teléfono para que sus clientes puedan contactarlos. Cuando las computadoras de escritorio eran la forma más popular de acceder a sitios, los usuarios notaron el número de teléfono y llamaron a un dispositivo separado. Por supuesto, la mayoría de los usuarios ahora están accediendo al sitio web y las llamadas por teléfono desde el mismo dispositivo. Esto abre la oportunidad de agregar un enlace de llamada, creando un número de teléfono HTML que se puede hacer clic. En este artículo, echaremos un vistazo a cómo agregar un enlace de llamada, así como algunos otros enlaces a los que se puede hacer clic, como el correo electrónico y otros CTA.
Suscríbase a nuestro canal de YouTube cómo funcionan los enlaces de llamadas Haga clic en un número de teléfono se realiza fácilmente con HTML. HTML5 incluye protocolos como Tel: y Mailto: qué navegadores pueden usar. Los navegadores responden de manera diferente a estos protocolos. Algunos iniciarán la aplicación del teléfono y agregarán el número en la pantalla mientras esperan para hacer clic en el botón de llamada. Otros harán la llamada, mientras que otros preguntarán si está bien. Como es HTML, puede agregar protocolos en cualquier lugar de su sitio, incluyendo encabezado, sótano, barras laterales, en el contenido de publicaciones y páginas y en widgets.
Agregar una llamada de llamada telefónica HTML a su sitio web Agregue el texto a la ubicación en la que desea que aparezca el enlace: 123-456-7890 href = Tel: Crea el enlace de llamada. Esto le dice al navegador cómo usar el número. “Tel: 123-456-7890” crea el número de teléfono HTML. El número de comillas es el número que llamará. El número en las etiquetas> <es la parte visual y puede ser lo que quiera ser, incluido un número de teléfono, una línea de texto, como "hacer clic para llamar" o "llamar ahora" o cualquier otra llamada para la acción. Debe ser descriptivo de lo que sucederá al hacer clic. La asociación de un mensaje en lugar del número se vería así: haga clic para llamar a sus visitantes que verán El texto, pero cuando lo hagan clic, verán la llamada para sus teléfonos, con su número preparado para que hagan clic en el botón de llamada. Agregar una extensión Algunos números de teléfono tienen una extensión. Puede agregar código que creará un breve descanso antes de formar el número de extensión. Agregar P frente a la extensión agregará una ruptura de un segundo. El código podría verse así: Haga clic para llamar a los que se forman el número, espere un segundo y luego forme la extensión.
Puede esperar un tono de llamada usando W en lugar de P. Agregar códigos de país Los códigos de país se pueden agregar incluyendo uno + junto con el código de su país antes del número de teléfono. Un ejemplo podría verse así: 123-456-7890 Agregar microdatos para el SEO local entre mis instalaciones favoritas para transportar un teléfono inteligente es cuando estoy buscando Para un negocio local, y el resultado en Google me da un número de teléfono que se puede hacer clic. Puedo hacer clic en el número para hacer la llamada sin tener que notarla o intentar memorizarla. Esta característica ahora es una necesidad. Afortunadamente, puede agregarlo a su sitio web para que Google pueda proporcionarle su número de teléfono en búsquedas locales.
Esto se hace con microdes. Microdates informa a los motores de búsqueda que los números son un número de teléfono para que se puedan mostrar como un enlace de llamada de clic. Puede crear esto enriqueciendo la marca con algunas etiquetas para búsquedas locales. Por ejemplo, el código podría verse así:

WordPress Temo

Teléfono:
234567890
Otras llamadas a la acción con HTML5, no se limiten a los números de teléfono. Puede agregar otras llamadas a la acción, como correo electrónico, mensajería, fax, etc. Los protocolos HTML5 incluyen:
Tel: – Haz una llamada telefónica
Mailto: – Abra una aplicación de correo electrónico
Callto: Abra Skype
SMS: – Enviar un mensaje de texto
Fax: – Enviar un faxato Estos protocolos se usan de la misma manera que vi arriba. Veamos algunos ejemplos. Agregar el código a su página de contacto Uno de los mejores lugares para agregar un enlace de llamada es en la información de contacto en la página de contacto.
Ya sea que use el editor clásico o el nuevo editor de Gutenberg, deberá ver la versión de texto. En el editor clásico, haga clic en la pestaña Texto. En Gutenberg, haga clic en los tres puntos a la parte superior derecha y seleccione el editor de código.
Agregue el código en lugar de su número de teléfono.
Deje el editor de códigos o una vista previa de la página y verá que su número de teléfono ahora es un enlace que se puede hacer clic. Crear el código para un enlace de correo electrónico o una dirección URL El código HTML para el correo electrónico es Mailto: la dirección de correo electrónico se agrega al final, de la siguiente manera: <a href = "mailto: Óepmail proteica correcta [correo electrónico protegido]

Al igual que el enlace del teléfono, puede usar la parte visual para agregar un mensaje, como:

<a href="mailto: [Mail ProtectACSSics aquí Para enviarme un correo electrónico Además de la conexión telefónica, puede usar la parte visual para agregar un mensaje, como:

<href = "mailto: [correo electrónico protegido]"; Haga clic aquí para enviarme un correo electrónico
Aquí hay un ejemplo de la página del paquete de spa de diseño. Agregué un módulo de propaganda con un icono y el texto envía un correo electrónico. Seleccionamos la pestaña de texto y agregamos el código HTML del correo electrónico. El texto está haciendo clic ahora y abrirá su aplicación de correo electrónico. Agregar el código para abrir URL puede tener el código HTML para abrir cualquier URL que desee. Esto es bueno si desea enviar lectores a páginas para registros para boletines, eventos, etc. Para conectarse a estos, su código HTML incluirá URL. Por ejemplo: vea la muestra>
Agregué otro mensaje con el código para ver la página del evento. Desactivar en el escritorio y la tableta
Un problema con los enlaces de llamadas es que no son útiles para escritorios o tabletas. Puede resolver esto con la división creando módulos específicos para cada tipo de dispositivo y luego desactivándolos en los otros dispositivos. Aquí, creamos dos módulos con el número de teléfono: uno incluye un número de teléfono HTML y el otro no. Deshabilité el que tiene el número que puede hacer clic en tabletas y escritorios, por lo que nunca verán el enlace. También deshabilité el módulo sin el enlace del teléfono, por lo que los usuarios del teléfono solo verán el módulo con el enlace.

Agregar el código al encabezado o sótano puede agregar el código al encabezado o al sótano utilizando el editor de temas. Siempre use un tema infantil o el código PHP se sobrescribirá cuando actualice el tema. Esto requerirá que algunos estilos CSS se vean bien.
En el tablero, vaya al aspecto> Editor> encabezado del tema (o sótano). Coloque el código en la parte del código. Busqué una etiqueta final , hago clic en ENTRAR para agregar algunas filas adicionales y me quedé con mi código. Puede ver el código aquí en las líneas 28 y 29. Así se ve cuando coloqué el enlace de llamada y el enlace de correo electrónico en el revestimiento del tema veintineta. Está allí y funciona, pero no es muy agradable. Esto se puede resolver agregando color y espacio de borde, para que difieran entre sí. Por supuesto, esto se hace en CSS. El estilo de los enlaces deberá agregar código al campo CSS adicional en Customizer. Su código puede verse así: a [href^= “Tel:”] {

Color marrón;

Decoración de texto: ninguna;

Margen-derecha: 0.em;

}

a [href^= “mailto:”] {
Color naranja;
Decoración de texto: ninguna;
Margen-derecha: 0.8em;
}
Esto le dice a CSS cómo estilizar el texto para Tel: y Mailto :. Cambie la fuente del número de teléfono en marrón, la fuente del correo electrónico naranja y agregue un pequeño margen a la derecha de cada enlace.
CSS funciona en cualquier lugar donde el código esté incluido en widgets, publicaciones, etc. Incluso puedes usar iconos en lugar de texto. Agregar el código al menú secundario de Divic Divic puede incluir su número de teléfono y dirección de correo electrónico en el menú secundario sobre el encabezado. El botón de correo electrónico ya está predeterminado, pero el número de teléfono no. El número de teléfono se puede transformar en un enlace de llamada utilizando un número de teléfono HTML similar que utilicé en ejemplos anteriores.
Acceda al personalizador del tema> encabezado y navegación> elementos de encabezado. Esto le dará un cuadro de texto donde puede agregar su número de teléfono. Afortunadamente, no se limite a los números. También puede agregar HTML. Hemos agregado el código HTML de ejemplos anteriores. También aumenté el tamaño de la fuente del número de teléfono para facilitar las imágenes. Puede hacer que sea obvio que puede hacer clic agregando un mensaje al lado visual del enlace. Puede reemplazar el número con el mensaje o puede agregar el mensaje al final del número. Podría verse así: 123-456-7890 Haga clic para llamar
Este ejemplo muestra solo el texto.
En esto, agregué el número de teléfono con el texto. Pruebas móviles Recomiendo probar conexiones con dispositivos móviles para asegurarme de que funcione. Si no tiene acceso a un teléfono inteligente, puede usar las herramientas de desarrolladores de Google Chrome.
Haga clic en la derecha en su página de inicio y seleccione Inspect. En la esquina superior izquierda de la pantalla, verá una lista de dispositivos. Seleccione uno para ver cómo se ve su sitio web en esa pantalla. Si hace clic en el enlace del número de teléfono HTML, debe abrir un cuadro de diálogo que le pide que elija una aplicación. Si ve esto, el enlace funciona. Todavía recomiendo probarlo en un teléfono inteligente en sí, pero esta es una buena indicación de que la conexión está haciendo algo. Agregar enlaces de llamadas también con complementos, puede agregar un enlace de llamada a su encabezado con un complemento. Estos generalmente incluyen características de estilo, agregar más llamadas de acción y la posibilidad de ser activado o deshabilitado de acuerdo con el dispositivo del visitante. También son fáciles de configurar y usar. Estas son excelentes opciones si no desea administrar el código. Estas son algunas de las mejores opciones. Llamada de botón Ahora la llamada ahora, pero agregue un botón de clic en la parte inferior de su pantalla para sus visitantes móviles. No se muestra en otros dispositivos. También puede agregar texto si lo desea. El botón es un ícono del teléfono, por lo que es fácil entender lo que sirve. Todo lo que tiene que hacer es activar el botón e ingresar el número de teléfono. Puede cambiar el comportamiento predeterminado en la configuración avanzada. Más información de botones laterales más litidos

Este complemento le permite agregar botones que se adhieren al costado de su sitio web y permanecer en la pantalla cuando el usuario se ejecuta. Puede agregar un número de teléfono que se puede hacer clic, una dirección de correo electrónico, los iconos en las redes sociales y las ubicaciones de la tienda. Coloque a la derecha o a la izquierda, elija estilos de animación y vuelco, personalice los colores y elija dónde se muestren. Más barra de información se apresura a agregar una barra de contacto que incluye enlaces a los que se puede hacer clic para hacer un número de teléfono, un número de fax, un título, una dirección, un correo electrónico, redes sociales personalizadas y direcciones de URL. Coloque la barra en la parte superior o inferior y ajuste el tamaño, el color, el color del texto y los enlaces y cómo reacciona la barra. También puede ajustar el tamaño. Puede agregar más contenido usando ganchos de filtro. Más información de la barra de contacto móvil