رقم

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

يدعم حقل الرقم شروط لإظهار أو إخفاء عنصر التحكم بناءً على حقل آخر، ويتم عرض الرمز المميز الخاص به من خلال المنشئ محرك قالب بناء جملة الغصين، حيث تشبه المقارنات الرقمية {% if price > 0 %} العمل خارج الصندوق. يغطي كلا الدليلين الإعداد والقيود.

تتصل القيمة بعنصر واجهة المستخدم الخاص بك من خلال رمز القالب. يكتب {{ your_field_name }} في لوحة HTML أو CSS أو JS ويتم طباعة الرقم هناك في وقت العرض. يمكن لعنصر تحكم واحد أن يؤدي إلى سلوك الترميز والتصميم والبرنامج النصي في نفس الوقت.

ماذا يفعل حقل الرقم #

• يعرض إدخالاً رقميًا في لوحة Elementor الخاصة بعنصر واجهة المستخدم، باستخدام أسهم المتصفح الدوارة.
• يفرض نطاقًا من خلال دقيقة, الأعلى، و خطوة الخيارات التي تحددها في المنشئ.
• يخرج رقمًا عاديًا أينما تضعه {{ token }} في لوحة HTML أو CSS أو JS.
• يعمل في المقارنات، لذلك يمكن للقالب أن يتفرع مع {% if my_number > 3 %}.
• يدعم آلية محددات Elementor كسلك بديل، ويكتب القيمة مباشرة في قاعدة CSS.

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

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو دائري شعار العميل حيث تم تسمية حقل الرقم logos_per_slide يتحكم في عدد الشعارات التي تظهر في وقت واحد.

كيفية إضافة حقل رقم #

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

تم شرح خيارات حقل الرقم #

• ملصق: النص الموضح بجوار الإدخال في Elementor، على سبيل المثال “Logos Per Slide”.
• اسم: المعرف الفريد الذي تشير إليه قوالبك. الحروف والأرقام والتسطير فقط، على سبيل المثال logos_per_slide.
• الافتراضي: الرقم الذي تبدأ به الأداة عند انخفاض جديد.
• العنصر النائب: تلميح النص الموضح بينما يكون الإدخال فارغًا.
• الحد الأدنى / الحد الأقصى: أدنى وأعلى القيم التي يقبلها الإدخال.
• خطوة: الزيادة التي تتحرك بها الأسهم الدوارة، على سبيل المثال 1 للأعداد الصحيحة أو 0.5 لنصف خطوات.
• وصف: نص مساعد اختياري تحت السيطرة.
• إظهار التسمية، كتلة التسمية، الفاصل: يتم تبديل العرض القياسي، بالإضافة إلى شروط عرض الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.

قم بتوصيل حقل الرقم بالرمز المميز الخاص به #

حقل الرقم هو حقل رمزي. أينما {{ logos_per_slide }} تظهر في اللوحة، وتطبع القيمة الحالية مكانها. تقبله اللوحات الثلاث

<!-- HTML panel -->
<div class="logo-track" data-count="{{ logos_per_slide }}">

/* CSS panel */
.logo-track { grid-template-columns: repeat({{ logos_per_slide }}, 1fr); }
.logo-item { min-width: {{ logo_min_width }}px; }

// JS panel
var perSlide = {{ logos_per_slide }};

شيء واحد يفشل بصمت هنا: حقل فارغ يطبع سلسلة فارغة، و repeat(, 1fr) غير صالح لـ CSS، لذلك يسقط المتصفح القاعدة بأكملها دون شكوى. إذا قام الرمز المميز بتغذية تعبير CSS أو JS، فقم بتعيين افتراضي حتى لا يتم عرض عنصر واجهة مستخدم جديد أبدًا مع وجود ثقب فيه.

نظرًا لأن القيمة عبارة عن رقم، فإن المقارنات تعمل في منطق القالب. يمكن للدوامة تخطي أسهم التنقل الخاصة بها عندما يكون كل شيء مناسبًا بالفعل لشريحة واحدة

{% if logos_per_slide > 4 %}
<button class="logo-nav">&rarr;</button>
{% endif %}

يدعم الحقل أيضًا عنصر Elementor محددات الأسلاك كبديل. لاحظ أنه بالنسبة للرقم، يقوم Elementor بإدخال القيمة المجردة بدلاً من الإعلان الكامل، لذلك يجب أن يوضح إدخال المحددات الخاصية بأكملها، على سبيل المثال width: {{VALUE}}px;.

احترس: عندما يهبط الرمز المميز داخل تعبير CSS أو JS، ضع الوحدة خارج الأقواس. width: {{ logo_min_width }}px يعمل؛ توقع أن يحمل الحقل وحدته الخاصة لا يحدث ذلك، لأن القيمة عبارة عن رقم مكشوف. إذا كنت بحاجة إلى أن يختار المحرر الوحدة أيضًا، فإن حقل Slider هو الأفضل.

استخدم عنصر التحكم في الرقم في Elementor #

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

حالات الاستخدام الشائعة #

• عدد الأعمدة والعناصر مطبوعة في شبكة CSS أو قاعدة مرنة.
• إعدادات دائري مثل الشرائح لكل عرض أو تأخير التشغيل التلقائي، التي تقرأها لوحة JS.
• قيم البكسل والنسبة المئوية حيث يتم تثبيت وحدة واحدة بواسطة عنصر واجهة المستخدم، مثل عرض الوحدة الثابتة أو الفجوة.
• التقييمات والنتائج أن القالب يقارن مع العتبات.
• حدود مثل “show على معظم منشورات N، يتم تمريرها إلى البرنامج النصي لعنصر واجهة المستخدم.

نصائح للعمل مع حقل الرقم #

• تعيين الحد الأدنى والحد الأقصى. سيؤدي عدد الأعمدة الذي يبلغ 0 أو 40 إلى كسر معظم التخطيطات؛ يعد تحديد المدخلات في المنشئ أرخص من حمايتها في القالب.
• مطابقة الخطوة لمعنى القيمة. تحصل على العناصر بأكملها 1؛ تحصل على قيم نمط العتامة 0.1.
• شحن افتراضي معقول لذا فإن الأداة تعرض بشكل صحيح لحظة إسقاطها.
• قارن بالأرقام وليس التسميات. {% if logos_per_slide > 4 %} منطق القالب صالح؛ لا توجد تسمية خيار للمقارنة هنا، على عكس أ حدد الحقل.
• الإعلانات الكاملة في إدخالات المحددات. إذا قمت بتوصيل الحقل من خلال خيار المحدد بدلاً من الرمز المميز، فاكتب الخاصية الكاملة، نظرًا لأن Elementor يقوم بإدخال القيمة المجردة للرقم فقط.

الأسئلة المتداولة #

إلتحاق بالركب #

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