حدد2

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

مثل التحديد العادي، يتم توصيل قيم خيار Select2 مباشرة شروط لإظهار أو إخفاء عناصر التحكم الأخرى، وفي محرك قالب بناء جملة الغصين ل {% if %} التحقق من العلامات الخاصة بك. يغطي كلا الدليلين الإعداد والقيود.

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

ما يفعله الحقل Select2 #

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

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

قبل أن تبدأ #

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

كيفية إضافة حقل Select2 #

يجد حدد2 في لوحة الحقول الموجودة على يسار محرر Widget Builder. إنه موجود مع حقول الاختيار الأخرى.

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

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

• ملصق: النص الموضح بجوار عنصر التحكم في Elementor، على سبيل المثال “Categories”.
• اسم: المعرف الفريد للحقل والحروف والأرقام والتسطير فقط، على سبيل المثال selected_tags.
• خيارات: الاختيارات كأزواج مفاتيح وتسمية. المفاتيح هي الرخويات التي يراها القالب الخاص بك (branding, web)؛ التسميات هي الكلمات الموجودة في القائمة المنسدلة.
• متعدد: مفتاح الوضع. إيقاف التشغيل، يختار المستخدم خيارًا واحدًا. عند التشغيل، يقبل عنصر التحكم عدة اختيارات وتصبح القيمة عبارة عن مجموعة من المفاتيح.
• الافتراضي: المفتاح، أو المفاتيح، التي يتم تحديدها عند ظهور الأداة لأول مرة على الصفحة.
• الوصف، إظهار التسمية، الفاصل: إعدادات العرض القياسية، بالإضافة إلى الشروط الموضحة لإظهار الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.

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

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

<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}

في الوضع المتعدد، القيمة هي مجموعة من المفاتيح، وسهل {{ selected_tags }} لا يطبع شيئا مفيدا. يجب أن يتكرر القالب:

<div class="card-tags">
  {% for tag in selected_tags %}
  <span class="tag tag--{{ tag }}">{{ tag }}</span>
  {% endfor %}
</div>

• selected_tags هو اسم الحقل.
• tag هو متغير حلقة تخترعه؛ نسميها أي شيء.
• الكتلة بين {% for %} و {% endfor %} تتم الطباعة مرة واحدة لكل مفتاح تم اختياره، بالترتيب الذي تم اختياره به.

احترس من عدم تطابق الوضع. القالب المكتوب برمز مميز مكشوف يحافظ على عمل “” بعد تمكين Multiple؛ إنه يعرض فقط نقطة فارغة، لا يوجد خطأ، لا شيء في وحدة التحكم. إذا بدا أن قيمة Select2 تختفي، فتحقق مما إذا كانت قيمة Multiple قيد التشغيل وما زال القالب يتوقع مفتاحًا واحدًا. عدم التطابق هذا هو السبب في أغلب الأحيان.

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

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

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

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

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

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

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

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

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

يغطي حقل Widget Builder Select2 الوظيفتين اللتين لا تستطيع القائمة المنسدلة الأصلية القيام بهما: البحث في قوائم طويلة واختيار عدة قيم في وقت واحد. احتفظ بعقد الوضع الفردي في رأسك، ومفتاح واحد من خلال رمز مميز، وانتقل إلى ملف {% for %} قم بتكرار اللحظة التي يستمر فيها المضاعف. للحصول على اختيارات زر الأيقونة بدلاً من القوائم المنسدلة، راجع اختر الحقل. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.