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

و لين

منذ شهرين

Elementor is a famous page builder for WordPress, but by combining it with JavaScript, you can break through its basic functionality to create even more advanced interactivity and visual effects. This guide’ll explore combining Elementor with JavaScript to elevate your website development skills and create a dynamic, interactive user experience. This guide is aimed at developers with knowledge, including complex code examples and advanced techniques.

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

إليمنتور برو: يقدم الإصدار الاحترافي من Elementor ميزات أكثر مرونة وخيارات تخصيص أكثر مرونة، وهي مثالية للتطوير المتقدم.
أساسيات جافا سكريبت: We’ll use vanilla JavaScript and some popular libraries to implement animations and interactive features.
إعداد ووردبريس: يجب أن يكون لديك موقع ووردبريس يعمل بشكل جيد مع تثبيت Elementor Pro.

Let’s get started!

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

Elementor doesn’t have a direct ‘Custom Code’ option to add JavaScript, but there are a few effective ways to do so.

استخدام البرنامج المساعد WPCode Plugin:
- تثبيت البرنامج المساعد WPCode Plugin: يمكنك استخدام رمز WPCode لإضافة جافا سكريبت مخصص دون تعديل القالب وظائف.php الملف.
  - انتقل إلى المكونات الإضافية > إضافة جديد في لوحة تحكم ووردبريس.
  - البحث عن رمز WPCode وانقر فوق التثبيت الآنثم تفعيل.
- إضافة جافا سكريبت باستخدام WPCode:
  - انتقل إلى مقتطفات التعليمات البرمجية > إضافة مقتطف في لوحة تحكم ووردبريس.
  - انقر على إضافة الرمز المخصص الخاص بك (مقتطف جديد) وحدد جافا سكريبت كنوع الرمز.
  - اسم المقتطف الخاص بك: Give your snippet a name that helps identify its purpose (e.g., “Page Load Animation Script”).
  - إدراج كود جافا سكريبت: الصق كود JavaScript الخاص بك في محرر المقتطفات.
  - اختر الموضع: تحديد ما إذا كان سيتم تحميل البرنامج النصي في الرأس أو التذييل. Generally, it’s recommended to load scripts in the التذييل للتأكد من تحميل جميع العناصر بالفعل.
    - يضمن تحميل JavaScript في التذييل أن يكون مستند HTML بأكمله محللًا ومتاحًا، مما يقلل من فرص مواجهة الأخطاء بسبب محاولة التفاعل مع عناصر غير موجودة بعد على الصفحة.
  - تعيين قواعد الإدراج: تحديد مكان تشغيل البرنامج النصي (على سبيل المثال، الموقع بأكمله أو صفحات محددة).
  - لف JavaScript في DOMContentContentLoaded: تأكد من تشغيل الكود بعد تحميل الصفحة لمنع حدوث أخطاء.
    - This ensures that all page elements are available, preventing errors caused by attempting to manipulate elements that haven’t loaded.
مثال على ذلك:

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

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

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

سحب وإسقاط أداة HTML Widget: Another way to add JavaScript is by using Elementor’s HTML widget.
- قم بتحرير الصفحة باستخدام Elementor واسحب أداة HTML إلى الموقع المطلوب.
- داخل الأداة، أضف كود JavaScript الخاص بك ملفوفًا في <script> العلامات.
جافا سكريبت مضمنة: هذه الطريقة مفيدة لإضافة جافا سكريبت تنطبق على عنصر أو جزء معين من الصفحة.

مثال على ذلك:

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

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

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

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

إضافة رسوم متحركة للنقر على الزر:
- إنشاء زر تفاعلي: أضف عنصر زر باستخدام 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 في إنشاء رسوم متحركة معقدة وسلسة.

دمج مكتبة الرسوم المتحركة 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 يسمح لك بتشغيل الرسوم المتحركة بناءً على إجراءات تمرير المستخدم، وهو مثالي لإنشاء تأثيرات تمرير ديناميكية.

تحميل المكون الإضافي 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’s form widget is very useful, but we can add more functionality with JavaScript, such as form validation or post-submission animations.

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

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

مثال تفصيلي: If you’ve created a subscription form in Elementor and assigned the class عنصر-شكل-عنصر، يضمن الرمز أعلاه أن يقوم المستخدمون بإدخال عنوان بريد إلكتروني صحيح قبل إرسال النموذج، مما يقلل من الإدخالات غير الصالحة ويضمن بيانات ذات جودة أعلى.

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 وإنشاء زر قابل لإعادة الاستخدام مع هذه الوظائف المدمجة، اتبع الخطوات التالية:

أنشئ زرًا باستخدام أداة زر Elementor Widget:
- استخدم Elementor لإنشاء عنصر زر على الصفحة عن طريق سحب زر زر القطعة على صفحتك
- قم بتخصيص نص الزر وحجمه ونمطه وخصائص أخرى حسب الرغبة.
- في متقدم قم بتعيين فئة CSS فريدة للزر (على سبيل المثال, زر الإجراء المتكامل). سيتم استخدام فئة CSS هذه لتحديد الزر في JavaScript.
إضافة شفرة JavaScript للتعامل مع وظيفة الزر:
- لجعل الزر تفاعليًا، نحتاج إلى إضافة شيفرة JavaScript التي تستمع إلى أحداث الزر مثل النقر أو التحويم.
- استخدم البرنامج المساعد WPCode Plugin لإضافة JavaScript الخاص بك على مستوى العالم عبر الموقع الإلكتروني:
  - قم بتثبيت وتفعيل البرنامج المساعد WPCode Plugin من دليل إضافات ووردبريس.
  - انتقل إلى مقتطفات التعليمات البرمجية > إضافة مقتطف.
  - اختر جافا سكريبت as the code type and add the JavaScript code to handle the button’s interaction.
  - تأكد من تحديد أن الرمز يجب أن يعمل على الواجهة الأمامية وحدد الموقع لتشغيل البرنامج النصي (يُفضَّل أن يكون في التذييل للتأكد من تحميل جميع العناصر).

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

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 ضعف حجمه ثم يعود إلى حجمه الأصلي، مما يخلق تأثيرًا مرئيًا للمستخدم.

احفظ الزر كقطعة واجهة عامة:
- بعد إعداد الزر واختبار عمل وظيفة JavaScript، يمكنك حفظ الزر كـ القطعة العالمية في Elementor.
- للقيام بذلك، انقر بزر الماوس الأيمن على أداة الزر وحدد الحفظ كعالمي. Give the global widget a descriptive name (e.g., “Interactive Button with GSAP Animation”).
- من خلال حفظه كأداة عامة، يمكنك إعادة استخدام هذا الزر عبر صفحات مختلفة دون الحاجة إلى إعادة تكوين الإعدادات أو كود JavaScript في كل مرة.
اختبار الزر وتخصيصه:
- اختبر الزر: Ensure that the button behaves as expected across different pages where it’s used. Make sure that clicking the button triggers the JavaScript actions correctly.
- تخصيص الوظائف: يمكنك تحسين وظائف الزر بشكل أكبر عن طريق إضافة المزيد من ميزات JavaScript، مثل الرسوم المتحركة المخصصة، أو استدعاءات واجهة برمجة التطبيقات، أو التفاعلات مع عناصر الصفحة الأخرى.
اجعل الزر دائمًا مع التصميم والسلوك المخصصين:
- يمكنك تصميم الزر باستخدام CSS مخصص إضافي مخصص. استخدم خاصية Elementor CSS مخصص أو قسم ووردبريس CSS إضافية لتطبيق أنماط فريدة على الزر.

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

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

يمنح مقتطف CSS هذا الزر لونًا مخصصًا وحوافًا مستديرة، ويغير اللون عند التمرير لتوفير ملاحظات مرئية.
دمج وظائف جافا سكريبت الإضافية:
- إذا كنت ترغب في إضافة وظائف أكثر تعقيدًا، مثل إرسال نموذج، أو تبديل عناصر الصفحة، أو استدعاء واجهات برمجة التطبيقات الخارجية، يمكنك توسيع شيفرة 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 وجافا سكريبت تجربة مستخدم رائعة.

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