أيقونات

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

مثل كل حقل Widget Builder، يدعم عنصر تحكم الأيقونات شروط، مفيد لإظهار المنتقي فقط عند تشغيل مفتاح تبديل “enable، ويتم عرض مخرجاته من خلال محرك قالب بناء جملة الغصين. يغطي كلا الدليلين التفاصيل والقيود.

القيمة عبارة عن مصفوفة بمفتاحين value و library. هذا الشكل له نتيجة تستحق الإشارة إليها مقدمًا: طباعة الحقل مباشرة باستخدام {{ my_icon }} لا يخرج شيئا على الإطلاق. يتم أيضًا عرض أيقونات الخطوط وSVGs التي تم تحميلها من خلال علامات مختلفة، لذلك يحتاج القالب إلى فرع قصير. كلا النموذجين أدناه، جاهزان للصق.

ما يفعله حقل الأيقونات #

• يفتح منتقي مكتبة أيقونات Elementor باستخدام Font Awesome والمكتبات المخصصة وتحميل SVG.
• يخزن الاختيار كمصفوفة من value و library.
• يحمل سلسلة فئة لأيقونات الخطوط: value هل فئة الأيقونة جاهزة لـ <i> بطاقة تعريف.
• يحمل مصفوفة ملفات متداخلة لـ SVGs: value يصبح عنوان URL وزوج المعرف الذي تم الوصول إليه كـ {{ my_icon.value.url }}.
• يقبل القائمة الافتراضية والموصى بها، حتى يتمكن المنتقي من إظهار الرموز التي تناسب الأداة.

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

قبل أن تبدأ #

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

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

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

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

شرح خيارات حقل الأيقونات #

• ملصق: النص الموضح أعلاه هو المنتقي في Elementor، على سبيل المثال “Feature Icon”.
• اسم: المعرف الفريد للحقل والحروف والأرقام والتسطير فقط، على سبيل المثال feature_icon.
• الافتراضي: أيقونة البداية ك value و library ازوج، لذلك لا تسقط الأداة أبدًا بدون أيقونات.
• موصى به: تظهر مجموعة من الرموز التي يقوم المنتقي بوضعها أولاً، لتوجيه المحررين نحو الاختيارات التي تناسب التصميم.
• الوصف، إظهار التسمية، الفاصل: إعدادات العرض القياسية، بالإضافة إلى شروط عرض الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.

قم بتوصيل حقل الأيقونات بالقالب الخاص بك #

أولاً، الخطأ الذي يرتكبه الجميع تقريبًا مرة واحدة {{ feature_icon }} لا يطبع شيئا. يؤدي اختصار الطباعة المباشرة على قيم المصفوفة إلى إخراج المستوى الأعلى فقط url المفتاح، ومصفوفة الأيقونات لا تحتوي على أي شيء، لذلك يخرج الرمز فارغًا. لا يوجد خطأ، لا تحذير، مجرد نقطة فارغة حيث يجب أن يكون الرمز. الخصائص هي المكان الذي يعيش فيه المحتوى.

رمز الخط (Font Awesome والمكتبات الأخرى القائمة على الفصل): value يحمل سلسلة الفئة، لذلك <i> العلامة تجعلها:

<i class="{{ feature_icon.value }}" aria-hidden="true"></i>

تحميل SVG: عندما يأتي الاختيار من مكتبة SVG، value هو في حد ذاته مصفوفة تحتوي على عنوان URL ومعرف، لذلك يتم عرض الرمز كصورة

<img src="{{ feature_icon.value.url }}" alt="">

نادرًا ما تعرف الأداة مسبقًا النوع الذي سيختاره المحرر، وبالتالي فإن النمط الموثوق يتفرع على library المفتاح والمقابض على حد سواء:

{% if feature_icon.library == 'svg' %}
  <img src="{{ feature_icon.value.url }}" alt="">
{% else %}
  <i class="{{ feature_icon.value }}"></i>
{% endif %}

قم بلف كل شيء في واقي الحالة الفارغة، كما هو الحال مع أي حقل من نوع الوسائط، بحيث لا يترك الرمز غير المحدد أي ضلال <i class=""> خلف:

{% if feature_icon.value %}
  ...the branch above...
{% endif %}

احترس من الاختبار باستخدام أيقونات الخطوط فقط. ال <i>-يعمل إصدار العلامة طوال الأسبوع، ثم يقوم العميل بتحميل علامة تجارية SVG ويختفي الرمز، لأن سمة الفئة لا يمكنها الاحتفاظ بمصفوفة ملفات. إذا قمت بشحن الحقل، قم بشحن الفرع.

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

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

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

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

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

نصائح للعمل مع مجال الأيقونات #

• لا تطبع الحقل عاريًا أبدًا. {{ feature_icon }} لا يخرج شيئا؛ الأيقونة تعيش في {{ feature_icon.value }} وبالنسبة لـ SVGs، {{ feature_icon.value.url }}.
• شحن فرع المكتبة. ال {% if feature_icon.library == 'svg' %} النمط هو الإصدار الوحيد الذي يبقى على قيد الحياة في كل اختيار يمكن للمحرر القيام به.
• حراسة الحالة الفارغة. {% if feature_icon.value %} يمنع الرموز غير المحددة من عرض العلامات الفارغة.
• يضيف aria-hidden="true" إلى أيقونات الخطوط المزخرفة. تقوم قارئات الشاشة بتخطي الرمز وقراءة النص الموجود بجانبه بدلاً من ذلك.
• الاستخدام موصى به لتوجيه الاختيار. إن ظهور مجموعة منسقة يحافظ على اتساق أيقونات عنصر واجهة المستخدم بشكل مرئي عبر الموقع.
• قم بقياس SVGs في علامة التبويب CSS الخاصة بك. تصل SVGs التي تم تحميلها كصور، لذا امنح فرع img عرضًا للحفاظ على عرض كلا الفرعين بنفس المقياس.

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

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

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