اضافه کردن دکمه تماس در وردپرس بدون افزونه و با افزونه

اضافه کردن دکمه تماس در وردپرس یکی از دغدغه های مدیران سایت های وردپرسی است. در این مقاله از سایت کیت وردپرس قصد داریم نحوه افزودن دکمه تماس در وردپرس رو با افزونه و بدون افزونه آموزش دهیم.

برای افزودن یک دکمه تماس (Call-to-Action) در وردپرس، می‌توانید از یک افزونه، با ساختار گرافیکی قالب یا کدنویسی مستقیم استفاده کنید. در ادامه، روش‌های مختلف آورده شده‌اند:

آموزش افزودن دکمه تماس در وردپرس

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

مدیران سایت‌های اینترنتی معمولاً به دنبال ساختارهای راحت‌تر برای کاربران خود هستند تا با افزایش رضایت کاربران، خود را به عنوان یک منبع معتبر در نظر کاربران جلوه دهند. اگر شما هم یک کسب‌وکار اینترنتی دارید و می‌خواهید آن را توسعه دهید و جلب رضایت کاربران را بدست بیارید، باید به ساختارها و ابزارهایی فکر کنید که ارتباط کاربران با شما و تجربه کاربری را بهبود بخشید.

اضافه کردن دکمه تماس در وردپرس با افزونه

افزونه‌های مختلفی برای افزودن دکمه تماس در وردپرس وجود دارند. یکی از راه‌های ساده‌تر استفاده از افزونه “Elementor” است. این افزونه یک سازنده صفحه حرفه‌ای است که به شما امکان ایجاد صفحات و افزودن دکمه تماس را می‌دهد.

1. نصب و فعال‌سازی افزونه Elementor از پیشخوان وردپرس.
2. وارد صفحه یا نوشته‌ای که می‌خواهید دکمه تماس در آن قرار گیرد شوید.
3. با استفاده از افزونه Elementor، یک بخش جدید اضافه کنید یا به بخش موجودی اقدام کنید.
4. در بخش محتوا، از المان “دکمه” یا “Button” استفاده کنید.
5. تنظیمات دکمه را تغییر دهید و در قسمت مربوط به لینک، شماره تلفن خود را وارد کنید.
6. حالا اضافه کردن دکمه تماس در وردپرس شما انجام شد.

1-افزودن دکمه تماس شناور با المنتور

برای افزودن یک دکمه تماس شناور با المنتور، می‌توانید از امکانات این افزونه سازنده صفحه به نام “Elementor” استفاده کنید. در زیر یک راهنمای ساده برای افزودن یک دکمه تماس شناور آمده است:

اگر سایتتون المنتوری هست روش زیر یکی از بهترین روش ها برای افزودن دکمه تماس شناور در وردپرس است با این روش شما نیازی به نصب افزونه اضافی هم ندارید.

نکته :

1. وارد بخش فوتر شوید:

• اگر فوترتون رو با المنتور طراحی کردید وارد بخش فوتر بشید

1. اضافه کردن المنت دکمه:

• در پنل سمت چپ، المان “دکمه” یا “Button” را به صفحه بکشید و رها کنید.

1. تنظیمات دکمه:

• در پنل سمت چپ، تنظیمات دکمه را تغییر دهید.
• در بخش “تنظیمات لینک”، در قسمت URL، شماره تلفن خود را به صورت “tel:+1234567890” وارد کنید.

1. تنظیمات تماس شناور:

• در تنظیمات المنت دکمه، به بخش “تنظیمات پیشرفته” بروید.
• در بخش موقعیت عرض رو روی حالت auto قرار دهید
• جایگاه رو روی ثابت تنظیم کنید
• و با جهت عمودی و جهت افقی موقعیت آیکون رو در سمت راست یا چپ صفحه سایت تنظیم کنید.

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

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

2-استفاده از ابزارهای قالب:

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

3-استفاده از کدنویسی:

اگر می‌خواهید به صورت دستی اضافه کردن دکمه تماس در وردپرس را اضافه کنید، می‌توانید یک دکمه تماس با استفاده از کد HTML و CSS ایجاد کنید. مثال زیر یک دکمه تماس ساده را نمایش می‌دهد:

<a href="tel:+1234567890" class="call-button">تماس با ما</a>

حالا با استفاده از CSS، می‌توانید استایل دکمه را تغییر دهید:

.call-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.call-button:hover {
    background-color: #45a049;
}

کد فوق یک لینک است که با کلیک بر روی آن، تماس تلفنی شما را شروع می‌کند. می‌توانید این کد را در بخش HTML یا یک ویرایشگر کد در قالب خود وارد کنید. همچنین، می‌توانید کد CSS را در قسمت سفارشی‌سازی (Customizer) یا فایل استایل قالب خود اعمال کنید.

4-اضافه کردن دکمه تماس شناور در وردپرس با کدنویسی

برای ساخت یک دکمه تماس شناور در وردپرس با کدنویسی، شما می‌توانید از کد HTML، CSS، و JavaScript استفاده کنید. در ادامه، یک مثال از چگونگی ایجاد یک دکمه تماس شناور آورده شده است:

1. افزودن کد HTML:
   • با یک ویرایشگر کد یا از قسمت “ویرایشگر تم” در پیشخوان وردپرس، به فایل header.php یا footer.php قالب خود بروید. بستگی داره کجا بخواهید دکمه تماس رو اضافه کنید حالا ما برای بخش فوتر آموزش می دهیم.
   • پس از باز کردن فایل header.php، کد HTML زیر را در مکانی که می‌خواهید دکمه نمایش داده شود، اضافه کنید

<div id="floating-button">
    <a href="tel:+1234567890">
        <span class="icon">📞</span>
    </a>
</div>

1. در اینجا، شماره تلفن به صورت tel:+1234567890 قرار داده شده است. شما باید این شماره را با شماره تلفن واقعی خود جایگزین کنید.
2. افزودن کد CSS:
   • حالا باید استایل دکمه را تنظیم کنیم. برای این کار، کد CSS زیر را به قالب خود اضافه کنید. می‌توانید این کد را در یک فایل style.css جدید نیز قرار دهید.

#floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007BFF;
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    cursor: pointer;
}

#floating-button a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

#floating-button .icon {
    font-size: 24px;
}

1. این کد CSS، استایل دکمه تماس شناور را تنظیم می‌کند.
2. افزودن کد JavaScript:
   • حالا برای افزودن حرکت به دکمه، کد JavaScript زیر را به فایل footer.php قالب خود اضافه کنید

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var button = document.getElementById('floating-button');
        window.onscroll = function () {
            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
                button.style.opacity = "1";
            } else {
                button.style.opacity = "0";
            }
        };
    });
</script>

1. این کد باعث می‌شود تنها زمانی که کاربر به پایین صفحه حرکت کرده باشد دکمه تماس نمایش داده شود.
2. ذخیره تغییرات و تست:
   • تغییرات را در فایل‌ها ذخیره کنید و سپس صفحه خود را بارگذاری مجدد کنید.

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

5-افزودن دکمه تماس در وردپرس با افزونه های دیگر

افزونه های دیگری نیز برای اضافه کردن دکمه تماس در المنتور وجود دارد که در اینجا می خواهیم چند نمونه آنها را معرفی کنیم. و یکیش رو یک آموزش کوتاه می دهیم.

اولین افزونه ای که می تونید از آن برای اضافه کردن دکمه تماس در وردپرس استفاده کنید افزونه WP Call Button است و افزونه دوم برای افزودن دکمه تماس در وردپرس افزونه Call Now Button است بنابراین بهترین افزونه هایی که می تونید برای اضافه کردن دکمه تماس در وردپرس استفاده کنید افزونه های زیر است.

• Call Now Button
• WP Call Button

آموزش افزونه Call Now Button

این روش برای اضافه کردن دکمه تماس در وردپرس بسیار ساده است و برای همه کاربران توصیه می‌شود. افزونه “Call Now Button” به شما این امکان را می‌دهد که به راحتی یک دکمه تماس تلفنی را در ویرایشگر گوتنبرگ، ویرایشگر کلاسیک، ویجت نوار کناری وردپرس، و حتی یک دکمه تماس شناور در سایت ایجاد کنید.

اولین قدمی که باید بردارید، نصب و فعال‌سازی افزونه Call Now Button در سایت است. به راحتی افزونه مورد نظر را از مخزن وردپرس جستجو کنید و سپس آن را فعال کنید.

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

برای فعال‌سازی افزونه، در بخش “Button status”، گزینه “Enabled” را انتخاب کنید. در بخش “Phone number” شماره تماس خود را وارد کنید و در بخش “Button text” نام آیکن دکمه تماس تلفنی را مشخص کنید. در نهایت، تغییرات را ذخیره کنید.

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

در ادامه، توضیحات بیشتری در مورد تنظیمات افزونه در بخش‌های مختلف آورده شده است:

• Button color (شماره 1): این گزینه به شما این امکان را می‌دهد که رنگ دکمه تماس تلفنی را تغییر دهید.
• Position (شماره 2): موقعیت قرارگیری دکمه تماس تلفنی را در سایت خود مشخص کنید، چپ، راست، وسط و …
• Click tracking (شماره 3): با استفاده از این قابلیت می‌توانید از سرویس گوگل آنالیتیکس برای دریافت آمار کلیک روی دکمه تماس تلفنی آگاه شوید.
• Limit appearance (شماره 4): نمایش دکمه تماس تلفنی را در صفحات مختلف محدود نمایید، برای این کار کافی است ای دی صفحه مورد نظر را در فیلد مشخص شده وارد نمایید.
• Limit to these posts and pages: اگر این گزینه را انتخاب کنید، دکمه تماس تلفنی فقط در صفحات انتخاب شده نمایش داده خواهد شد.
• *Exclude these posts and pages: اگر این گزینه را انتخاب کنید، دکمه تماس تلفنی به جز صفحات انتخاب شده در سایر صفحات نمایش داده می‌شود.

• Button size (شماره 5): این گزینه به شما این امکان را می‌دهد که سایز دکمه تماس تلفنی را تغییر دهید.
• Order (شماره 6): با استفاده از این گزینه می‌توانید تعیین کنید که دکمه تماس تلفنی بالاتر یا پایین‌تر از سایر دکمه‌ها مانند چت و … قرار گیرد یا خیر.
• Back to old button design (شماره 7): با فعال کردن این گزینه می‌توانید از طرح قبلی افزونه برای دکمه تماس تلفنی استفاده کنید، اما پیشنهاد می‌شود این گزینه را فعال نکنید.

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