إضافة JavaScript مخصص في Elementor: Page and Element Level JS

يمنحك ملحق JS المخصص، وهو جزء من Master Addons Pro، حقل JavaScript داخل Elementor. أضف تعليمات برمجية إلى صفحة كاملة من إعدادات الصفحة، أو قم بإرفاقها بعنصر واجهة مستخدم أو قسم أو حاوية واحدة من علامة التبويب المتقدمة. استخدمه للتفاعلات الصغيرة أو تعديلات النموذج أو تتبع الأحداث دون تحرير ملفات السمات أو حشو البرامج النصية في عنصر واجهة مستخدم HTML.

مساحة رمز مخصصة لكل صفحة

مساحة رمز مخصصة لكل صفحة

توقف عن حشو البرامج النصية في عناصر واجهة مستخدم HTML أو تشتيتها في ملفات عامة. يضيف هذا الامتداد حقل JS مخصصًا في Page Settings > Advanced tab. أي تعليمات برمجية تكتبها هنا تعمل فقط على هذه الصفحة أو المنشور المحدد. إنها الطريقة المنظمة للتعامل مع البرامج النصية لمرة واحدة، أو تتبع اختبار A/B، أو العناصر التفاعلية الفريدة.

  • الفصل النظيف: احتفظ بالبرامج النصية الخاصة بالصفحة معزولة عن التعليمات البرمجية الموجودة على مستوى موقعك. لا يوجد خطر لكسر الصفحات الأخرى.
  • سهولة الوصول: ابحث عن الرمز الخاص بك على الفور في إعدادات الصفحة دون البحث في لوحة الأدوات.
  • أفضل الممارسات المضمنة: يتعامل الحقل تلقائيًا $(document).ready() بالنسبة لك، حتى تتمكن من كتابة المنطق الأساسي الخاص بك مباشرة.

جافا سكريبت على مستوى الصفحة وعلى مستوى العنصر

يوجد رمز مستوى الصفحة في إعدادات الصفحة، ومتقدم، وJS مخصص، ويعمل على تلك الصفحة فقط. يوجد رمز مستوى العنصر في علامة التبويب "متقدم" لأي عنصر واجهة مستخدم أو عمود أو قسم أو حاوية. في رمز مستوى العنصر، الكلمة selector يتم تبديله لفئة CSS الخاصة بهذا العنصر، وبالتالي فإن البرنامج النصي يلمس هذا العنصر فقط.

  • لا توجد علامات <script> ولا يوجد غلاف جاهز للمستند: يتم تغليف الكود jQuery(document).ready لك و $ يعمل.
  • تتم طباعة البرامج النصية في تذييل الصفحة، بعد تحميل المحتوى.
  • يتم تشغيل التعليمات البرمجية على الصفحة المباشرة، وليس داخل معاينة محرر Elementor، لذا تحقق من الصفحة المنشورة بعد الحفظ.
  • يتم استبدال كل مثيل لمحدد الكلمات في التعليمات البرمجية على مستوى العنصر. يستخدم $('selector') بدلاً من document.querySelector هناك.

كيفية إضافة جافا سكريبت مخصصة في Elementor

تفترض هذه الخطوات أن Master Addons Pro نشط وأن دور WordPress الخاص بك يمكنه نشر HTML غير مفلتر، وهو ما يمكن للمسؤولين نشره افتراضيًا.

  1. في لوحة المعلومات الخاصة بك، انتقل إلى Master Addons، وافتح علامة التبويب "الامتدادات"، وقم بتشغيل Custom JS واحفظها.
  2. تحرير الصفحة باستخدام Elementor.
  3. بالنسبة للصفحة بأكملها، افتح إعدادات الصفحة، ثم Advanced، ثم Custom JS. لعنصر واحد، حدده وافتح علامة التبويب "متقدم".
  4. الصق الكود الخاص بك بدون علامات <script>.
  5. قم بتحديث الصفحة واختبرها على عنوان URL المباشر.

ثلاثة أمثلة JS مخصصة للعنصر

الصق أيًا منها في حقل JS مخصص وقم بتغيير أسماء الفئات لتتناسب مع صفحتك.

1. أضف فئة إلى الرأس بعد التمرير (مستوى الصفحة)

$(window).on('scroll', function () {
  $('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});

2. تبديل فئة عند النقر فوق عنصر (مستوى العنصر)

$('selector').on('click', function () {
  $(this).toggleClass('is-open');
});

3. أرسل حدث Google Analytics عند النقر فوق زر (مستوى الصفحة)

$('.cta-button a').on('click', function () {
  if (typeof gtag === 'function') {
    gtag('event', 'cta_click', { location: 'pricing' });
  }
});

مقارنة طرق إضافة JavaScript في Elementor

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

القطعة HTMLالرمز المخصص لـ Elementor Proالإضافات الرئيسية المخصصة JS
يخططعنصر مجانيإليمنتور بروماستر أدونز برو
نطاقالصفحة التي توجد عليها الأداةعلى مستوى الموقع، مع ظروف العرضصفحة واحدة، أو عنصر واحد
حيث تكتبهاداخل القطعة على القماششاشة رمز مخصص في لوحة القيادةإعدادات الصفحة، أو علامة التبويب المتقدمة للعنصر
علامات البرنامج النصيمطلوبمطلوبغير مطلوب
استهدف عنصرًا واحدًااكتب المحدد بنفسكاكتب المحدد بنفسكاستخدم الكلمة الرئيسية للمحدد

الأسئلة المتداولة لـ JS المخصصة

تعرف على الاستفسارات الأكثر طلبًا لدى المستخدمين حول Custom JS وابحث عن الإجابات في مكان واحد.
متى يجب أن أستخدم هذا بدلاً من عنصر واجهة مستخدم HTML أو وظائف السمة الخاصة بي.php؟

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

لا. تتم إضافة الكود أثناء كتابته، لذا احتفظ به قصيرًا ومرتبًا. التغيير الوحيد الذي تجريه Master Addons هو تبديل الكلمة الأساسية المحددة في التعليمات البرمجية على مستوى العنصر لفئة CSS الخاصة بهذا العنصر.

ماذا يحدث إذا كتبت جافا سكريبت مكسورة؟ هل سيكسر صفحتي بأكملها؟

يمكن. يمكن أن يؤدي خطأ في بناء الجملة إلى إيقاف تشغيل البرامج النصية الأخرى الموجودة على تلك الصفحة. اختبر التعليمات البرمجية الموجودة في وحدة تحكم المتصفح أولاً، وجربها على موقع مرحلي إذا كانت الصفحة مهمة.

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

عارض القالب
فيسبوك
تويتر
واتساب
نسخ الرابط
اشتري الان
تنبيه بسيط مخصص لـ JS
تنبيه بسيط مخصص لـ JS

عناصر واجهة المستخدم والملحقات الشائعة

إنشاء مواقع متطورة في وقت أقل.

ملحق Master Addons Glassmorphism لـ Elementor: بطاقات زجاجية بلورية مع ضبط التحكم في قيمة التمويه على 20 بكسل

التشكل الزجاجي

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

إضافات الحاويات

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

أنماط

الصفحة الرئيسية 70+ أنماط خلفية العنصر المجانية هي امتداد مجاني للإضافات الرئيسية يضيف...
عرض التفاصيل
ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]

ناسخ البريد/الصفحة

الصفحة الرئيسية الصفحات والمشاركات المكررة في منشور بنقرة واحدة/مكرر الصفحة هو سيد مجاني...
عرض التفاصيل
ملحق Master Addons Reading Progress Bar لـ Elementor: شريط أزرق مملوء بنسبة 42% في الجزء العلوي من صفحة سياسة الخصوصية، مع إعدادات التمكين والموضع والارتفاع وملء الألوان

شريط تقدم القراءة

الصفحة الرئيسية أضف شريط تقدم القراءة في WordPress (Elementor) شريط تقدم القراءة مجاني...
عرض التفاصيل