ووردبريس

كيف تضيف أيقونات الصور مع قوائم التنقل في وردبرس ؟

تطوير وتصميم المواقع

من الممكن إضافة الصور كأيقونات في قوائم التنقل في وردبرس من دون الحاجة لتعديل ملفات البرمجة.

الخطوة الأولى: تنصيب و تفعيل أداة Menu Image

بعد التفعيل توجه إلى Appearance » Menus سيظهر خيار إضافة صورة لكل عنصر معروض.ب

اعدادت القوائم

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

إضافة حجم الصورة الخاص بك

يمكنك إضافة الكود في الصورة أدناة إلى ملف البي أتش بي الخاص بالثيم your theme’s functions.php file أو site-specific plugin

كود

إضافة الصور إلى قوائم التنقل في وردبرس يدوياً مع CSS

هذه الطريقة تعتبر جيدة للمستخدمين ذوي الخبرة التقنية أكثر من المستخدمين العاديين. أولاً يجب رفع الصور إلى ووردبريس :ب
Media » Add New
بعد رفع كل صورة على حدة قم بنسخ عنوان الإنترنت الخاص بكل صورة و وضعها في محرر نصوص مثل نوتباد.ب
الآن انتقل إلى: ب
Appearance » Menus
و أضغط على الخيارات في أعلى اليمين و اختر المربع CSS classes

css-classes

ستلاحظ ظهور هذه الخانة ما عليك إلا ملأها كما في الصورة أدناه.ب

اضافة  css

يجب إضافة هذا الـ CSS إلى الثيم أو التشايلد ثيم كما في الصورة أدناه. ب

كود  css

لا تنسى تغيير .homepage إلى الكلاس الذي أدخلته و الـ URL للصورة الخلفية لتلك التي حفظتها في ملف النصوص.ب

بمجرد أن ترضى عن نتيجة أحد العناصر، قم بإعادة العملية للعناصر الأخرى في القائمة.ب

المصادر:

http://www.wpbeginner.com/plugins/how-to-add-image-icons-with-navigation-menus-in-wordpress/

www.maxisciences.com

 

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

X