بخش Vip سئو مایند

بهترین فرصت برای یادگیری در قسمت Vip سئو مایند هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
ورود به بازار کار با سئو مایند

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

مقالات حوزه وردپرس

با چندخط کد می‌توانید دکمه تماس را در داخل سایت خودتان اضافه کنید ! ساخت دکمه ثابت برای تماس در داخل سایت های وردپرسی بدون نصب هیچ افزونه خاصی !

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

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

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

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

پیشنهادی : روش تشخیص Cms سایت

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

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

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

برای اینکه یک دکمه تماس ایجاد کنید لازم است یک خط کد 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 ” استفاده کنید .

ادمین

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

آموزش های فرانت

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

شاید این مطالب نیز برای شما جالب باشد

اگر در وردپرس قصد دارید تا از یک نوشته ، برگه یا محصول کپی تهیه کرده و کار خود را سرعت بخشید باید چگونه عمل کرد ؟ معرفی روش های سریع تهیه رونوشت از انواع محتوا در وردپرس !

0

چگونه میتوان فهمید که وب سایت ها از چه سیستم های مدیریت محتوایی استفاده می‌کنند ؟ در این بخش ، 3 روش کاملا اصولی و تضمینی را خدمت شما معرفی خواهیم کرد که می‌توانید در کمتر از چند ثانیه ، CMS تمامی وب سایت ها را تشخیص دهید !

2
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
دیدگاه های شما
امید ۱۰ / ۱۴۰۲
5

خیلی عالی مشکل من فقط توی اون قسمت tel بود که حل شد متشکر از شما