كيفية إضافة أيقونة الواتساب على الووردبريس

إضافة أيقونة الواتساب إلى الووردبريس

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين.

إضافة أيقونة الواتساب إلى موقعك الووردبريس لها العديد من الفوائد منها زيادة التفاعل مع جمهورك المحتمل, سهولة التواصل مع زبائنكم, تعزيز الثقة وبناء علاقات تساعدك في تحويل الزائرين إلى عملاء محتملين ثم إلى عملاء يشترون خدماتك ومنتجاتك.

فوائد إضافة أيقونة الواتساب على الووردبريس

  • تسهيل التواصل مع العملاء : الآن أصبح معظمنا لديه تطبيق الواتساب في هاتفه لذلك فإضافة أيقونة الواتساب للموقع ستسهل عملية التواصل مع زوارك دون الحاجة للبحث عن معلومات التواصل في موقعك.
  • تعزيز الثقة : يمكن أن يشعر العملاء بالثقة أكثر عندما يجدون وسيلة مباشرة للتواصل معكم عبر التطبيقات التي يستخدمونها بشكل يومي مثل الواتساب.
  • زيادة الزبائن والمبيعات : عندما تضع زر الواتساب في موقعك فإنك تقرب العملاء من عمليات الشراء, فيستطيع العميل أن يستفسر بسهولة عن منتجاتك وخدماتك واتخاذ قرار الشراء.

يوجد فوائد أخرى عديدة لزر الواتساب في الموقع تختلف باختلاف الموقع نفسه والهدف منه.

طرق إضافة أيقونة الواتساب على الووردبريس

يوجد عدة طرق لإضافة أيقونة الواتساب على موقعك الووردبريس سنذكر منها طريقتين :

الطريقة الأولى : إضافة أيقونة الواتساب عن طريق إضافة (plugin)

يوجد العديد من الإضافات التي تساعدك في إضافة أيقونة الواتساب على الووردبريس منها join chat و chaty وغيرهما, لا يوجد فرق كبير بين هذه الإضافات. هذه الطريقة مناسبة للأشخاص الذين ليس لهم معرفة تقنية كبيرة ولا يحسنون التعامل مع الأكواد البرمجية.

نقوم أولا بالذهاب إلى لوحة تحكم الووردبريس, نتوجه ل إضافات ثم add new plugin

نبحث بعدها عن إضافة chaty إسمها الكامل Floating Chat Widget: Contact Chat Icons, WhatsApp, Telegram Chat, Line Messenger, WeChat, Email, SMS, Call Button – Chaty.

نقوم بتنصيب الإضافة وتفعيلها بالضغط على تنصيب ثم تفعيل

بعد تفعيل الإضافة بشكل تلقائي الإضافة تفعل لنا زر الواتساب يمكننا إختيار الأيقونة المناسبة لمواقع التواصل الإجتماعي أو أيقونة الهاتف. الآن نحن نشرح الواتساب سنختار أيقونة الواتساب

نبدأ بوضع بعض المعلومات :

رقم 1 : نقوم بحذف أيقونة الهاتف لأنها تأتي مفعلة بشكل إفتراضي.

رقم 2 : نضع رقم الواتساب الخاص بنا.

رقم 3 : يمكننا تفعيل هذه الخاصية لظهور هذا النص عند الضغط على الزر.

رقم 4 : نضغط على next للإنتقال للصفحة الموالية.

ستظهر لنا الصفحة المواالية كما يظهر في هذه الصورة :

رقم 1 : نقوم بتغيير النص الموجود هنا, هذا النص سيظهر أمام أيقونة الواتساب

رقم 2 : نقوم بالضغط على هذا الزر لحفظ الإعدادات

يوجد إعدادات أخرى يمكنك تعديلها مثل حجم الأيقونة ومكانها وغير ذلك, أنا سأكتفي بهذه الإعدادات.

الطريقة الثانية : إضافة أيقونة الواتساب عن طريق إضافة أكواد برمجية

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

هذه الطريقة للأشخاص التقنيين الذين يتقنون التعامل مع الأكواد البرمجية. أيضا للأشخاص الذين يهتمون بأداء الموقع, لأن هذه الخاصية سهلة لا نحتاج أن نقوم بتثبيت عليها إضافة كاملة قد تتسبب في بطئ موقعنا قليلا.

إذا كنت تستخدم أحد القوالب الكلاسيكية المعروفة مثل astra و oceanwp فسنتبع هذه المراحل :

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

نختار ملف functions.php ثم نضيف هذا الكود التالي :

// Add the WhatsApp button HTML markup to the footer
function add_whatsapp_button() {
    ?>
    <a target="_blank" href="رابط التواصل على الواتساب" rel="noopener" class="whatsapp-button">
        <div class="whatsapp-circle">
            <img src="رابط أيقونة الواتساب" alt="WhatsApp Icon" class="whatsapp-icon">
        </div>
    </a>
    <?php
}
add_action('wp_footer', 'add_whatsapp_button');

قم بتغيير كلمة “رابط التواصل على الواتساب” بالرابط الخاص بحسابك على الواتساب يمكنك الحصولعليه من إعدادات الحساب.

قم أيضا بتغيير “رابط أيقونة الواتساب” برابط أيقونة واتساب يمكنك رفعها على موقعك الووردبريس وأخذ الرابط الخاص بها.

نتوجه الآن إلى المظهر ثم تخصيص.

بعدها نقوم بالنزول للأسفل عند تنسيقات css إضافية لإضافة تنسيقات على أيقونة الواتساب, ثم نضع الكود التالي :

/* CSS for WhatsApp Button */
.whatsapp-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 9999;

.whatsapp-circle {

    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp-icon {
    width: 30px;
    height: 30px;
}

لإضافة أيضا تأثير على الأيقونة يمكننا وضع الكود التالي :

/* CSS for WhatsApp Button */
.whatsapp-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 9999;
animation: pulse 1.5s infinite;
  box-shadow: 0 0 0 0 #42db87;
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  font-weight: normal;
  font-family: sans-serif;
  text-decoration: none !important;
  transition: all 300ms ease-in-out;
}

.whatsapp-circle {

    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp-icon {
    width: 30px;
    height: 30px;
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

كما يظهر في الصورة ستظهر معنا أيقونة الواتساب مع تأثير جميل واحترافي.

إذا كنت تستخدم قوالب الووردبريس الجديدة التي تدعم خاصية المحرر, أو كنت تستخدم القوالب والأدوات التي تسمح لك بتعديل header و footer يمكنك إضافة فقط كود html و css بدون إضافة كود php كما يلي :

كود html :

<a target="_blank" href="رابط حساب الواتساب" rel="noopener">
    <div class="floating_btn">
        <div class="contact_icon">
            <img src="رابط أيقونةالواتساب" alt="WhatsApp Icon">
        </div>
    </div>
</a>

كود css :


.floating_btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  z-index: 1000;
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

.contact_icon {
  background-color: #42db87;
  color: #fff;
  width: 60px;
  height: 60px;
  font-size:30px;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translatey(0px);
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 0 0 #42db87;
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  font-weight: normal;
  font-family: sans-serif;
  text-decoration: none !important;
  transition: all 300ms ease-in-out;
}


.contact_icon img {
    width: 30px; 
    height: 30px;
  
}

تتوجه أولا ل المظهر ثم المحرر.

ستظهر لنا واجهة نختار الأنماط ثم التذييل لتعديل footer

ستظهر لنا واجهة لتعديل footer نقوم بإضافة عنصر html مخصص في أي مكان داخل footer ثم نضع داخله كود html الموجود في الأعلى.

لإضافة أكواد css نقوم بالتوجه لأيقونة تنسيقات الموجودة في الأعلى كما يظهر في الصورة, نضغط على أيقونة المزيد, ثم نختار تنسيقات css إضافية ثم نضع كود css الموجود في الأعلى.

بهذه الطريقة سنستطيع وضع أيقونة الواتساب في الموقع يمكنك إتباع نفس الخطوات إذا كنت تستخدم elementor أو قالب يسمح لك بتعديل header و footer.

«
»

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *