• مناقشة عامة
  • كيفية إضافة فئة الـ CSS الأولى والأخيرة إلى عناصر قائمة الووردبرس؟

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

إضافة الدرجة الأولى والأخيرة باستخدام عامل التصفية

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

كل ما عليك فعله، هو فتح ملف functions.php الخاص بالقالب، ثم لصق الكود التالي:

  1. function wpb_first_and_last_menu_class($items) {
  2. $items[1]->classes[] = 'first';
  3. $items[count($items)]->classes[] = 'last';
  4. return $items;
  5. }
  6. add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

يؤدي هذا إلى إنشاء فئتي CSS الأول والأخير لعناصر قائمة التنقل الأولى والأخيرة على التوالي. ويمكنك استخدام هذه الفئات لتصميم عناصر القائمة.

يمكنك أيضًا إضافة الكود التالي لتغميق عناصر القائمة الأولى والأخيرة:

  1. .first a {font-weight: bold;}
  2. .last a {font-weight: bold;}

وهذا تطبيق لعناصر القائمة الأولى والأخيرة بعد إضافة الكود:

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

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

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

ثم بعد ذلك يتم اختيار تنسيقات (CSS) إضافية والضغط عليها كما بالشكل التالي.

بعد ذلك إضغط F12 ليظهر لك مدقق المتصفح، وأنا استخدم هنا متصفح كروم، ثم إضغط على الأيقونة 1 حرك الفأرة إلى أول القائمة مثلا لمعرفة الـ class الخاص بها كما هو مشار له بالسهم 2.

الآن يمكنك معرفة اسم الـ class الخاص بهذا العنصر وهو هنا موجود مع li أعلى ما هو مشار له بالسهم والـ class هو menu-item فقم بإختياره.

قم بإضافته كما بالشكل التالي لتغير لون الخلفية للقائمة باللون الأحمر بالكود التالي:

تسجيل الدخول لعرض الكود

لا تنسى النقطة في البداية

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

ولهذه المشكلة حلان إما الإحتفاظ بالكود المضاف لديك وإضافته مره اخرى بعد كل تحديث، أو استخدام إضافة Insert Headers and Footers وإدخال الأكواد عن طريق جافا سكريبت.