اضافة زر واتساب للووردبريس

  • ma2500

السلام عليكم ورحمة الله وبركاته هناك عميل طلب مني اضافة زر واتساب لثيم مخصص بالووردبريس حاولت البلجنز المختلفة لم استطع بواستطها عمل ذلك النظام تم عمل الصفحات به بالحقول advanced field

هل يمكن اضافة الواتساب بارك الله فيكم

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

حاول استخدام بلجنز مثل "WP Floating WhatsApp" أو "WhatsApp Chat for WordPress" وهذه الإضافات تمكنك من إنشاء زر واتساب متحرك وثابت يظهر على الموقع بشكل جميل.

أو تستطيع إضافة زر واتساب يدويًا باستخدام الكود التالي:

<a href="https://wa.me/%D8%B1%D9%82%D9%85 هاتفك" target="_blank"><img src="URL للصورة" alt="WhatsApp"></a>

وعليك استبدال "رقم هاتفك" برقم هاتفك الذي تريد استخدامه في تلقي الرسائل على الواتساب، و "URL للصورة" برابط صورة تريدها للزر.

مرحبا اخي الغالي الزر ظهر في كل الصفحات ولم يظهر في الصفحة الرئيسية جربت هذا الكود في صفحة الاندكس اضعه صحيح ؟كيف اجعله كانما يطفوا على الصفحة ككل وليس كزر اسفل الصفحة؟؟

يعني كالبلجنز تماما؟؟

Mustafa_Suleiman أضف ردا

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

function whatsapp_button() {
    if ( !is_admin() ) { ?>
        <a href="https://wa.me/%D8%B1%D9%82%D9%85-%D9%87%D8%A7%D8%AA%D9%81%D9%83" target="_blank" id="whatsapp-button"><img src="URL للصورة" alt="WhatsApp"></a>
    <?php }
}
add_action( 'wp_footer', 'whatsapp_button' );


حيث يقوم الشرط بالتحقق من أن الزر لا يتم عرضه في واجهة المدير للموقع، ثم يضيف الزر في الجزء السفلي من الصفحة باستخدام الدالة "wp_footer"، وبإمكانك تغيير الدالة المستخدمة لإضافة الزر في حال كانت تتطلب الأمر.

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

و لإظهار الزر كعنصر يطفو فوق الصفحة بشكل دائم، يجب استخدام CSS لإنشاء عنصر ثابت ذي موقع ثابت واستخدام الخاصية "position: fixed" و "bottom" و "right" و "z-index" لتحديد موقع العنصر على الشاشة.

#whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

ويجب أن تقوم بإضافة الـ ID الذي يطابق الزر في الكود HTML الخاص بالزر الخاص بك، وتغيير الأرقام التي تتبع "bottom" و "right" لتغيير موقع الزر على الصفحة.

جزاك الله خيرا يا غالي استفدت منك كثير بارك الله فيك

يمكن استخدام بعض البلجنز المتاحة لإضافة زر واتساب إلى موقع ووردبريس بشكل أسهل وأسرع، مثل "WhatsApp Chat Button" و "WhatsApp Contact Button" و "WhatsApp Chat WP" و "WP WhatsApp Button". هذه البلجنز تقدم وظائف متنوعة وتخصيصات مختلفة لإنشاء زر واتساب جذاب ويمكن تخصيصه بشكل كامل.

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

لتثبيت أيٍ من هذه البلجنز، يجب الذهاب إلى "Plugins" ثم "Add New" في لوحة تحكم ووردبريس، والبحث عن اسم البلجن الذي تريد تثبيته. بعد تثبيته، يمكن تفعيله وتخصيص الإعدادات اللازمة لإنشاء الزر واتساب على موقعك.

. ولكن إذا كنت ترغب في إضافة الزر بنفسك دون استخدام بلجن، يمكنك اتباع الخطوات التالية:

  1. أولاً، يجب عليك إنشاء زر واتساب باستخدام رمز HTML. يمكنك استخدام الرمز التالي:
<a href="https://wa.me/%D8%B1%D9%82%D9%85 الهاتف" target="_blank" rel="noopener noreferrer"><i class="fa fa-whatsapp"></i> اتصل بنا على الواتساب</a>

يجب استبدال "رقم الهاتف" برقم هاتفك الخاص بـ WhatsApp بدون فواصل أو أحرف مثل "+966XXXXXXXXX".

  1. بعد ذلك، يجب إضافة الرمز HTML إلى موقعك على الويب. يمكنك القيام بذلك بإضافة حقل نصي مخصص إلى صفحة الويب الخاصة بك باستخدام الحقل "Text" أو "HTML" أو "Custom Field". يجب وضع الرمز HTML في هذا الحقل.

جزاك الله خير وبارك فيك شكرا حبيب