صالة عرض

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

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

نظرًا لأن القيمة عبارة عن مصفوفة من الصور، فإن الاتصال بـ HTML الخاص بك عبارة عن حلقة، وليس رمزًا مميزًا. أ {% for %} تقوم الكتلة بطباعة ترميز صورتك مرة واحدة لكل صورة، بالترتيب الذي يحملها المعرض. عشر صور تعرض عشرة عناصر. أضف عنصرين آخرين من اللوحة وسيظهر عنصران آخران، دون تغيير القالب.

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

• يفتح مكتبة وسائط WordPress في وضع التحديد المتعدد من لوحة العنصر.
• يخزن مجموعة مرتبة من الصوركل يحمل له id و url.
• يغذي القالب الخاص بك من خلال أ {% for %} حلقة، تكرار واحد لكل صورة.
• يترك التخطيط لـ CSS الخاص بك: تقوم الحلقة بطباعة العناصر، وتقوم الشبكة بتغليفها.
• يدعم مجموعة الصور الافتراضية والقيم الديناميكية، حتى تتمكن القطعة من الشحن مملوءة مسبقًا.

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

قبل أن تبدأ #

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

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

ابحث عن صالة عرض الحقل الموجود في اللوحة الموجودة على يسار محرر Widget Builder، مجمعًا مع حقول الوسائط الأخرى.

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

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

• ملصق: النص الموضح أعلاه عنصر التحكم في Elementor، على سبيل المثال “Portfolio Images”.
• اسم: المعرف الفريد للحقل والحروف والأرقام والتسطير فقط. تشير حلقتك إلى هذا الاسم، على سبيل المثال portfolio_gallery.
• الافتراضي: مجموعة أولية من الصور، بحيث تحتوي الشبكة على شيء لإظهاره لحظة إسقاط الأداة.
• ديناميكي: يتيح لمجموعة الصور أن تأتي من مصدر ديناميكي بدلاً من التحديد المختار بعناية.
• الوصف، إظهار التسمية، الفاصل: إعدادات العرض القياسية، بالإضافة إلى شروط عرض الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.

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

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

<div class="portfolio-grid">
  {% for img in portfolio_gallery %}
  <figure class="portfolio-cell">
    <img src="{{ img.url }}">
  </figure>
  {% endfor %}
</div>

• portfolio_gallery هو اسم الحقل.
• img هو متغير حلقة تخترعه؛ نسميها أي شيء.
• يكشف كل عنصر عن خصائصه عن طريق التدوين النقطي: {{ img.url }} لعنوان URL للملف، {{ img.id }} لمعرف المرفق.
• تتم طباعة الكتلة مرة واحدة لكل صورة، بترتيب المعرض.

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

{% if portfolio_gallery %}
<div class="portfolio-grid"> ... </div>
{% endif %}

احترس من الوصول إلى العارية {{ portfolio_gallery }} خارج العادة. في حقل الوسائط الذي يقوم الاختصار بطباعة عنوان URL؛ القيمة هنا هي قائمة الصور، ولا تصل إليها سوى الحلقة. إذا كانت شبكتك فارغة بينما تحتوي اللوحة على صور بوضوح، فستكون مفقودة {% for %} هو دائما تقريبا السبب.

يبقى التخطيط في علامة التبويب CSS. حاوية الشبكة مثل grid-template-columns: repeat(3, 1fr) يلتف مهما كان عدد الخلايا التي تنتجها الحلقة، لذا فإن اثنتي عشرة صورة تشكل أربعة صفوف دون أن يفكر القالب أو المحرر فيها.

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

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

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

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

• شبكات المحفظة والتصوير الفوتوغرافيخلية واحدة لكل صورة، شبكة CSS تتعامل مع الصفوف.
• مجموعات لايت بوكس حيث يربط كل عنصر حلقة عنوان URL بالحجم الكامل الخاص به لبرنامج نصي Lightbox.
• دائري الصورةتقوم الحلقة بطباعة الشرائح وتقوم علامة التبويب JS الخاصة بالعنصر واجهة المستخدم بتشغيل شريط التمرير.
• جدران شعار العميل تتم صيانته بواسطة مالك الموقع دون لمس الأداة.
• قبل وبعد أو معارض المشروع وهذا ينمو مع كل وظيفة منتهية.

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

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

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

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

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