وسائط

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

مثل كل حقل Widget Builder، تدعم الوسائط شروط لرؤية اللوحة. يتم عرض رمزها المميز من خلال محرك قالب بناء جملة الغصين، الذي يطبع عنوان URL للملف تلقائيًا، لذا <img src="{{ photo }}"> يعمل فقط. كلا الدليلين يغطيان التفاصيل.

على عكس حقل النص، فإن قيمة حقل الوسائط ليست سلسلة واحدة. إنه مصفوفة تحمل الملف url, id, altوأكثر من ذلك، ويصل القالب الخاص بك إلى كل قطعة بتدوين نقطي. هناك اختصار واحد سهل الاستخدام: طباعة الحقل تمنحك عنوان URL مباشرة. وعادة واحدة تستحق البناء من اليوم الأول، وهي حماية العلامات باستخدام {% if %} لذا فإن الحقل الفارغ لا يترك أي صورة مكسورة خلفه.

ماذا يفعل مجال الإعلام #

• يفتح مكتبة الوسائط WordPress من لوحة Elementor، قم بتحميل الملفات الموجودة أو الاختيار منها.
• يخزن التحديد كمصفوفة مع url, id، و alt ومن مفاتيحها.
• طباعة عنوان URL على رمز مميز مباشر: {{ hero_image }} إخراج عنوان URL للملف كاختصار.
• يعرض كل خاصية عن طريق تدوين النقطة: {{ hero_image.url }}, {{ hero_image.id }}, {{ hero_image.alt }}.
• يمكن تصفية المكتبة حسب نوع الوسائطصورة أو فيديو أو صوت، ويدعم القيم الديناميكية.

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

قبل أن تبدأ #

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

كيفية إضافة حقل الوسائط #

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

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

شرح خيارات مجال الوسائط #

• ملصق: النص الموضح أعلاه هو المحدد في Elementor، على سبيل المثال “Hero Image”.
• اسم: المعرف الفريد للحقل والحروف والأرقام والتسطير فقط، على سبيل المثال hero_image.
• الافتراضي: ملف بداية كزوج عنوان URL ومعرف، لذلك تسقط الأداة على الصفحة التي تبدو منتهية بالفعل.
• نوع الوسائط: يقوم بتصفية ما تقدمه المكتبة، صورة أو فيديو أو صوت، مما يمنع المحررين من توصيل mp3 بعلامة img.
• ديناميكي: يتيح للقيمة أن تأتي من مصدر ديناميكي بدلاً من اختيار ثابت.
• الوصف، إظهار التسمية، الفاصل: إعدادات العرض القياسية، بالإضافة إلى شروط عرض الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.

قم بتوصيل حقل الوسائط بالقالب الخاص بك #

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

<img src="{{ hero_image }}">

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

<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
<!-- {{ hero_image.id }} holds the attachment ID -->

الآن العادة التي تفصل بين عناصر واجهة المستخدم المرتبة وعناصر واجهة المستخدم ذات الأيقونة المكسورة: الحارس الفارغ. حقل الوسائط الذي لا يحتوي على أي شيء محدد يعرض سمات فارغة، و <img src=""> يظهر كصورة مكسورة. لف العلامات:

{% if hero_image.url %}
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
{% endif %}

يعمل الحقل في علامة التبويب CSS أيضًا. فتحة الخلفية عبارة عن سطر واحد:

.hero-banner {
  background-image: url('{{ hero_image }}');
}

احترس من مرور النص البديل دون أن يمسه أحد. {{ hero_image.alt }} يطبع كل ما تحتفظ به مكتبة الوسائط، والمكتبات مليئة بالصور ذات الحقول البديلة الفارغة. يحتفظ الحارس بالسمة الموجودة لكنه لا يستطيع اختراع النص. تستحق الأدوات المصممة للعملاء ملاحظة تطلب من المحررين ملء النص البديل في المكتبة.

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

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

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

تبديل الصورة لاحقًا هو نفس النقرة. تؤدي إزالته إلى إفراغ القيمة، وهذا هو الحال تمامًا {% if %} أغطية الحراسة.

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

• صور البطل واللافتة، كعلامة img أو خلفية CSS.
• الصور الرمزية ولقطات الرأس في الشهادة وعناصر واجهة المستخدم للفريق.
• الشعارات في عناصر واجهة المستخدم الرأسية والتذييلية وشريط العميل.
• الصور المصغرة للبطاقة حيث يحتوي كل مثيل عنصر واجهة مستخدم على صورة واحدة.
• خلفيات القسم الزخرفية تعيين من خلال background-image في علامة التبويب CSS.

نصائح للعمل في مجال الإعلام #

• احرس دائمًا {% if hero_image.url %}. يعرض الحقل غير المحدد بخلاف ذلك src فارغًا وأيقونة صورة مكسورة.
• طباعة البديل. alt="{{ hero_image.alt }}" لا يكلف شيئًا ويحمل النص البديل للمكتبة إلى ترميزك.
• استخدم الرمز المميز المباشر لخلفيات CSS. url('{{ hero_image }}') يبقي علامة التبويب CSS قابلة للقراءة.
• تعيين صورة افتراضية. الأداة التي تسقط على الصفحة مع صورة حقيقية تبيع نفسها بنفسها؛ العنصر النائب الرمادي لا.
• تصفية مع نوع الوسائط. إذا كانت الفتحة عبارة عن صورة، فقل ذلك، ولن تقدم المكتبة مقاطع فيديو.
• تذكر أن الاختصار هو عنوان url فقط. أي خاصية أخرى غير عنوان URL تحتاج إلى تدوين نقطي؛ لا يوجد اختصار ل id أو alt.

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

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

يعد حقل Widget Builder Media بمثابة العمود الفقري للصورة الواحدة. منتقي المكتبة في اللوحة، واختصار URL في القالب، وتدوين النقطة لـ id و altو {% if %} واقف بين عنصر واجهة المستخدم الخاص بك وأيقونة الصورة المكسورة. عندما تصبح صورة واحدة كثيرة، انتقل إلى مجال المعرض وحلقتها. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.