كيفية استخدامه وتحقيق أقصى استفادة منه؟

الأيقونات رائعة!

لديهم القدرة على التواصل بسرعة مع الجمهور من خلال إنشاء اتصال مرئي قوي.

هذا هو سبب استخدام الرموز على نطاق واسع في كل مكان ، بما في ذلك مواقع WordPress.

أيضًا ، قد يكون استخدام نفس المظهر على موقعك لعدة أشهر أمرًا مملًا. من الشائع أن.

وبعد ذلك ، سوف تبحث عن شيء أكثر إثارة للاهتمام ، باستخدام ذلك ، وستشعر بالملل مرة أخرى ،

وتستمر الدورة وتطول …

لذا ، كيف يمكنك تخطي حلقة الملل تلك؟

Dashicons هي طريقة ممتازة!

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

لذلك ، دعنا نستكشف Dashicons وكيف يمكنك استخدامها بفعالية على موقع WordPress الخاص بك.

ما هو WordPress Dashicons؟

Dashicons هي خطوط أيقونات رسمية لـ WordPress تم تقديمها منذ سنوات بإصدارها 3.8. هذه الخطوط رائعة ورائعة إذا كنت تستخدمها على موقع الويب الخاص بك. إنها ملفات SVG عالية الجودة يمكنك تغيير حجمها بسهولة إلى أي حجم بدون بكسل.

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

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

  9 WordPress WAF لمنع التهديدات الأمنية

يمكنك استخدام هذه الرموز على:

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

هل تلاحظ أنني أقول “أيقونات” بشكل متكرر؟

هنا ، أعني خطوط الرموز فقط.

ليست صور في شكل أيقونات.

نعم ، هناك فرق بين الاثنين.

دعونا نكشف عن ذلك.

الفرق بين أيقونات الصور وخطوط الأيقونات؟

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

هل أصبح ذلك تقنيًا جدًا؟

دعني أوضح ذلك.

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

أنها توفر لك الكثير من الفوائد.

كيف؟

اكتشف في القسم التالي.

لماذا يجب عليك استخدامها؟

  • قابلة للتحجيم مثل النصوص المستخدمة على موقع الويب الخاص بك لأنها خطوط
  • خفيف الوزن لا يؤثر على سرعة تحميل صفحتك مقارنة بالصور
  • قادر على ضبط لون الرمز من خلال CSS وإضافة خصائص إضافية مثل لون التدرج والظل وما إلى ذلك.
  • عظيم في حفظ الكثير من طلبات HTTP من خلال السماح لك بتحميل الخطوط كلها مرة واحدة ، والتي يمكنك استخدامها عبر صفحاتك. إذا كنت تستخدم الكثير من الصور على الموقع ، فسيتعين عليك تقديم الكثير من الطلبات لجلبها ، مما يزيد من وقت تحميل الصفحة.
  • سهل الاستخدام والضبط من الصور. يمكنك إضافة رموز يمكن التعرف عليها وإبداعية دون الحاجة إلى إعادة إنشائها في كل مرة تحتاج فيها إلى رمز لمشغل فيديو أو بريد إلكتروني أو موسيقى أو أي شيء آخر.
  • إمكانية وصول أكبر لأنها مدمجة في WordPress

كيف يتم استخدامها؟

استخدام Dashicons ليس هندسة صاروخية.

صدقني؛ أنا على دراية بكليهما: 0

ما عليك سوى اتباع بعض الخطوات المذكورة أدناه لبدء استخدام WordPress Dashicons.

  كيف ترى الإحصائيات الخاصة بك على Spotify

الخطوة 1: قم بتمكين Dashicons على موقع WordPress الخاص بك

قبل أن تبدأ ، قم بتمكين Dashicons حيث تحتاج ، على سبيل المثال ، إلى موضوع. لهذا ، تحتاج إلى إضافة بعض الرموز إلى ملف function.php.

للقيام بذلك:

  • أولاً ، انتقل إلى محرر المظهر / المظهر من لوحة معلومات WordPress الخاصة بك.
  • افتح ملف function.php.
  • قم بالتمرير حتى نهاية الملف وأضف بضعة أسطر من التعليمات البرمجية لإدراج البرامج النصية في قائمة الانتظار
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

المثال أعلاه هو تمكين Dashicons على الواجهة الأمامية.

تأكد من إنشاء سمة فرعية قبل تحرير ملف function.php. يرجع السبب في ذلك إلى أنك إذا قمت بتحرير ملف السمة مباشرة ثم حدث تحديث لهذا السمة ، فسيتجاوز جميع التغييرات التي تجريها على الملف.

الخطوة 2: ابحث عن أكواد Dashicon HTML & CSS

يقدم WordPress.org مكتبة من Dashicons ، والتي تساعدك في العثور على أكواد CSS و HTML التي تنتمي إلى كل رمز. هنا ، انتقل إلى Developer Resources للعثور على Dashicons التي تريد استخدامها ثم:

  • انقر فوق أيقونة رغبتك.
  • اختر بين “Copy CSS” أو “Copy HTML” من خلال النقر عليها.
  • الآن ، سترى نافذة منبثقة. فقط انسخ الكود إلى الحافظة.
  • حدد المكان الذي تريد استخدام الرمز فيه ، مثل السمات والبيانات الوصفية وقائمة التنقل وما إلى ذلك.
  • الصق الكود المنسوخ في أداة النص أو محرر النص بالمكان المختار.
  • يبدو رمز التعديل باستخدام CSS المخصص

هذا هو.

إلى جانب ذلك ، بشكل افتراضي ، يتم قياس جميع الرموز بحجم 20 بكسل. يمكنك تغييره باستخدام عناصر CSS من خيارات مثل عنصر فحص Google Chrome أو FireBug في Firefox.

كيف تحقق أقصى استفادة من WordPress Dashicons؟

لقد رأيت كيف يمكنك استخدام Dashicons على موقعك ، والآن سنرى استخدامها لأغراض محددة.

1. استخدام قائمة التنقل

لإضافة رموز إلى القائمة ، اتبع الخطوات أدناه:

  • انتقل إلى القوائم / المظهر من لوحة القيادة
  • انسخ أكواد HTML المصممة لأيقونة القائمة من WordPress.org
  • الصقها في “تسمية التنقل” في لوحة القيادة
  • انقر فوق الزر “حفظ” ثم قم بتحميل الصفحة الرئيسية. يجب أن يعرض رمزًا رائعًا ونقيًا.
  كيفية استخدام تطبيق Microsoft Teams على الويب

2. استخدام على الفوقية بعد

ستتمكن من استخدام Dashicons أمام التاريخ أو اسم المؤلف أو العلامة أو الفئة بناءً على الموضوع بالإضافة إلى البيانات التي يعرضها.

نظرًا لأنك قمت بالفعل بإدراج Dashicons في قائمة الانتظار ، افتح ملف style.css. بخلاف ذلك ، يمكنك أيضًا الانتقال إلى محرر CSS مخصص ، والذي لا يسمح لك بفقدان تغييراتك بعد تحديثات السمة. بعد ذلك ، أضف كود CSS الخاص بك بعد العثور على محدد مطابق.

3. في الواجهة الخلفية لـ WordPress

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

نصيحة سريعة: أنشئ رمزًا قصيرًا

لاستخدام Dashicons بسهولة ، يمكنك إنشاء رمز قصير لها. إنه مفيد ، خاصة عند إنشاء موقع ويب لعملائك الذين سيجدون أنه من السهل إدراج Dashicons دون العبث بالرموز.

استنتاج

آمل أن تكون الأمور واضحة جدًا من جانبك فيما يتعلق بـ WordPress Dashicons. إنها لا تغطي فقط جماليات موقع الويب الخاص بك ولكنها أيضًا سهلة الاستخدام وتحسن سرعة تحميل الصفحة.

وأنت تعلم ، “الجمال والعقل” مزيج نادر.

لذا ، اسرع ، استخدم Dashicons اللافتة للنظر على موقع WordPress الخاص بك!