ستساعدك المقالة التالية: كيفية استخدام Dashicons في WordPress: دليل خطوة بخطوة
يحدث للجميع.
تجد المظهر الذي يعجبك، وتقوم بتثبيته وتقضي بضعة أشهر في الاستمتاع بمظهر موقعك. ولكن بعد بضعة أشهر، بدأ الموضوع يبدو قديمًا. قليلا مملة.
المشكلة الوحيدة هي أنك لا تريد قضاء بضع ساعات في البحث عن شيء جديد. إذا كانت هناك طريقة لإضافة القليل من الإثارة إلى موضوعك، فقليل من التوهج لجعله بارزًا.
قبل أن تشعر باليأس، اسمح لي أن أعرض لك طريقة سهلة لإضفاء الحيوية على المظهر الخاص بك دون بذل الكثير من الجهد، ودون إضافة صور غير ضرورية قد تؤدي إلى إبطاء موقعك.
أدخل داشيكونز. Dashicons هي أيقونات الخطوط التي تم تقديمها في WordPress 3.8. إنها تلك الرموز الرائعة والرائعة التي تراها عند تسجيل الدخول إلى لوحة التحكم الخاصة بك. ألن يكون رائعًا لو كان بإمكانك إضافتها إلى موضوعك أيضًا؟
حسنًا، يمكنك ذلك وسأوضح لك كيف.
كيف يمكنك استخدام Dashicons في قائمة التنقل الخاصة بك؟
لنبدأ بمثال بسيط. تم تضمين Dashicons بالفعل في WordPress منذ الإصدار 3.8 ولكنك لا تزال بحاجة إلى تضمينها لعرضها بشكل صحيح على الواجهة الأمامية لموقعك؛ وهذا هو الموضوع الخاص بك.
الخطوة 1: اجعل موضوع Dashicons الخاص بك جاهزًا
لجعل قالب Dashicons الخاص بك جاهزًا، افتح أولاً ملف function.php الخاص بك (الموجود في Appearance>Editor – افتراضيًا سيفتح ملف CSS الخاص بموضوعك الحالي. تابع وابحث عن ملف function.php وانقر عليه لتحميله محرر.)
الخطوة 2: قم بإدراج البرنامج النصي
قم بالتمرير إلى الأسفل ثم قم بلصق أسطر التعليمات البرمجية هذه في النهاية:
// قم بإدراج البرنامج النصي Dashicons add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’ ); وظيفة Load_dashicons_front_end() { wp_enqueue_style( ‘dashicons’ ); }
حسنًا! أصبح الآن المظهر الخاص بك جاهزًا لاستخدام Dashicons.
الخطوة 3: إضافة Dashicons إلى عناصر القائمة
دعونا نضيف Dashicon لرابط منزلك. توجه إلى موقع Dashicons وحدد الأيقونة التي تريدها.
الخطوة 4:
انقر على الأيقونة المطلوبة (في هذه الحالة قمت بتحديد أيقونة الصفحة الرئيسية) ثم انقر على نسخ HTML. ستظهر لك نافذة منبثقة تحتوي على الكود الذي تحتاجه.
الخطوة 5:
ارجع إلى لوحة تحكم WordPress الخاصة بك، وانقر على Appearance > Menus والصق الكود في المكان الذي يشير إلى Navigation Label.
إذا كنت لا تزال تريد ظهور الكلمة، فاكتبها بعد قوس الإغلاق div.
انقر على حفظ وتحميل صفحتك الرئيسية. يجب أن يعرض رابط منزلك الآن رمز Dashicon لطيفًا وواضحًا.
يمكنك القيام بذلك لجميع عناصر قائمة التنقل أو للمنزل فقط. ما عليك سوى تكرار الخطوات المذكورة أعلاه باستخدام الرموز المطابقة. كان ذلك سهلا أليس كذلك؟
كيف يمكنك استخدام Dashicons في مرحلة ما بعد التعريف؟
يمكنك المضي قدمًا وإضافة Dashicons إلى تعريف المنشور الخاص بك، أو بمعنى آخر إضافة Dashicons أمام اسم المؤلف أو التاريخ أو الفئة أو العلامة؛ اعتمادًا على موضوعك والمعلومات التي يعرضها.
نظرًا لأنك قمت بالفعل بإدراج Dashicons في القالب الخاص بك، كل ما عليك فعله الآن هو فتح ملف style.css الخاص بك (أو استخدام محرر CSS المخصص الذي يعد دائمًا خيارًا أفضل حتى لا تفقد التغييرات بمجرد تحديث القالب الخاص بك!)، ابحث عن المحدد المطابق وأضف كود CSS.
لنفترض أنك تريد إضافة رمز أمام اسمك أو اسم مؤلفك.
الخطوة 1:
أولاً سنقوم باختيار الأيقونة التي نرغب فيها.
الخطوة 2:
ثم اضغط عليها، وهذه المرة اختر Copy CSS. مرة أخرى، ستظهر لك نافذة منبثقة تحتوي على الرمز الذي تريد لصقه.
الخطوه 3:
الآن افتح style.css الخاص بك وابحث عن المحدد المقابل، في هذه الحالة – .entry-author. من خلال إضافة :before ثم لصق كود CSS الذي نسخته من موقع Dashicons، سيكون لاسم المؤلف أيقونة جميلة أمامه. تحتاج أيضًا إلى تحديد أنك تستخدم خط Dashicons. يبدو الكود المعدل كما يلي:
.entry-author:before {font-family: “dashicons”; المحتوى: “\f110”; }
دعونا نضيف القليل من التصميم أيضًا، والآن يبدو الكود المكتمل كما يلي:
.entry-author:before {font-family: “dashicons”; المحتوى: “\f110”; اللون: #f15123؛ العرض: كتلة مضمنة؛ -webkit-font-تجانس: الحواف؛ الخط: عادي 20px/1؛ محاذاة رأسية: أعلى؛ الهامش الأيمن: 5 بكسل؛ الهامش الأيمن: 0.5ريم؛ }
النتيجة النهائية
إذن كيف سيبدو هذا في النهاية؟
شيء من هذا القبيل:
هناك العديد من الطرق التي يمكنك من خلالها استخدام Dashicons – دع إبداعك يترسخ وشاهد ما يمكنك فعله.
ضع كل شيء معا
بصرف النظر عن الأمثلة المذكورة أعلاه، يمكنك استخدام Dashicons في الواجهة الخلفية لديك لتحديد أيقونات مختلفة لأنواع منشورات مختلفة، أو يمكنك استخدامها في عناوين منشوراتك، أو عناوين عناصر واجهة المستخدم، أو إذا كنت تقوم بإنشاء صفحة مقصودة مخصصة، فيمكنك التمييز بين الصفحات المختلفة من موقعك.
فيما يلي مثال أساسي لما يمكنك استخدامه لإنشائه:
