يختار

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

حدد قيم الخيار هي الوقود الطبيعي لـ شروط: يمكن أن تظهر عناصر التحكم الأخرى فقط عند اختيار خيار محدد. نفس القيم تعمل في محرك قالب بناء جملة الغصين مع الشيكات مثل {% if layout == "card" %}، لذلك يمكن لقطعة واحدة تبديل كل من اللوحة والعلامة.

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

ما يفعله الحقل تحديد #

• يقدم منسدلًا قياسيًا في لوحة Elementor، يتم استخدام نفس عناصر واجهة المستخدم الأساسية للتحكم في التحديد الأصلي.
• يحمل قيمة واحدة من مجموعة ثابتة يمكنك تعريفها على أنها أزواج المفاتيح والتسميات.
• يغذي القالب الخاص بك المفتاح المحدد، جاهز لفئات التعديل أو {% if %} كتل.
• يقود الشروط على الضوابط الأخرى، لذا فإن اختيار “Boxed” يمكن أن يكشف عن حقل لون الحدود الذي يخفيه “Minimal”.
• يدعم العلم المستجيب، السماح للمستخدم باختيار خيار مختلف لكل جهاز.

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

قبل أن تبدأ #

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

كيفية إضافة حقل تحديد #

افتح عنصر واجهة المستخدم الخاص بك في محرر Widget Builder وانظر من خلال لوحة الحقول الموجودة على اليسار. يختار يجلس مع حقول الاختيار الأخرى.

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

حدد خيارات الحقل الموضحة #

• ملصق: النص الموضح بجوار القائمة المنسدلة في Elementor، على سبيل المثال “Layout Style”.
• اسم: المعرف الفريد للحقل والحروف والأرقام والتسطير فقط. يشير القالب الخاص بك إلى هذا الاسم، على سبيل المثال layout_style.
• خيارات: الاختيارات نفسها، كل منها مفتاح بالإضافة إلى تسمية. المفتاح هو ما يتلقاه القالب الخاص بك؛ التسمية هي ما يقرأه المستخدم. إبقاء المفاتيح قصيرة وآمنة لـ CSS: boxed, minimal, outlined.
• الافتراضي: المفتاح المحدد عند ظهور الأداة لأول مرة على الصفحة. اضبطه على الإصدار الأفضل مظهرًا لديك.
• مستجيب: يضيف رمز الجهاز بحيث يمكن أن يختلف الاختيار لكل نقطة توقف.
• الوصف، إظهار التسمية، الفاصل: إعدادات العرض القياسية، بالإضافة إلى الشروط الموضحة لإظهار الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.

قم بتوصيل التحديد بالقالب الخاص بك #

يقوم التحديد بطباعة قيمته باستخدام رمز مميز عادي. هذه القيمة هي دائما مفتاح، أبدا التسمية. هناك نمطان يغطيان كل استخدام تقريبًا.

فئة المعدل. اطبع المفتاح مباشرة في سمة الفئة ودع علامة التبويب CSS تقوم بالباقي

<div class="pricing layout--{{ layout_style }}">
  ...
</div>

اختيار عروض “Boxed” layout--boxed، وقاعدة مثل .layout--boxed { border: 1px solid #e2e2e2; } يتولى المسؤولية. ثلاثة متغيرات تصبح ثلاث كتل CSS قصيرة. HTML لا يتفرع أبدًا.

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

{% if layout_style == 'boxed' %}
  <div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
  <div class="pricing-outline"> ... </div>
{% else %}
  <div class="pricing-plain"> ... </div>
{% endif %}

احترس من شيء واحد هنا: المقارنة يجب أن تستخدم المفتاح. {% if layout_style == 'boxed' %} يعمل، بينما {% if layout_style == 'Boxed Layout' %} بصمت لا يتطابق أبدًا، ولا تتلقى أي تحذير بشأن ذلك. إذا رفض الشرطي إطلاق النار، فتحقق من التهجئة الرئيسية قبل أن تشك في أي شيء آخر.

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

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

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

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

• متغيرات التخطيط مثل أنماط البطاقات المعبأة والحد الأدنى والمحددة من عنصر واجهة مستخدم واحد.
• التحويم والإعدادات المسبقة للرسوم المتحركة حيث يتم تعيين كل مفتاح إلى فئة CSS مع انتقالها الخاص.
• فرز وترتيب الاختيارات بالنسبة لعناصر واجهة المستخدم ذات نمط القائمة، الأحدث أولاً أو أبجديًا.
• ملتقطو العلامات الرئيسية يؤدي ذلك إلى تبديل h2 بـ h3 من خلال كتلة مشروطة.
• سائقي الحالة يؤدي ذلك إلى إظهار أو إخفاء مجموعات كاملة من الحقول الأخرى بناءً على المفتاح المحدد.

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

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

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

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

يقوم حقل تحديد منشئ عناصر واجهة المستخدم بتحويل المتغيرات المسماة إلى اختيار بنقرة واحدة. تحديد المفاتيح والتسميات، وطباعة المفتاح إلى فئة المعدل أو {% if %} الكتلة، وينتقل كل قرار تخطيط إلى لوحة Elementor. عندما تنمو القائمة لفترة طويلة أو لا يكون اختيار واحد كافيًا، انتقل إلى حدد الحقل2. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.