مكرر

ال مجال المكرر يحول مجموعة واحدة من عناصر التحكم إلى عدد من الصفوف حسب حاجة المستخدم. يمكنك تحديد الحقول مرة واحدة (اسم، وسعر، ووصف) ويمكن لأي شخص يقوم بتحرير عنصر واجهة المستخدم في Elementor إضافة العناصر وتكرارها وإعادة ترتيبها وإزالتها من اللوحة، تمامًا مثل أجهزة إعادة الإرسال الموجودة في قائمة الرموز الخاصة بـ Elementor أو عناصر واجهة المستخدم Testimonial Carousel. داخل الإضافات الرئيسية منشئ القطعةالمكرر هو الطريقة التي تقوم بها بإنشاء شبكات البطاقات والقوائم وقوائم الميزات وأقسام الفريق وأي شيء آخر حيث يكون عدد العناصر متروكًا لمالك الموقع، وليس لمؤلف عنصر واجهة المستخدم.

يقترن المكرر مع كلا النظامين المرافقين شروط يظهر أو يخفي عنصر التحكم في اللوحة، و محرك قالب بناء جملة الغصين يعرض صفوفه في الواجهة الأمامية مع {% for item in my_repeater %} الحلقات والرموز المنقطة مثل {{ item.title }}. يغطي كلا الدليلين الإعداد والقيود.

يعمل المكرر مع حلقة القالب في HTML الخاص بك: أ {% for %} تقوم الكتلة بطباعة العلامات الخاصة بك مرة واحدة في كل صف. ثلاثة عناصر تعرض ثلاث بطاقات؛ أضف بطاقة رابعة في اللوحة وستظهر بطاقة رابعة، دون تغيير أي رمز.

ما يفعله حقل المكرر #

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

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

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

قبل أن تبدأ #

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

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

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

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

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

• ملصق: العنوان الموضح أعلى الصفوف في Elementor، على سبيل المثال “Signature Dishes”.
• اسم: المعرف الفريد للمكرر بأكمله والحروف والأرقام والتسطير فقط. هذا هو الاسم الذي تشير إليه الحلقة الخاصة بك، على سبيل المثال signature_dishes.
• الحقول: الحقول الفرعية التي يحتوي عليها كل صف. أضف واحدًا لكل جزء من المحتوى لكل عنصر 2000 في مثال الطبق: حقل نص اسم الطبق، وحقل نص السعر، ومنطقة نص الوصف، وتحديد نمط العلامة.
• حقل العنوان: أي حقل فرعي يسمي الصف المنهار، مكتوبًا كـ {{{ dish_name }}}. الإعدادات الافتراضية للحقل الفرعي الأول، وهو ما تريده عادةً.
• الافتراضي: الصفوف التي تبدأ بها الأداة. قم بشحن عنصرين أو ثلاثة عناصر مملوءة بحيث تبدو الأداة حية عند أول قطرة.
• نص الزر: التسمية الموجودة على زر الإضافة، على سبيل المثال “Add Dish” بدلاً من “Add Item” العام.
• منع فارغة: يمنع المستخدم من حذف الصف الأخير المتبقي.
• الحد الأدنى / الحد الأقصى للعناصر: حدود اختيارية لعدد الصفوف المسموح بها أو عددها.

قم بتوصيل المكرر بـ HTML الخاص بك باستخدام حلقة #

هذا هو الجزء الذي يعمل بشكل مختلف عن كل حقل ذو قيمة واحدة المكرر ليس لديه سهل {{shortcode}}. قيمتها عبارة عن قائمة من الصفوف، لذا يقوم HTML الخاص بك بتغليف العلامات المتكررة في ملف {% for %} كتلة. داخل الحلقة، يتوفر كل حقل فرعي على متغير الحلقة:

<div class="dish-grid">
  {% for dish in signature_dishes %}
  <article class="dish-card">
    <h3>{{ dish.dish_name }}</h3>
    <span class="price">{{ dish.dish_price }}</span>
    <p>{{ dish.dish_desc }}</p>
  </article>
  {% endfor %}
</div>

• signature_dishes هو اسم المكرر.
• dish هو متغير حلقة تخترعه على الفور؛ نسميها أي شيء.
• {{ dish.dish_name }} يطبع اسم طبق هذا الصف. كل حقل فرعي يعمل بنفس الطريقة: {{ dish.<sub_field_name> }}.
• كل شيء بين {% for %} و {% endfor %} تتم الطباعة مرة واحدة في كل صف، بالترتيب الذي توجد به الصفوف في اللوحة.

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

لف أي شيء اختياري في {% if %} قم بحظر الحقول الفارغة حتى لا تترك علامات طائشة خلفك. في مثال الطبق، تحتوي كل بطاقة على شارة علامة اختيارية

{% if dish.tag_text %}
<span class="tag tag--{{ dish.tag_style }}">{{ dish.tag_text }}</span>
{% endif %}

الصف الذي يحتوي على نص علامة فارغ لا يعرض أي شارة على الإطلاق. ال {% if %} يقبل Block أيضًا المقارنات مثل {% if dish.tag_style == 'spicy' %} عندما تحتاج إلى ترميز يتغير حسب القيمة.

الوسائط وربط الحقول الفرعية #

يقوم الحقل الفرعي للصورة بطباعة عنوان URL الخاص به مباشرة، كما في <img src="{{ dish.photo }}">، ويكشف حقل URL الفرعي عن عنوانه بنفس الطريقة. تتوفر الخصائص المتداخلة مع تدوين نقطي عندما تحتاج إليها.

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

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

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

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

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

• شبكات البطاقة خدمات الشركة، أو ميزاتها، أو مستويات التسعير، أو الأطباق، أو أعضاء الفريق، صف واحد لكل بطاقة.
• القوائم وقوائم الأسعار 9 مطاعم وصالونات وصالات رياضية حيث تتغير العناصر أسبوعيًا.
• جدران الشعار وقوائم العملاء ous حقل فرعي للصورة لكل صف.
• الأسئلة الشائعة وأقسام الأكورديون ob حقل نص السؤال ومنطقة نص الإجابة لكل صف.
• الجداول الزمنية وخطوات العملية 20 صفًا مرتبًا يمكن للمستخدم سحبها إلى التسلسل.

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

• الحلقة هي الاتصال. لا يوجد {{repeater_name}} رمز قصير للطباعة من تلقاء نفسه؛ المكرر منطقي فقط في الداخل {% for %}…{% endfor %}.
• شحن الإعدادات الافتراضية الحقيقية. هناك صفان أو ثلاثة صفوف مملوءة تجعل الأداة قابلة للعرض لحظة إسقاطها، وهي تتضاعف كمثال لما يتوقعه كل حقل.
• قم بتعيين حقل العنوان. تعد الصفوف المنهارة المسماة “Margherita del Forno” أسهل بكثير في الإدارة من ثلاثة صفوف تحمل جميعها علامة “Item”.
• حراسة الحقول الاختيارية مع {% if %}. تكون الامتدادات الفارغة والأغلفة الفارغة غير مرئية حتى تكسر المسافات بينكما.
• دع CSS يتعامل مع عدد الصفوف. شبكة مع repeat(3, 1fr) يلتف العناصر الإضافية إلى صفوف جديدة من تلقاء نفسه؛ الحلقة تطبع البطاقات فقط.
• قم بتسمية الحقول الفرعية بوضوح. {{ dish.dish_price }} يقرأ بشكل أفضل في القالب من {{ dish.field_2 }}لك ولمن يرث القطعة.

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

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

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