حدد2

يضيف الحقل Select2 نسخة منسدلة قابلة للبحث إلى عنصر واجهة مستخدم مخصص تم إنشاؤه باستخدام الإضافات الرئيسية منشئ القطعة. يكتب المحررون لتصفية القائمة، ومع تشغيل Show Multiple يمكنهم اختيار عدة خيارات في وقت واحد. استخدمه لقوائم الخيارات الطويلة أو لاختيارات نمط العلامة حيث لا تكون إجابة واحدة كافية.

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

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

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

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية لـ Elementor وMaster Addons Pro، وكلاهما نشط. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Portfolio Card” مع حقل نص لعنوان المشروع وحقلين Select2: نوع المشروع (اختيار واحد) وعلامات المشروع (عدة اختيارات).

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

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

يبدأ حقل Select2 الجديد بتشغيل Show Multiple وثلاثة خيارات عينة (value-1 إلى value-3). استبدلها بنفسك قبل كتابة القالب.

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

إليك حقل نوع المشروع، الذي تم إعداده لاختيار واحد:

• ملصق هو النص الموجود بجوار عنصر التحكم في Elementor، على سبيل المثال “Project Type”.
• اسم هو المعرف الفريد للحقل (الحروف والأرقام والشرطات السفلية فقط). وهو أيضًا الرمز المميز الذي تستخدمه في القالب، لذا project_type يصبح {{project_type}}.
• وصف يظهر تحت عنصر التحكم في Elementor. استخدمه للحصول على تلميح قصير مثل “Choose one class.”
• عرض متعددة؟ التبديل بين اختيار واحد (لا) والعديد من الاختيارات (نعم). يؤدي هذا إلى تغيير ما يتلقاه القالب الخاص بك، لذا قرر قبل كتابة HTML.
• خيارات هي قائمة الاختيارات. المربع الأيسر هو المفتاح الذي يحصل عليه القالب الخاص بك (branding, web). المربع الأيمن هو محرر التسمية انظر (العلامة التجارية، تصميم الويب). استخدم رمز الزائد لإضافة صف والصليب الأحمر لإزالة واحد.
• القيمة الافتراضية هو ما يتم تحديده عند إضافة عنصر واجهة المستخدم لأول مرة إلى الصفحة. في الوضع الفردي يكون منسدلًا عاديًا. إذا تركته فارغًا، فسيتم تحديد الخيار الأول.

تستخدم علامات المشروع نفس الخيارات مع تشغيل Show Multiple. يصبح مربع القيمة الافتراضية منتقي العلامات، لذا يمكنك تحديد أكثر من خيار مسبقًا. اتركه فارغًا وتم تحديد الخيار الأول مسبقًا.

إذا كانت قائمة القيمة الافتراضية لا تزال تعرض خيارات العينة القديمة بعد تحرير الخيارات، فانقر فوق حفظ الإعدادات وافتح الحقل مرة أخرى.

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

استخدم قيم Select2 في القالب الخاص بك #

تعتمد كيفية طباعة القيمة على إظهار متعدد.

الوضع الفردي: طباعة المفتاح #

يعمل Select2 واحد مثل أي رمز مميز آخر. {{project_type}} طباعة المفتاح المحدد، حتى تتمكن من استخدامه كنص أو إنشاء فئة CSS منه

<article class="portfolio-card type-{{project_type}}">
  <span class="card-type">{{project_type}}</span>

مع تحديد العلامة التجارية، يتم عرض ذلك type-branding و branding. يمكنك أيضًا مقارنتها: {% if project_type == 'web' %}...{% endif %}.

الوضع المتعدد: حلقة فوق المفاتيح #

يحتوي Select2 المتعدد على قائمة، و {{project_tags}} لا يطبع شيئًا من تلقاء نفسه. حلقة فوقها بدلا من ذلك:

<ul class="card-tags">
  {% for tag in project_tags %}
    <li class="card-tag">{{ tag }}</li>
  {% endfor %}
</ul>

يتم تشغيل الحلقة مرة واحدة لكل خيار تم اختياره، بالترتيب الذي اختاره المحرر. داخله، {{ tag }} هو مفتاح واحد، والمرشحات مثل {{ tag|upper }} اعمل ايضا. ال دليل بناء جملة غصين يسرد كل ما يدعمه محرك القالب.

تسرد لوحة التوثيق الموجودة بجوار محرر التعليمات البرمجية رمزًا مميزًا لكل حقل. نسخ {{project_tags}} من هناك جيد للحقول الفردية، ولكن الحقل المتعدد لا يزال بحاجة إلى الحلقة.

انقر حفظ الإعدادات عند الانتهاء من القالب.

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

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

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

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

يتم تحديث اللوحة القماشية على الفور. لاحظ أن اللوحة تعرض الملصقات (تصميم الويب، وسائل التواصل الاجتماعي) بينما تقوم البطاقة بطباعة المفاتيح (web, social):

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

{% for tag in project_tags %}
  <li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}

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

• العلامات أو الخدمات على المحفظة ودراسة الحالة وبطاقات الفريق.
• منتقي الفئة أو النمط الذي يضيف فئة CSS، مثل type-web.
• قوائم طويلة مثل البلدان أو الصناعات أو مجموعات الأيقونات، حيث يحفظ البحث التمرير.
• قوائم الميزات الخاصة ببطاقات الأسعار أو المنتجات، مكررة في عناصر القائمة.

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

• قرر عرض متعدد أولاً. تبديله لاحقًا يعني التغيير {{field}} إلى حلقة، أو العكس.
• اكتب المفاتيح بأحرف صغيرة بدون مسافات (social, web). وينتهي بهم الأمر في أسماء الفئات والمقارنات.
• لا تقم بإعادة تسمية المفاتيح بعد استخدام الأداة. الصفحات التي حفظت المفتاح القديم بالفعل لن تتطابق مع المفتاح الجديد.
• قم بتصميم الإخراج باستخدام المفتاح، على سبيل المثال .type-web .card-type { ... }.
• للحصول على عدد قليل من أزرار الأيقونات بدلاً من القائمة المنسدلة، استخدم اختر الحقل.

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

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

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