de nombreux sites Web d’entreprises affichent un numéro de téléphone afin que leurs clients puissent les contacter. Lorsque les ordinateurs de bureau étaient le moyen le plus populaire d’accéder aux sites, les utilisateurs prenaient note du numéro de téléphone et appelaient à partir d’un appareil séparé. Bien sûr, la plupart des utilisateurs accèdent maintenant au site web et passent l’appel téléphonique à partir du même appareil. Cela ouvre la possibilité d’ajouter un lien d’appel – créant un numéro de téléphone HTML cliquable.,
dans cet article, nous examinerons comment ajouter un lien d’appel ainsi que quelques autres liens cliquables tels que le courrier électronique et d’autres CTA.
abonnez-vous à notre chaîne Youtube
Comment fonctionnent les liens D’appel
rendre un numéro de téléphone cliquable se fait facilement avec HTML. HTML5 inclut des protocoles tels que tel: et mailto: que les navigateurs peuvent utiliser. Les navigateurs répondent différemment à ces protocoles. Certains lanceront l’application téléphone et ajouteront le numéro à l’écran en attendant que vous cliquiez sur le bouton D’appel. D’autres feront l’appel, tandis que d’autres demanderont si ça va d’abord.,
puisque C’est HTML, vous pouvez ajouter les protocoles n’importe où sur votre site, y compris l’en-tête, le pied de page, les barres latérales, dans le contenu des messages et des pages, et dans les widgets.
ajout D’un lien D’appel de numéro de téléphone HTML vers votre site web
ajoutez le code sous forme de texte à l’emplacement où vous souhaitez que le lien apparaisse:
<a href="tel:123-456-7890">123-456-7890</a>
href=tel: crée le lien d’appel. Cela indique au navigateur comment utiliser le nombre.
« Tel: 123-456-7890 » crée le numéro de téléphone HTML. Le numéro dans les guillemets est le numéro qu’il appellera.,
le numéro dans les balises>< est la partie visuelle et il peut s’agir de tout ce que vous voulez, y compris le numéro de téléphone, une ligne de texte telle que « Cliquez pour appeler” ou « appelez maintenant”, ou tout autre appel à Il devrait être descriptif de ce qui va se passer quand ils cliquent.,
afficher un message au lieu du numéro ressemblerait à ceci:
<a href="tel:123-456-7890">CLICK TO CALL</a>
vos visiteurs verront le texte mais quand ils cliqueront dessus, ils verront l’écran de composition de leurs téléphones avec votre numéro prêt pour qu’ils cliquent sur le bouton d’appel.
l’Ajout d’une Extension
Certains numéros de téléphone ont une extension. Vous pouvez ajouter du code qui créera une brève pause avant de composer le numéro de poste. L’ajout de P devant l’extension ajoutera une pause d’une seconde., Le code peut ressembler à ceci:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
cela compose le numéro, attend une seconde, puis compose l’extension.
Vous pouvez l’avoir à attendre la tonalité en utilisant w au lieu de p.
l’Ajout de Codes de Pays
codes de Pays peuvent être ajoutés en incluant un + avec votre code avant le numéro de téléphone., Un exemple pourrait ressembler à ceci:
<a href="tel:+1123-456-7890">123-456-7890</a>
ajout de microdonnées pour le référencement Local
l’une de mes commodités préférées de transporter un smartphone est lorsque je recherche une entreprise locale et le résultat dans Google me donne un numéro de téléphone cliquable. Je peux cliquer sur le numéro pour passer un appel sans avoir à l’écrire ou à essayer de le mémoriser. Cette fonctionnalité est maintenant une nécessité. Heureusement, vous pouvez l’ajouter à votre site afin que Google puisse fournir votre numéro de téléphone dans les recherches locales.
cela se fait avec des microdonnées., Les microdonnées informent les moteurs de recherche que les numéros sont un numéro de téléphone, de sorte qu’ils sont affichés comme un lien d’appel cliquable. Vous pouvez le créer en enrichissant le balisage avec quelques balises pour les recherches locales.
par exemple, le code peut ressembler à ceci:
autres appels à L’Action
avec HTML5, vous n’êtes pas limité aux numéros de téléphone. Vous pouvez ajouter d’autres appels à action tels que le courrier électronique, la messagerie, le fax, etc., HTML5 protocoles suivants:
- tél: – placer un appel téléphonique
- mailto: – ouverture d’une application d’e-mail
- callto: ouvrez Skype
- sms: – envoyer un message texte
- fax: – envoyer un fax
l’Ensemble de ces protocoles sont utilisés de la même manière que nous l’avons vu ci-dessus. Regardons quelques exemples.
ajout du Code à votre page de Contact
l’un des meilleurs endroits pour ajouter un lien d’appel est dans vos informations de contact sur votre page Contactez-nous.,
que vous utilisiez L’éditeur classique ou le nouvel éditeur Gutenberg, vous devrez afficher la version texte de la page. Dans l’éditeur classique, cliquez sur L’onglet Texte. Dans Gutenberg, cliquez sur les trois points en haut à droite et sélectionnez Éditeur de Code.
Ajoutez le code à la place de votre numéro de téléphone.
quittez L’éditeur de Code ou prévisualisez la page et vous verrez que votre numéro de téléphone est maintenant un lien cliquable.,
Création du Code pour un lien ou une URL D’e-mail
le code HTML pour l’e-mail est mailto: l’adresse e-mail est ajoutée à la fin, comme ceci:
tout comme le lien téléphonique, vous pouvez utiliser la partie visuelle pour ajouter un message, tel que:
< href="mailto: "; Click here to send me an email</a>
Voici un exemple de la page de contact du spa layout Pack. J’ai ajouté un module blurb avec une icône et le texte envoyer un E-Mail. J’ai sélectionné L’onglet Texte et ajouté le code HTML de l’e-mail. Le texte est maintenant cliquable et ouvrira votre application de messagerie.,
ajout de Code pour ouvrir les URL
Vous pouvez avoir le code HTML pour ouvrir n’importe quelle URL que vous voulez. C’est bien si vous souhaitez envoyer des lecteurs sur des pages pour les inscriptions à la newsletter, les événements, etc. Afin de créer un lien vers eux, votre code HTML inclura L’URL. Par exemple:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
j’ai ajouté un autre texte de présentation avec un code pour voir la page des événements.
désactiver sur le bureau et la tablette
un problème avec les liens d’appel est qu’ils ne sont pas utiles pour les ordinateurs de bureau ou les tablettes., Vous pouvez résoudre ce problème avec Divi en créant des modules spécifiques à chaque type de périphérique, puis en les désactivant sur les autres périphériques.
ici, j’ai créé deux modules avec le numéro de téléphone: l’un inclut un numéro de téléphone HTML et l’autre Non. j’ai désactivé celui avec le numéro cliquable sur les tablettes et les ordinateurs de bureau, donc ils ne verront jamais le lien. J’ai aussi désactivé le module sans le lien pour téléphones portables, téléphone, les utilisateurs ne voient que le module avec le lien.
ajout du Code à votre en-tête ou pied de page
Vous pouvez ajouter le code à votre en-tête ou pied de page à l’aide de l’éditeur de thème., Utilisez toujours un thème enfant ou votre code PHP sera écrasé lorsque vous mettez à jour le thème. Cela nécessitera un style CSS pour bien paraître.
Dans votre tableau de bord, allez à Apparence > Editeur: > Thème de l’en-Tête (ou Pied de Thème). Placez le code dans la balise <corps> portion de code. J’ai regardé pour une balise de fin </un>, clique sur entrée pour ajouter quelques lignes supplémentaires, et collé dans mon code., Vous pouvez voir le code ici sur les lignes 28 et 29.
Voici à quoi cela ressemble lorsque j’ai placé le lien d’appel et le lien d’e-mail dans l’en-tête du thème Twenty Nineteen. C’est là et ça marche, mais ce n’est pas très joli. Ceci est réparable en ajoutant de la couleur et de l’espace de marge afin qu’ils se distinguent les uns des autres. Bien sûr, cela se fait en CSS.
styliser les liens
vous devrez ajouter du code au champ CSS supplémentaire dans le Customizer.
votre code pourrait ressembler à ceci:
cela indique au CSS comment styliser le texte pour tel: et mailto:., Il change la police de numéro de téléphone en marron, la police de courrier électronique en orange et ajoute une petite marge à droite de chaque lien.
Le CSS fonctionne partout où le code est compris dans les widgets, les poteaux, etc. Vous pouvez même utiliser des icônes au lieu de texte.
ajout du Code au menu secondaire Divi
Divi peut inclure votre numéro de téléphone et votre e-mail dans le Menu secondaire au-dessus de l’en-tête. Le bouton e-mail est déjà cliquable par défaut, mais pas le numéro de téléphone., Le numéro de téléphone peut être transformé en lien d’appel en utilisant un numéro de téléphone HTML similaire que nous avons utilisé dans les exemples précédents.
Accédez au Thème Customizer > en-Tête & Navigation > Éléments d’en-Tête. Cela vous donnera une zone de texte où vous pouvez ajouter votre numéro de téléphone. Heureusement, vous n’êtes pas limité à seulement des chiffres. Vous pouvez également ajouter du HTML. J’ai ajouté le HTML des exemples précédents. J’ai également augmenté la taille de la police du numéro de téléphone pour le rendre plus facile à voir pour les images.,
Vous pouvez rendre évident qu’il est cliquable en ajoutant un message à la partie visuelle du lien. Vous pouvez remplacer le numéro du message, ou ajouter le message à la fin du numéro. Il pourrait ressembler à ceci:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Cet exemple montre juste le texte.
Dans celui-ci, j’ai ajouté le numéro de téléphone avec le texte.
test sur Mobile
je recommande de tester les liens avec les appareils mobiles pour vous assurer que cela fonctionne., Si vous n’avez pas accès à un smartphone, vous pouvez utiliser les outils de développement de Google Chrome.
clic Droit sur votre page d’accueil et sélectionnez l’Inspecter. Dans le coin supérieur gauche de votre écran, vous verrez une liste des périphériques. Sélectionnez celui pour voir à quoi ressemble votre site web sur cet écran. Cliquer sur le lien du numéro de téléphone HTML devrait ouvrir une boîte de dialogue vous demandant de choisir une application. Si vous voyez cela, le lien fonctionne. Je recommande toujours de l’essayer sur un smartphone réel, mais c’est une bonne indication que le lien fait quelque chose.,
ajout de liens D’appel avec des Plugins
Vous pouvez également ajouter un lien d’appel à votre en-tête avec un plugin. Ils incluent généralement des fonctionnalités de style, l’ajout de plusieurs appels à l’action et la possibilité d’être activé ou désactivé en fonction de l’appareil du visiteur. Ils sont également faciles à configurer et à utiliser. Ce sont d’excellents choix si vous ne voulez pas gérer le code. Voici quelques-unes des meilleures options.
bouton Appeler maintenant
bouton Appeler maintenant ajoute un bouton Cliquer pour appeler au bas de l’écran pour vos visiteurs mobiles. Il ne s’affiche pas sur d’autres appareils., Vous pouvez également ajouter du texte si vous le souhaitez. Le bouton est une icône de téléphone, il est donc facile de comprendre à quoi il sert. Tout ce que vous avez à faire est d’activer le bouton et entrez votre numéro de téléphone. Vous pouvez modifier le comportement par défaut dans les paramètres avancés.
Plus d’informations
boutons latéraux Collants
Ce plugin vous permet d’ajouter des boutons qui collent sur le côté de votre site web et restent à l’écran lorsque l’utilisateur défile. Vous pouvez ajouter un numéro de téléphone cliquable, une adresse e-mail, des icônes de médias sociaux et des emplacements de magasin., Définissez – les à droite ou à gauche, choisissez des styles d’animation et de retournement, personnalisez les couleurs et choisissez où elles s’affichent.
Plus d’informations
barre de Contact rapide
celui-ci ajoute une barre de contact qui comprend des liens cliquables pour un numéro de téléphone, un numéro de fax, un titre, une adresse, un e-mail, des réseaux sociaux et des URL personnalisées. La barre en haut ou en bas pour ajuster la taille, la couleur, la couleur du texte et des liens, et comment la barre réagit. Vous pouvez également ajuster la taille. vous pouvez ajouter plus de contenu à l’aide de crochets de filtre.,
Plus d’informations
barre de Contact Mobile
Ce plugin ajoute des liens vers votre site web lorsqu’il est consulté sur des appareils mobiles. Vous pouvez choisir les liens affichés parmi 13 options, y compris téléphone, e-mail, Skype, URL personnalisées et réseaux sociaux. Il a une intégration FontAwesome pour les icônes. Vous pouvez styliser les liens et choisir la taille, la bordure, l’opacité, etc. Définir le menu en haut ou en bas de l’écran. Le menu reste à l’écran lorsque l’utilisateur défile. Il comprend également le défilement vers le haut et le panier WooCommerce avec des boutons de compteur d’articles.,
Plus d’Informations
conclusion
La popularité des téléphones intelligents pour accéder à des sites web augmente chaque jour. Cette popularité prend des liens d’appel d’être une commodité simple à une nécessité complète. L’ajout de numéros de téléphone cliquables peut faire la différence entre les utilisateurs qui appellent votre entreprise ou vos concurrents. Heureusement, il n’est pas si difficile de créer des liens cliquables pour ajouter des numéros de téléphone HTML à vos en-têtes, pieds de page, widgets, pages et publications de votre site WordPress.