استخدام خط أيقونات WooCommerce في الإضافات

استخدام خط أيقونات وووكامرس في الإضافات (Utilizing WooCommerce Icon Font in Extensions)

يأتي وووكامرس مع خط أيقونات مخصص نستخدمه لجميع الأيقونات في واجهة مستخدم وووكامرس، بدءاً من الإصدار 2.1. يساعد هذا في تحسين الأداء ويوفر وضوحاً فائقاً (pixel perfect) على أي شاشة.

إذا كنت تنشئ إضافة (extension) لوووكامرس، فقد ترغب في استخدام هذه الأيقونات إذا كنت تضيف علامة تبويب إلى بيانات المنتج أو تضيف عنصر قائمة جديداً في المستوى الأعلى.

من السهل القيام بذلك باستخدام SCSS/LESS والميكسينز المدمجة في نواة وووكامرس.

استيراد ملف ميكسينز وووكامرس (Import the WooCommerce Mixins File)

قم باستيراد ميكسينز نواة وووكامرس في ملف أنماط (stylesheet) الخاص بإضافتك، مع التأكد من تعديل المسار النسبي ليتطابق مع هيكل مجلداتك الفعلي:

@import 'path/to/woocommerce/assets/css/mixins';

دوال الأيقونات (Icon Functions)

الآن بعد أن قمت باستيراد ميكسينز وووكامرس، لديك وصول إلى الدوال التالية التي تتولى سحر الأيقونات:

• .ir(): تجهز العنصر لاستبدال الأيقونة (icon replacement).

• .icon(): تدرج أيقونة.

• .iconbefore(): تضيف أيقونة قبل العنصر.

• .iconafter(): تضيف أيقونة بعد العنصر.

استخدام .ir() و .icon()

تضبط هذه الدالة الطول والعرض، وإزاحة النص (text-indentation)، وعائلة الخط (font-family) وغيرها لعنصر تريد استبداله بالكامل بأيقونة. على سبيل المثال زر إغلاق (close button). قد تبدو ترميزات HTML الخاصة بك كالتالي:

<a href="#" class="close">Close</a>

لتحقيق هذا المظهر كعلامة ضرب (cross) بدلاً من كلمة ‘Close’:

.close {
  .ir();
  &:before {
    .icon("\e013");
  }
}

استخدام .iconbefore()

.iconbefore() تُستخدم لإدراج أيقونة قبل العنصر. ويتم تطبيقها فقط على العنصر الوهمي (pseudo-element) :before. على عكس .icon()، فهي لا تعتمد على تجهيز العنصر الأصل عبر .ir().

.tab-link:before {
  .iconbefore("\e02d");
}

يؤدي هذا إلى إدراج أيقونة بريد (mail icon) قبل العنصر الذي تحمل الفئة .tab-link.

استخدام .iconafter()

كما يمكنك أن تتوقع من الاسم، تؤدي .iconafter() وظيفة مشابهة جداً لـ .iconbefore()، باستثناء أنها تدرج الأيقونة بعد العنصر. يجب تطبيق .iconafter() على العنصر الوهمي :after.

.tab-link:after {
  .iconafter("\e02d");
}

الأيقونات المخصصة (Custom Icons)

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

لإنشاء خط أيقونات مخصص ستحتاج إلى:

1. إنشاء المتجهات الفردية (vectors) في برنامج مثل Illustrator.

2. إنشاء الخط عن طريق استيرادها إلى تطبيق إنشاء خطوط مثل IcoMoon.

بمجرد بناء خطك المخصص، ستقوم بتضمينه في ملف أنماطك File (سيتم توفير الكود للقيام بذلك في الحزمة التي تقوم بتنزيلها من IcoMoon). يمكنك بعد ذلك استخدام دوال الأيقونات الخاصة بنا، مع استثناء صغير واحد؛ ستحتاج إلى تجاوز إعلان عائلة الخط (font-family) في هذه الدوال لاستخدام خطك الخاص.

افترض أن الخط الذي أنشأته يحمل الاسم 'MyExtensionFont'. بالاستعانة بالمثال السابق، ستستخدم بدلاً من ذلك ما يلي:

.tab-link:after {
  .iconafter("\e02d");
  font-family: 'MyExtensionFont';
}

في هذه الحالة، سيكون الرمز (glyph) هو الرمز المناسب استناداً إلى خطك الجديد.

هل أحتاج إلى إنشاء خط مخصص؟ (Do I need to create a custom font?)

في معظم الحالات، سيوجد بديل (fallback) لالتقاط أي خطوط لم تقم بإنشائها (مثل علامات تبويب بيانات المنتج). ولكن لمنح إضافتك مظهراً راقياً حقاً، فهو يستحق استثمار الوقت!