آیا دوست دارید بازدیدکنندگان وب‌سایت شما بتوانند تنها با یک کلیک مستقیم با شما تماس بگیرند؟ یک لینک تلفن قابل کلیک دقیقا همین را در دستگاه‌های تلفن همراه ممکن می‌سازد. من در دستورالعمل‌هایم گام به گام برای شما توضیح خواهم داد که ادغام این مورد در وب‌سایت شما چقدر آسان است.
تصور کنید یک مشتری بالقوه وارد وب‌سایت شما می‌شود و می‌خواهد فوری با شما تماس بگیرد. اما اگر شماره شما به سادگی به صورت پیامک وارد شده باشد، او ابتدا باید با زحمت آن را تایپ کند و تنها پس از آن می‌تواند با شما تماس بگیرد.
اگر وقتی روی شماره یا دکمه تماس کلیک می‌کنید، مستقیم اتصال برقرار شود، خیلی بهتر و کاربرپسندتر است.
لینک تلفنی دقیقا چیست؟
لینک تلفن نوع خاصی از هایپرلینک است که به کاربران اجازه می‌دهد با یک کلیک مستقیم با یک شماره تلفن تماس بگیرند. این لینک به صورت یک تگ tel: در کد HTML وب‌سایت قرار می‌گیرد و پس از آن شماره تلفن مورد نظر قرار می‌گیرد.
وقتی کاربر روی این لینک Tel کلیک می‌کند، برنامه تلفن به طور خودکار روی دستگاه‌های تلفن همراه باز می‌شود. این قابلیت هم با آیفون و هم با گوشی‌ها و تبلت‌های اندرویدی کاملا کار می‌کند.
و در دستگاه‌های دسکتاپ، برنامه‌های VoIP مانند اسکایپ را می‌توان از این طریق در مرورگر باز کرد.
برای اطمینان از اینکه شماره لینک شده واقعا کار می‌کند، از یک طرح URI خاص استفاده می‌شود. مشابه لینک mailto برای آدرس‌های ایمیل. هنگام درج در HTML باید ساختار زیر رعایت شود:
<a href="tel:+98123456789">Call me</a>
ساختار هایپرلینک تلفن به این شکل است:
- عبارت tel:
- علامت بعلاوه
- کد تلفن بین‌المللی
- کد منطقه بدون صفر اول
- شماره تلفن
اضافه کردن شماره تلفن قابل کلیک به وب‌سایت
اگر شماره تلفن خود را به سادگی به صورت عددی در وب‌سایت خود وارد کنید، متاسفانه فقط قابل خواندن است. این یعنی بازدیدکننده باید شماره را تایپ کند به جای اینکه مستقیم با شما تماس بگیرد. اما می‌توانید با تبدیل آن به یک لینک تلفنی، آن را برای دستگاه‌های تلفن همراه بهینه کنید.
برای یک وب‌سایت HTML، کد به این شکل است:
<a href="tel:+9812345">click text</a>
برای اطمینان از اینکه شماره تلفن بدون هیچ مشکلی مستقیم شماره گیری می‌شود، فرمت باید با URI Schema مشخص شده مطابقت داشته باشد.
قرار دادن لینک تلفن در وردپرس
اگر می‌خواهید یک لینک تلفن قابل کلیک به وب‌سایت وردپرس اضافه کنید، چندین گزینه دارید. شما حتی لازم نیست با کد HTML کار کنید، می‌توانید از ابزارهای WP board استفاده کنید.
ویرایشگر وردپرس
به این ترتیب می‌توانید به راحتی شماره را مانند یک لینک معمولی به ویرایشگر گوتنبرگ اضافه کنید.
کافیست متنی را که می‌خواهید لینک دهید، هایلایت کنید و روی آیکون لینک کلیک کنید. حالا می‌توانید شماره تلفن را اینجا وارد کنید. البته، در اینجا باید به قالب‌بندی صحیح نیز توجه کنید.
دقیقا به همین شکل با بلوک‌های موجود در ویجت‌ها کار می‌کند. همچنین می‌توانید دکمه‌ها را به دکمه‌های «کلیک برای تماس» تبدیل کنید: بلوک دکمه را انتخاب کنید و سپس به سادگی از نماد لینک برای لینک دادن شماره تلفن یا متن مورد نظر استفاده کنید، و تمام.
البته، این رویکرد با صفحه‌سازهایی مانند Elementor نیز کار می‌کند.
شماره تلفن‌های قابل کلیک را در منو قرار دهید
آیا می‌خواهید مشتریان بالقوه هنگام بازدید از وب‌سایت شما از طریق تلفن هوشمند، بتوانند مستقیم با شما تماس بگیرند؟ پس بهتر است یک لینک تلفن در منوی اصلی قرار دهید.
در آنجا به وضوح قابل مشاهده است و همچنین می‌توان مستقیم روی تلفن‌های هوشمند کلیک کرد.
برای انجام این کار، به بخش > طراحی > منوها در پنل مدیریت بروید و منوی مناسب را انتخاب کنید. اکنون می‌توانید یک آیتم منوی جدید وردپرس برای لینک کلیک برای تماس ایجاد کنید. برای انجام این کار، در قسمت سمت چپ، گزینه «لینک‌های سفارشی» و سپس «افزودن به فهرست» را انتخاب کنید.
حالا لینک تلفن خود را در فیلد URL و متنی که می‌خواهید نمایش داده شود را در فیلد پایین آن وارد کنید. بسته به قالبی که استفاده می‌کنید، می‌توانید یک آیکون نیز در جلوی آن نمایش دهید. برای این مثال من از قالب وردپرس OceanWP استفاده کردم.
هاست وردپرس با وب سرور محبوب لایت اسپید و کش لایت اسپید باعث می‌شود تا سرعت لود فوق العاده‌ای را تجربه کنید.
با خرید هاست وردپرس کانفیگ حرفه‌ای و نظارت بر سرور به صورت پیوسته توسط تیم فنی پارسدِو انجام خواهد شد.
استایل دادن به شماره تلفن
لینک‌ها در وب‌سایت‌ها معمولا با زیرخط (underline) نمایش داده می‌شوند. اگر این را به‌طور خاص برای لینک تلفن نمی‌خواهید، می‌توانید به راحتی با استفاده از CSS آن را تغییر دهید. و همچنین می‌توانید با چند دستورالعمل کوچک CSS، استایل‌بندی خودتان را ایجاد کنید.
مثال کد ۱: بدون زیرخط، رنگ متن آبی.
a[href^="tel:"]{ text-decoration:none; color:blue; }
مثال کد ۲: بدون زیرخط، لینک تلفن به صورت دکمه استایل‌دهی شده است.
a[href^="tel:"]{ text-decoration:none; color:white; font-weight:bold; background:red; border-radius:50px; padding:20px; }
می‌توانید کد CSS را یا در بخش سفارشی‌سازی یا در فایل style.css قالب فرزند خود اضافه کنید.
راه اندازی لینک تلفن از طریق افزونه
آیا مایلید گزینه‌های تماس خود را برجسته کنید؟ سپس می‌توانید از یکی از افزونه‌های فراوان WP استفاده کنید. در این زمینه، ابزارهایی وجود دارند که می‌توانند شماره تلفن‌ها یا آدرس‌های ایمیل را به عنوان دکمه‌های شناور یا به عنوان نوار پاورقی ادغام کنند.
افزونه Call Now Button – The #1 Click to Call Button for WP
افزونه رایگان Call Now Button ، یک دکمه کلیک برای تماس را در پایین صفحه قرار می‌دهد. این به بازدیدکنندگان وب‌سایت که از دستگاه‌های تلفن همراه استفاده می‌کنند اجازه می‌دهد تا تنها با یک کلیک مستقیم با شماره شما تماس بگیرند.
برای مثال، می‌توان از دکمه‌های عملیاتی اضافی برای واتس‌اپ، پیامک یا اسکایپ نیز استفاده کرد.
WP Call Button
با استفاده از ابزار رایگان WP Call Button می‌توانید تنها با چند کلیک و بدون هیچ دانش برنامه‌نویسی، یک گزینه تماس جذاب در وب‌سایت خود ارائه دهید.
Elementor
آیا از المنتور پرو استفاده می‌کنید؟ اگر چنین است، به هیچ یک از افزونه‌های ذکر شده در بالا نیاز ندارید. المنتور همین الان هم دقیقا همین قابلیت را با «عناصر شناور» ارائه می‌دهد. در قالب‌ها، چندین قالب نیز پیدا خواهید کرد که با استفاده از آنها می‌توانید به سرعت و به راحتی یک دکمه کلیک برای تماس یا یک نوار شناور را در وب‌سایت خود ادغام کنید.
نتیجه‌گیری:
یک لینک تلفن قابل کلیک، راهی عالی برای تسهیل تماس و در عین حال بهبود تجربه کاربری است. طراحی واضح لینک تلفن نیز آن را برای بازدیدکنندگان وب‌سایت جذاب‌تر و قابل توجه‌تر می‌کند.
