افزودن دکمه تماس تلفنی به سایت بدون افزونه

دکمه تماس یکی از مواردی است که می‌توانید جهت تسریع ارتباط با کاربران خود در سایت قرار دهید . بسیاری از کاربران که وارد وب سایت شما می‌شوند ، علاقه دارند تا سریع‌تر راه ارتباطی با شما را پیدا کرده و درمورد خدمات یا محصولاتی که نیاز دارند ، اطلاعات لازم را کسب کنند .

وجود دکمه تماس به شکل ثابت در انتهای سایت یکی از آیتم هایی است که می‌تواند به افزایش نرخ تبدیل مشتری کمک شایانی بکند لذا میتوان آن را بعنوان یک گزینه مهم در تجربه کاربری سایت درنظر گرفت .

راه های بسیاری جهت قراردادن دکمه تماس در سایت وجود دارد . اگر وب سایت شما وردپرسی باشد می‌توانید به راحتی و صرفا با نصب یک افزونه ، یک دکمه تماس به داخل سایت اضافه نموده و تنظیمات بسیاری را برای آن شخصی سازی کنید ازجمله محل نمایش دکمه ، آیکون نمایشی داخل دکمه ، رنگ پس زمینه ، شماره تماس مدنظر جهت تماس ، استایل ظاهری ( دایره ، مربع و … ) و بسیاری موارد دیگر ، اما افزودن یک دکمه تماس به وب سایت کار چندان سختی نیست که نتوان آن را در سایت انجام داده و به سراغ افزونه هایی رفت که باعث سنگینی سایت شما خواهد شد .

به این دلیل که دکمه تماس در داخل سایت و بخشی که کاربران شما مشاهده می‌کنند نمایش داده خواهد شد ، لذا تغییرات و شخصی سازی هایی که روی این دکمه انجام خواهید داد ، در قالب کدهای استایل به صفحه سایت شما اضافه شده و بار اضافی روی سایت ایجاد خواهد کرد .

لذا می‌توانید خودتان با چندخط کد ساده ، یک دکمه تماس بسیار عالی با همان عملکرد را در سایت خود اضافه کنید .

طراحی دکمه تماس در سایت وردپرسی

برای اینکه یک دکمه تماس ایجاد کنید لازم است یک خط کد html و چندخط کد Css به داخل سایت خودتان طبق روشی که در ادامه گفته شده است اضافه کنید  .

دقت کنید که تمامی مراحل را دقیق انجام دهید ، البته که این کدها درصورتی که درست نوشته شوند ، اختلالی در دیزاین سایت شما بوجود نخواهد آورد لذا قبل از شروع حتما یک نسخه پیشتیبان از قالب سایت خودتان داشته باشید و یا در حین کدنویسی ، فایل هایی که ویرایش می کنید را باز نگه دارید تا درصورت ایجاد هرگونه مشکل احتمالی ، بتوانید کدهای نوشته شد را پاک نموده و قالب را به حالت قبلی بازگردانید .

برای شروع لازم است بدانید که باید دو فایل از فایل های قالب وردپرس خودتان را پیدا کرده و ویرایش کنید .

ساده ترین راه برای نوشتن این کدها ، رفتن به قسمت نمایش در داخل بخش پیشخوان و سپس قسمت ویرایشگر پرونده پوسته است .

یا ورود به این بخش ، شما قادر هستید تا قالب فعلی سایت خودتان را ویرایش کنید . اگر برای اولین بار به این قسمت وارد شوید ، یک پیغام که حاوی یک متن هشدار در مورد تغییر فایل های قالب از این قسمت است روبرو خواهید شد که می‌توانید روی گزینه ” فهیمدم ” کلیک کنید تا ادامه کار را پیش ببریم !

در گام اول باید به ستون سمت چپ نگاه کنید و به دنبال فایلی بنام :

footer.php

باشید . همانطور که در تصویر بالا مشاهده می‌کنید قالب شما باید یک فایل بنام footer داشته باشد . در داخل این فایل باید در انتهای فایل به دنبال دو خط کد به شکل زیر باشید :

</body>
</html>

اکنون قبل از این دو خط کد ، باید کد زیر را قرار دهید :

<div class="call-btn">
	<a href="tel:+989141234567">
		Call
	</a>
</div>
</body>
</html>

خب اکنون ما یک کد به زبان html قرار دادیم که کدکلی ساخت دکمه خواهد بود . این دکمه دارای یک کلاس است بنام ” call-btn ” که تصمیم داریم برای آن در ادامه استایل نویسی کنیم تا ظاهر آن نیز جذاب‌تر شود .

چند نکته در این کد حائز اهمیت است . اول اینکه شما بجای شماره تماس ، باید شماره موبایل مدنظر خودتان را قرار دهید . گزینه بعدی ، متن نمایشی داخل دکمه است . ما در این کد برای دکمه یک متن تحت عنوان ” Call ” نوشتیم .

اگر قصد دارید تا از یک تصویر در این قسمت استفاده کنید می‌توانید تصویر مدنظر خود را در ابعاد کوچک ، داخل رسانه وردپرس آپلود کنید و سپس آدرس آن را کپی نموده و آن را به شکل زیر استفاده کنید .

<div class="call-btn">
	<a href="tel:+989141234567">
		<img src="image url">
	</a>
</div>
</body>
</html>

آدرس عکس را باید در داخل قسمت “image url” قرار دهید . اگر علاقه دارید تا از فونت آیکون بجای عکس استفاده کنید باید اطلاع داشته باشید که وب سایت شما از کدام کتابخانه های فونت آیکون استفاده می‌کند . اگر وب سایت شما از کتابخانه فونت آیکون بوت استرپ استفاده کند ، می‌توانید کد را به شکل زیر تغییر دهید .

<div class="call-btn">
	<a href="tel:+989141234567">
		<i class="bi bi-telephone"></i>
	</a>
</div>
</body>
</html>

در این حالت یک آیکون گوشی تلفن در داخل دکمه نمایش داده خواهد شد . خب همانطور که مشاهده کردید افزودن کد html به داخل سایت بسیار ساده است و شما نهایتا 2 خط کد برای افزودن دکمه تماس نیاز داشتید .

پس از انجام تغییرات در داخل فایل footer.php لازم است تا دکمه ذخیره تغییرات را در پایین صفحه کلیک کنید تا تغییرات در داخل فایل footer.php اعمال شود . حتما دقت کنید که پیغام ” ذخیره موفقیت آمیز تغییرات ” را مشاهده کنید .

اکنون اگر صفحه اصلی سایت خود را مشاهده کنید ممکن است کمی ظاهر مناسبی در انتهای سایت مشاهده نکنید ، به این دلیل که باید این دکمه را کمی استایل دهی کنیم . اکنون لازم است تا در داخل فایل های قالب ، همانند فایل footer.php ، یک فایل دیگر را نیز ویرایش کنیم . فایل style.css را باید در ستون سمت چپ قسمت ویرایشگر پرونده پوسته پیدا کنید که معمولا اولین فایل در لیست فایل های قالب است .

وارد فایل style.css شوید ( با کلیک روی نام فایل ) و به انتهایی ترین قسمت کدهای css بروید . اکنون باید کد زیر را داخل این فایل قرار دهید :

.call-btn{
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: auto;
    height: auto;
    z-index: 10;
}

.call-btn a{
    display: inline-block;
    background-color: #616161;
    color: #faf4f4;
    text-align: center;
    border-radius: 6px;
    z-index: 10;
    padding: 6px 12px;
}

پس از قراردادن این کد ، باید فایل style.css را ذخیره کنید . اکنون شما هر دو کد را به درستی نوشتید . پس از ذخیره این دو فایل ، ممکن است در داخل سایت خروجی مناسبی را مشاهده نکنید .

در این شرایط اگر وب سایت شما از سیستم کش استفاده می‌کند ، باید تمامی صف کش را خالی کنید تا بتوانید تغییرات را مشاهده کنید . اگر قالب شما استاندارد باشد ، می‌توانید با همین تکنیک ، یک دکمه تماس بسیار مناسب را در سایت قرار دهید . البته خودتان لازم است تا کمی روی استایل این دکمه کار کنید . به این دلیل که ما اطلاعی از فونت آیکون های سایت شما نداریم ، نمی‌توان دقیقا گفت که از کدام آیکون‌ها باید استفاده کنید . اگر خواستید دکمه شما در سمت راست صفحه باشد باید در داخل کد بالا و بخش call-btn کد زیر را تغییر دهید :

left:20px;

این کد به دکمه شما از سمت چپ به اندازه 20 پیکسل فاصله خواهد داد اگر قصد داشتید تا از سمت راست فاصله بگیرد باید این کد را پاک کرده و کد زیر را جایگزین کنید :

right:20px;

به همین سادگی می‌توانید دکمه تماس در سایت را خودتان اضافه کنید و نیازی به هیچ افزونه خاصی نیست . اما اگر به هر دلیل علاقمند بودید تا امکانات بیشتری داشته باشید می‌توانید از افزونه‌های وردپرسی همچون ” Call Now Button ” استفاده کنید .