Elementor هو منشئ صفحات شهير لـ WordPress، ولكن من خلال دمجه مع JavaScript، يمكنك اختراق وظائفه الأساسية لإنشاء المزيد من التفاعلية والتأثيرات المرئية المتقدمة. سيستكشف هذا الدليل الجمع بين Elementor وجافا سكريبت للارتقاء بمهاراتك في تطوير موقعك الإلكتروني وإنشاء تجربة مستخدم ديناميكية وتفاعلية. يستهدف هذا الدليل المطورين ذوي المعرفة، بما في ذلك الأمثلة البرمجية المعقدة والتقنيات المتقدمة.

الشروع في العمل

• إليمنتور برو: يقدم الإصدار الاحترافي من Elementor ميزات أكثر مرونة وخيارات تخصيص أكثر مرونة، وهي مثالية للتطوير المتقدم.
• أساسيات جافا سكريبت: سنستخدم JavaScript الفانيليا وبعض المكتبات الشهيرة لتنفيذ الرسوم المتحركة والميزات التفاعلية.
• إعداد ووردبريس: يجب أن يكون لديك موقع ووردبريس يعمل بشكل جيد مع تثبيت Elementor Pro.

هيا بنا نبدأ!

الخطوة 1: دمج جافا سكريبت مع صفحات العنصر

لا يحتوي Elementor على خيار "رمز مخصص" مباشر لإضافة JavaScript، ولكن هناك بعض الطرق الفعالة للقيام بذلك.

1. استخدام البرنامج المساعد WPCode Plugin:
   • تثبيت البرنامج المساعد WPCode Plugin: يمكنك استخدام رمز WPCode لإضافة جافا سكريبت مخصص دون تعديل القالب وظائف.php الملف.
     • انتقل إلى المكونات الإضافية > إضافة جديد في لوحة تحكم ووردبريس.
     • البحث عن رمز WPCode وانقر فوق التثبيت الآنثم تفعيل.
   • إضافة جافا سكريبت باستخدام WPCode:
     • انتقل إلى مقتطفات التعليمات البرمجية > إضافة مقتطف في لوحة تحكم ووردبريس.
     • انقر على إضافة الرمز المخصص الخاص بك (مقتطف جديد) وحدد جافا سكريبت كنوع الرمز.
     • اسم المقتطف الخاص بك: أطلق على مقتطفك اسمًا يساعدك على تحديد الغرض منه (على سبيل المثال، "البرنامج النصي لتحميل الصفحة للرسوم المتحركة").
     • إدراج كود جافا سكريبت: الصق كود JavaScript الخاص بك في محرر المقتطفات.
     • اختر الموضع: تحديد ما إذا كان سيتم تحميل البرنامج النصي في الرأس أو التذييل. بشكل عام، يُوصى بتحميل البرامج النصية في التذييل للتأكد من تحميل جميع العناصر بالفعل.
       • يضمن تحميل JavaScript في التذييل أن يكون مستند HTML بأكمله محللًا ومتاحًا، مما يقلل من فرص مواجهة الأخطاء بسبب محاولة التفاعل مع عناصر غير موجودة بعد على الصفحة.
     • تعيين قواعد الإدراج: تحديد مكان تشغيل البرنامج النصي (على سبيل المثال، الموقع بأكمله أو صفحات محددة).
     • لف JavaScript في DOMContentContentLoaded: تأكد من تشغيل الكود بعد تحميل الصفحة لمنع حدوث أخطاء.
       • يضمن ذلك توفر جميع عناصر الصفحة، مما يمنع الأخطاء الناجمة عن محاولة معالجة العناصر التي لم يتم تحميلها.
   مثال على ذلك:

document.addEventListener("DOMContentLoaded"، دالة() {
console.log("JavaScript قيد التشغيل بعد تحميل الصفحة");
});

يؤكد هذا البرنامج النصي البسيط أن JavaScript الخاص بك يعمل بشكل صحيح بعد تحميل الصفحة.

استخدام أداة HTML Widget في Elementor:

• سحب وإسقاط أداة HTML Widget: هناك طريقة أخرى لإضافة جافا سكريبت وهي استخدام أداة HTML الخاصة بـ Elementor.
  • قم بتحرير الصفحة باستخدام Elementor واسحب أداة HTML إلى الموقع المطلوب.
  • داخل الأداة، أضف كود JavaScript الخاص بك ملفوفًا في <script> العلامات.
• جافا سكريبت مضمنة: هذه الطريقة مفيدة لإضافة جافا سكريبت تنطبق على عنصر أو جزء معين من الصفحة.

مثال على ذلك:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    console.log("Inline JavaScript via HTML widget");
  });
</script>

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

الخطوة 2: إضافة التفاعل الديناميكي باستخدام JavaScript

بعد دمج JavaScript، يمكننا البدء في إضافة بعض التأثيرات الديناميكية، مثل نقرات الأزرار وتأثيرات التحويم.

1. إضافة رسوم متحركة للنقر على الزر:
   • إنشاء زر تفاعلي: أضف عنصر زر باستخدام Elementor، وامنحه فئة للاستهداف (على سبيل المثال, زر متحرك).
   • إضافة جافا سكريبت للتعامل مع أحداث النقر: استخدم JavaScript لتنفيذ حركة نقر بسيطة، مثل تغيير حجم الزر أو تغيير لونه.
   مثال على ذلك:

document.addEventEventListener("DOMContentLoaded"، دالة() {
  const button = document.querySelector(".animated-button");
  إذا (الزر) {
    button.addEventListener("انقر"، دالة(){ {
      button.style.transform = "مقياس (1.2)";
      الزر.style.backgroundColor = "#ff6347"؛ // تغيير اللون إلى الطماطم
      ضبط المهلة الزمنية(()) => {
        زر.style.stop.transform = "مقياس(1)";
        الزر.style.backgroundColor = ""؛ // عكس اللون
      }, 300);
    });
  }
});

• سيؤدي هذا الرمز إلى تكبير الزر وتغيير لونه عند النقر عليه، ثم إعادته إلى حجمه ولونه الأصليين بعد تأخير قصير.

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

إضافة تأثير التحويم إلى شبكة الصور:

• إنشاء شبكة صور: استخدم Elementor لإنشاء شبكة صور وتعيين اسم فئة لكل صورة (على سبيل المثال، صورة-شبكة-عنصر-شبكة-عنصر).
• إضافة JavaScript للتعامل مع أحداث التحويم: استخدم JavaScript لإضافة تأثيرات التحويم، مثل التلاشي للداخل والخارج، لتحسين تجربة المستخدم.

مثال على ذلك:

document.addEventEventListener("DOMContentLoaded"، دالة() {
  مستند.querySelectorAll(".image-grid-item").forEach(العنصر => {
    item.addEventEventListener("mouseenter", () => { {
      item.style.opacity = "0.7";
      العنصر.style.transfer = "عتامة 0.3 ثانية سهولة في الانتقال";
    });
    العنصر.addEventListener("mouseleave"، () => { {
      item.style.opacity = "1";
    });
  });
});

• يغير هذا الرمز عتامة كل عنصر من عناصر الصورة عندما يحوم الماوس فوقه، مما يجعل تجربة المستخدم أكثر جاذبية.

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

الخطوة 3: تحسين المؤثرات المرئية باستخدام مكتبات جافا سكريبت للرسوم المتحركة

يمكن أن تساعدك مكتبات الرسوم المتحركة JavaScript مثل GSAP في إنشاء رسوم متحركة معقدة وسلسة.

1. دمج مكتبة الرسوم المتحركة GSAP:
   • تحميل GSAP: قم بتحميل مكتبة GSAP باستخدام WPCode أو أداة HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

تحريك عناصر العنصر المتحرك باستخدام GSAP:

• إضافة رسوم متحركة GSAP: استخدم GSAP لإضافة رسوم متحركة إلى عناصر Elementor، مثل التلاشي في شبكة الصور عند تحميل الصفحة.

مثال على ذلك:

document.addEventEventListener("DOMContentLoaded"، دالة() {
  gsap.from(".image-grid-item"، {
    المدة: 1,
    التعتيم: 0,
    y: 50,
    ترنح: 0.2,
    سهولة: "power2.out"
  });
});

• سيجعل هذا الرمز كل عنصر من عناصر الصورة يتلاشى بالتتابع من الأسفل عند تحميل الصفحة، مما يخلق انتقالًا سلسًا واحترافيًا.

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

الخطوة 4: إضافة رسوم متحركة قائمة على التمرير باستخدام ScrollTrigger

مشغل التمرير هو مكون إضافي GSAP يسمح لك بتشغيل الرسوم المتحركة بناءً على إجراءات تمرير المستخدم، وهو مثالي لإنشاء تأثيرات تمرير ديناميكية.

مشغل التمرير هو مكون إضافي GSAP يسمح لك بتشغيل الرسوم المتحركة بناءً على إجراءات تمرير المستخدم، وهو مثالي لإنشاء تأثيرات تمرير ديناميكية.

1. تحميل المكون الإضافي ScrollTrigger:
   • إضافة مشغل التمرير: بعد تحميل GSAP، قم بدمج ScrollTrigger على النحو التالي:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

2. إنشاء رسوم متحركة مُشغلة بالتمرير:

إضافة تأثيرات التمرير: إنشاء رسوم متحركة يتم تشغيلها عند انتقال المستخدمين إلى أقسام محددة من صفحتك.

document.addEventEventListener("DOMContentLoaded"، دالة() {
  gsap.registerPlugin(ScrollTrigger);
  من gsap.from(".section-title", {
    scrollTrigger: {
      مشغل: ".section-title",
      البداية: "أعلى 80%"، // تبدأ الرسوم المتحركة عندما يكون عنوان القسم في العرض
      النهاية: "أعلى 30%",
      فرك: صحيح
    },
    المدة: 1.5,
    التعتيم: 0,
    y: -50,
    سهولة: "power3.out"
  });
});

• عندما يقوم المستخدمون بالتمرير إلى عنصر .section-title، سينزلق من أعلى، مما يخلق تأثيرًا مرئيًا ديناميكيًا يضيف الحياة إلى صفحتك.

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

الخطوة 5: تحسين نماذج Elementor باستخدام JavaScript مخصص

أداة النموذج في Elementor مفيدة جدًا، ولكن يمكننا إضافة المزيد من الوظائف باستخدام JavaScript، مثل التحقق من صحة النموذج أو الرسوم المتحركة بعد الإرسال.

1. مثال للتحقق من صحة النموذج:
   • إضافة التحقق من الصحة إلى حقول النموذج: استخدم JavaScript لإضافة تحقق بسيط من الصحة إلى نموذج Elementor.

document.addEventEventListener("DOMContentLoaded"، دالة() {
  gsap.registerPlugin(ScrollTrigger);
  من gsap.from(".section-title", {
    scrollTrigger: {
      مشغل: ".section-title",
      البداية: "أعلى 80%"، // تبدأ الرسوم المتحركة عندما يكون عنوان القسم في العرض
      النهاية: "أعلى 30%",
      فرك: صحيح
    },
    المدة: 1.5,
    التعتيم: 0,
    y: -50,
    سهولة: "power3.out"
  });
});

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

2. ملاحظات ما بعد تقديم الرسوم المتحركة:

• إضافة ملاحظات مرئية بعد الإرسال: إضافة تأثير الرسوم المتحركة بعد إرسال النموذج بنجاح لتحسين تجربة المستخدم.

مثال على ذلك:

document.addEventEventListener("DOMContentLoaded", function() {
  const form = document.querySelector(".elementor-form");
  إذا (النموذج) {
    form.addEventEventListener("إرسال"، دالة (حدث) {
      event.preventDefault()؛ // منع الإرسال الافتراضي لمحاكاة التعليقات
      gsap.to(النموذج، {
        المدة: 0.5,
        التعتيم: 0,
        عند الإكمال: دالة() {
          form.reset();
          gsap.to(النموذج، { المدة: 0.5، التعتيم: 1 });
        }
      });
    });
  }
});

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

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

دمج هذه الميزات في Elementor كزر دائم في Elementor

لإتاحة الوصول إلى ميزات JavaScript هذه مباشرةً داخل Elementor وإنشاء زر قابل لإعادة الاستخدام مع هذه الوظائف المدمجة، اتبع الخطوات التالية:

1. أنشئ زرًا باستخدام أداة زر Elementor Widget:
   • استخدم Elementor لإنشاء عنصر زر على الصفحة عن طريق سحب زر زر القطعة على صفحتك
   • قم بتخصيص نص الزر وحجمه ونمطه وخصائص أخرى حسب الرغبة.
   • في متقدم قم بتعيين فئة CSS فريدة للزر (على سبيل المثال, زر الإجراء المتكامل). سيتم استخدام فئة CSS هذه لتحديد الزر في JavaScript.
2. إضافة شفرة JavaScript للتعامل مع وظيفة الزر:
   • لجعل الزر تفاعليًا، نحتاج إلى إضافة شيفرة JavaScript التي تستمع إلى أحداث الزر مثل النقر أو التحويم.
   • استخدم البرنامج المساعد WPCode Plugin لإضافة JavaScript الخاص بك على مستوى العالم عبر الموقع الإلكتروني:
     • قم بتثبيت وتفعيل البرنامج المساعد WPCode Plugin من دليل إضافات ووردبريس.
     • انتقل إلى مقتطفات التعليمات البرمجية > إضافة مقتطف.
     • اختر جافا سكريبت كنوع الشيفرة وإضافة شيفرة JavaScript للتعامل مع تفاعل الزر.
     • تأكد من تحديد أن الرمز يجب أن يعمل على الواجهة الأمامية وحدد الموقع لتشغيل البرنامج النصي (يُفضَّل أن يكون في التذييل للتأكد من تحميل جميع العناصر).

مثال على الرمز:

document.addEventEventListener("DOMContentLoaded"، دالة() {
  const button = document.querySelector(".integrated-action-button");
  إذا (الزر) {
    button.addEventEventListener("انقر"، دالة() {
      // مثال: تشغيل تأثير الرسوم المتحركة على الزر عند النقر عليه
      gsap.to(زر، { المدة: 0.5، المقياس: 1.2، السهولة: "power2.out"});
      SetTimeout(()) => {
        gsap.to(زر، { المدة: 0.5، المقياس: 1 });
      }, 500);
    });
  }
});

تستمع هذه الشيفرة إلى حدث نقرة على الزر وتُشغِّل حركة باستخدام GSAP. يصل حجم الزر إلى 1.2 ضعف حجمه ثم يعود إلى حجمه الأصلي، مما يخلق تأثيرًا مرئيًا للمستخدم.

1. احفظ الزر كقطعة واجهة عامة:
   • بعد إعداد الزر واختبار عمل وظيفة JavaScript، يمكنك حفظ الزر كـ القطعة العالمية في Elementor.
   • للقيام بذلك، انقر بزر الماوس الأيمن على أداة الزر وحدد الحفظ كعالمي. امنح الأداة العامة اسمًا وصفيًا (على سبيل المثال، "زر تفاعلي مع رسوم متحركة GSAP").
   • من خلال حفظه كأداة عامة، يمكنك إعادة استخدام هذا الزر عبر صفحات مختلفة دون الحاجة إلى إعادة تكوين الإعدادات أو كود JavaScript في كل مرة.
2. اختبار الزر وتخصيصه:
   • اختبر الزر: تأكد من أن الزر يتصرف كما هو متوقع عبر الصفحات المختلفة التي يُستخدم فيها. تأكد من أن النقر على الزر يؤدي إلى تشغيل إجراءات JavaScript بشكل صحيح.
   • تخصيص الوظائف: يمكنك تحسين وظائف الزر بشكل أكبر عن طريق إضافة المزيد من ميزات JavaScript، مثل الرسوم المتحركة المخصصة، أو استدعاءات واجهة برمجة التطبيقات، أو التفاعلات مع عناصر الصفحة الأخرى.
3. اجعل الزر دائمًا مع التصميم والسلوك المخصصين:
   • يمكنك تصميم الزر باستخدام CSS مخصص إضافي مخصص. استخدم خاصية Elementor CSS مخصص أو قسم ووردبريس CSS إضافية لتطبيق أنماط فريدة على الزر.

مثال على CSS مخصص:

.زر الإجراء المتكامل {
  لون الخلفية: #ff6347;
  اللون: #fff;
  نصف قطر الحدود: 5 بكسل;
  الحشو: 15 بكسل 30 بكسل;
  الانتقال: لون الخلفية 0.3 ثانية سهولة;
}
.integrated-action-button-baction-button:hover {
  لون الخلفية: #e5533d;
}

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

document.addEventEventListener("DOMContentLoaded"، دالة() {
  const button = document.querySelector(".integrated-action-button");
  const targetElement = document.querySelector(".target-element");
  إذا كان (الزر &&عنصر الهدف) {{
    button.addEventEventListener("انقر"، دالة() {
      // تسجيل الرسالة إلى وحدة التحكم
      console.log("تم النقر على الزر، تنفيذ الإجراءات...");
      // تبديل رؤية العنصر الهدف.
      targetElement.style.display = targetElement.style.display === "لا شيء"؟ "كتلة" : "لا شيء";
    });
  }
});

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

الخاتمة

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

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