رقم

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

الرقم هو أحد الحقول التي يمكنك استخدامها في Widget Builder للإصدار المجاني. يتضمن البرنامج الإضافي المجاني أداة إنشاء عناصر واجهة مستخدم محدودة، وتأتي المجموعة الكاملة من الحقول معها ماستر أدونز برو.

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

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

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية للعنصر مثبتة ونشطة. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Stat Counter” مع حقلين من الأرقام: columns (من 1 إلى 4) في علامة التبويب المحتوى و stat_size (20 إلى 96) في علامة التبويب "النمط".

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

1. اذهب الى الإضافات الرئيسية > منشئ القطعة وافتح القطعة الخاصة بك.
2. أضف قسمًا في علامة التبويب التي ينتمي إليها الإعداد. عدد التخطيط يناسب محتوى، مقاس يناسب أسلوب.
3. يكتب number في مربع البحث الميداني على اليسار.
4. يجر رقم في القسم. انقر فوق القلم الرصاص الموجود في الحقل لفتح إعداداته.

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

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

يصل Min وMax وStep إلى الإدخال نفسه. في اختباراتنا، وصل حقل الأعمدة إلى Elementor كمدخل رقم مع الحد الأدنى 1 والحد الأقصى 4 والخطوة 1، وبالتالي تتوقف الأسهم عند نهايات النطاق.

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

اطبع الرقم في القالب الخاص بك #

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

<div class="stats-grid" data-columns="{{ columns }}">
  ...
</div>
{% if columns > 2 %}
<p class="stats-note">Tip: drop to two columns for a narrower layout.</p>
{% endif %}

لوحة CSS هي المكان الذي يكسب فيه حقل الأرقام عادةً الاحتفاظ به. ضع الوحدة خارج الأقواس، لأن الحقل يخزن رقمًا مجردًا

.stats-grid { grid-template-columns: repeat({{ columns }}, 1fr); }
.stat-value { font-size: {{ stat_size }}px; }

يعمل نفس الرمز المميز في لوحة JS، على سبيل المثال var perRow = {{ columns }};.

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

الحقل الفارغ لا يطبع شيئًا، وهذا يكسر القاعدة المحيطة به بصمت. مع مسح حقل الأعمدة، أصبح CSS الخاص بنا repeat(, 1fr)، والتي تسقط المتصفحات، وتعود الشبكة إلى عمود واحد. ال {% if columns > 2 %} توقف التحقق عن المطابقة في نفس الوقت. لا شيء في اللوحة يحذرك.

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

اترك المحدد فارغًا في حقل الرقم #

يتصرف صندوق التحديد بشكل غريب في هذا المجال، وفي اختباراتنا تسبب في مشكلتين في وقت واحد

• لقد كتب الرقم المجرد في القاعدة بدون اسم خاصية، لذلك لم يخرج منه أي CSS قابل للاستخدام.
• أثناء ملء المحدد، توقفت القيمة الافتراضية للحقل عن الوصول إلى الرمز المميز. عنصر واجهة مستخدم لم يلمسه أحد font-size:px على الواجهة الأمامية. تم إصلاح مسح المحدد، وتم عرض نفس الأداة التي لم تمسها font-size:44px.

اطبع الرمز المميز في لوحة CSS بدلاً من ذلك، كما هو موضح أعلاه. وهذا يحافظ على عمل الوضع الافتراضي ويتيح لك كتابة الخاصية والوحدة بنفسك.

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

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

إليك نفس الأداة في أربعة أعمدة وفي عمودين بحجم عدد أكبر

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

• يتم احتساب العمود أو العنصر في الشبكات والدوامات.
• أحجام الخطوط وقيم التباعد والعروض بالبكسل.
• تقييمات النجوم ودرجات المراجعة والنسب المئوية.
• يقوم بإحصاء وسرعات قراءة البرنامج النصي، مثل العناصر لكل شريحة أو تأخير التشغيل التلقائي.

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

• قم دائمًا بتعيين القيمة الافتراضية. إنه الفرق بين عنصر واجهة المستخدم العامل والقاعدة المكسورة بصمت.
• اضبط Min وMax على ما يمكن أن يأخذه التصميم. لا ينبغي للشبكة المصممة لأربعة أعمدة أن تقبل 12.
• ضع الوحدة في الملصق أو الوصف، مثل “Number Size” مع “in pixels”، نظرًا لأن الحقل يخزن رقمًا عاديًا.
• احتفظ بالوحدة خارج الرمز المميز في CSS: {{ stat_size }}px، ليس داخل الأقواس.
• هل تريد شريط تمرير يحتوي على وحدات بدلاً من ذلك؟ ال حقل المنزلق هو حقل احترافي يمنح المحررين مقبض سحب.

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

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

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