كيفية إضافة زر واتساب الي موقع ووردبريس مجانا (بدون إضافات)

عرض سعر، أو متابعة طلب، فإن وجود وسيلة تواصل مباشرة وسهلة يمكن أن يحدث فرقًا كبيرًا. ومن أسهل الطرق لتحقيق ذلك هو دمج واتساب أو إضافة زر واتساب الي موقع ووردبريس – التطبيق الأشهر عالميًا للمراسلة – مباشرة في موقعك الإلكتروني.

في هذا المقال، سنتعلم كيفية إضافة زر واتساب الي موقع ووردبريس باستخدام كود بسيط. سيظهر الزر على شكل أيقونة واتساب في الزاوية السفلية اليمنى من كل صفحة، وعند النقر عليه، يتم فتح محادثة واتساب مباشرة مع رقمك.

هذه الطريقة مناسبة للمبتدئين والمطورين على حد سواء – دون الحاجة لأي إضافات!

لماذا تضيف واتساب إلى موقعك؟

قبل ما ندخل في تفاصيل الكود، خلينا نفهم ليه ممكن تحتاج تضيف زر واتساب:

تواصل فوري: العميل يقدر يتواصل معاك مباشرة بدون ملئ نماذج أو انتظار ردود الإيميل.
تفاعل أعلى: الناس بتثق أكتر في التطبيقات اللي بيستخدموها يوميًا زي واتساب.
ملائم للموبايل: أغلب الزوار جايين من الموبايل، وواتساب تطبيق أساسي عندهم.
زيادة التحويلات: التواصل السهل بيساعد في إقناع العميل وتنفيذ البيع.

ما الذي سنقوم بإنشائه؟

سنقوم بإضافة زر دائري يحمل شعار واتساب، يظهر بشكل دائم في الزاوية السفلية اليمنى من صفحات الموقع. عند النقر عليه، يتم فتح رابط مباشر لمحادثة واتساب مع رقم الهاتف المحدد.

مواصفات الزر:

دائري وشكله عصري
بلون واتساب الأخضر الرسمي
يحتوي على شعار واتساب
يظهر على الموبايل والكمبيوتر
بدون أي إضافات (Plugins)

الكود المستخدم

إليك الكود الذي يمكن إضافته إلى ملف functions.php الخاص بقالب ووردبريس:

// إضافة زر واتساب الي موقع ووردبريس
add_action('wp_footer', 'add_whatsapp_floating_button');
function add_whatsapp_floating_button() {
?>
<style>
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25D366;
color: white;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}

.whatsapp-float:hover {
transform: scale(1.1);
}

.whatsapp-float img {
width: 35px;
height: 35px;
}
</style>

<a href="https://wa.me/YOURNUMBER" target="_blank" class="whatsapp-float" title="تواصل معنا عبر واتساب">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp">
</a>
<?php
}

لابد من استبدال كلمة YOURNUMBER برقم واتس اب الخاص بك.

كيفية استخدام الكود

الوصول إلى ملف functions.php

من لوحة تحكم ووردبريس، اذهب إلى:

المظهر > محرر ملفات القالب
اختر القالب الفعّال حاليًا
افتح ملف functions.php

ملاحظة: يُفضل استخدام قالب فرعي (Child Theme) أو إضافة مخصصة لتجنب فقدان التعديلات بعد تحديث القالب.

لصق الكود: انتقل إلى نهاية ملف functions.php وأضف الكود أعلاه.

حفظ التغييرات: اضغط على “تحديث الملف” لحفظ التعديلات.

تجربة الزر: قم بزيارة موقعك لمعاينة الزر. يجب أن يظهر في الزاوية السفلية اليمنى. عند النقر عليه، سينتقل المتصفح إلى محادثة واتساب مع الرقم.

تخصيص الزر

يمكنك تعديل الكود بما يتناسب مع تصميم موقعك أو متطلباتك الخاصة:

تغيير المكان:

يمكنك تعديل مكان ظهور الزر بتغيير قيمة bottom أو right:

bottom: 30px;
left: 20px;

تغيير رقم الهاتف

قم بتعديل رابط wa.me ليحتوي على رقم هاتفك مع رمز الدولة، بدون علامة (+):

<a href="https://wa.me/رقمك">

استخدام أيقونة مخصصة

يمكنك استبدال رابط صورة الأيقونة برابط صورة خاصة بك، أو استخدام كود SVG مباشر داخل العنصر.

إضافة تأثيرات

لإضافة حركة إلى الزر (مثل النبض أو الاهتزاز)، يمكنك استخدام تأثيرات CSS مثل:

animation: pulse 2s infinite;
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

هل تحتاج إلى استخدام إضافة (Plugin) بدلاً من الكود؟

رغم أن الكود بسيط وخفيف، إلا أن بعض الحالات تتطلب استخدام إضافات، مثل:

إظهار الزر في أوقات محددة فقط
تقديم رسائل تلقائية أو جاهزة
استخدام واجهة WhatsApp Business API

من أبرز الإضافات المتوفرة:

الخاتمة

إضافة زر واتساب الي موقع ووردبريس تعتبر من أسهل الطرق لتحسين تجربة المستخدم و تعزيز التفاعل مع الزوار. الكود الذي قدّمناه لا يتطلب أي إضافات، ويمكن تطبيقه في دقائق معدودة.

سواء كنت تدير متجرًا إلكترونيًا، أو تقدم خدمات استشارية، أو تعمل في مجال الدعم الفني، فإن هذا الزر يمكن أن يكون وسيلة فعالة للتواصل السريع والمهني مع عملائك.