إضافة 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 غير مفلتر، وهو ما يمكن للمسؤولين نشره افتراضيًا.
- في لوحة المعلومات الخاصة بك، انتقل إلى Master Addons، وافتح علامة التبويب "الامتدادات"، وقم بتشغيل Custom JS واحفظها.
- تحرير الصفحة باستخدام Elementor.
- بالنسبة للصفحة بأكملها، افتح إعدادات الصفحة، ثم Advanced، ثم Custom JS. لعنصر واحد، حدده وافتح علامة التبويب "متقدم".
- الصق الكود الخاص بك بدون علامات <script>.
- قم بتحديث الصفحة واختبرها على عنوان 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 المخصصة
متى يجب أن أستخدم هذا بدلاً من عنصر واجهة مستخدم HTML أو وظائف السمة الخاصة بي.php؟
استخدمه للبرامج النصية التي تنتمي إلى صفحة واحدة أو عنصر واحد، مثل الآلة الحاسبة أو تأثير التمرير أو حدث النقر. بالنسبة للتعليمات البرمجية التي تحتاجها كل صفحة، يعد الخيار على مستوى الموقع مثل السمة الخاصة بك أو البرنامج الإضافي لمقتطفات التعليمات البرمجية بمثابة منزل أفضل. تعمل أداة HTML أيضًا، ولكن ينتهي الأمر بالبرامج النصية متناثرة عبر اللوحة القماشية ويسهل تفويتها لاحقًا.
هل تم تصغير الكود أو تحسينه للأداء؟
لا. تتم إضافة الكود أثناء كتابته، لذا احتفظ به قصيرًا ومرتبًا. التغيير الوحيد الذي تجريه Master Addons هو تبديل الكلمة الأساسية المحددة في التعليمات البرمجية على مستوى العنصر لفئة CSS الخاصة بهذا العنصر.
ماذا يحدث إذا كتبت جافا سكريبت مكسورة؟ هل سيكسر صفحتي بأكملها؟
يمكن. يمكن أن يؤدي خطأ في بناء الجملة إلى إيقاف تشغيل البرامج النصية الأخرى الموجودة على تلك الصفحة. اختبر التعليمات البرمجية الموجودة في وحدة تحكم المتصفح أولاً، وجربها على موقع مرحلي إذا كانت الصفحة مهمة.
هل يمكنني استخدام هذا مع البيانات الديناميكية أو متغيرات Elementor؟
مباشرة، وليس داخل حقل JS نفسه. ومع ذلك، يمكنك كتابة JavaScript يتفاعل مع العناصر الموجودة في الصفحة التي يتم ملؤها بالبيانات الديناميكية. على سبيل المثال، يمكنك كتابة برنامج نصي يقرأ النص من عنوان مملوء ديناميكيًا. ستستخدم محددات JavaScript عادية لاستهداف تلك العناصر.

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

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

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

أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة


