قم بإزالة جميعها من الصندوق، ثم أضفها بالترتيب الذي تريده.
آه، أدرك من العنوان الذي وضعه شخص ما عند تقسيم هذا إلى موضوع جديد أن سؤالي غير واضح.
أعرف كيفية إعادة ترتيب عناصر القائمة العلوية بشكل عام. وأدرك أن هناك حيلة لذلك (“إزالة وإعادة إضافة”) ليست واضحة. لكنني أعرف تلك الحيلة. هذه ليست مشكلتي.
مشكلتي هي: عند تمكين إضافة التصويت، تظهر عناصر جديدة، وهي “التصويتات” و"تصويتاتي"، في قائمة القائمة. إذا حاولت إضافتها إلى إعداد “القائمة العلوية” (كما في الصورة أعلاه)، أجد أنني لا أستطيع ذلك. تظهر رسالة الخطأ “لقد حددت خيار التصويت غير صالح”.
هل هناك اسم مختلف يجب أن أستخدمه؟ أم أن هناك طريقة مختلفة؟
بغض النظر، أعتقد أنني أرغب في الترتيب التالي:
الأحدث | النشط | الأعلى تصويتًا | الإشارات
… لست مقتنعًا بأنني أريد أن يظهر “تصويتي” على الإطلاق (نحن نستخدم هذا بطريقة “صوّت للأعلى لكل ما تحبه!” بدلاً من طريقة “وزّن مجموعة مختارة من المفضلات”).
أعدت ترتيب عناصر شريط التنقل الخاص بك كما هو موضح هنا
لا تتردد في تغيير الترتيب حسب رغبتك. ستجد مكون سمة جديدًا على موقعك بناءً على العناصر الظاهرة حاليًا.
عند وجود أزرار غير تقليدية لا تظهر في إعدادات “القائمة العلوية”، يمكنك ببساطة تغيير ترتيبها باستخدام CSS، حيث أن عنصر navbar يستخدم خاصية flex. راجع هذا المثال:
/*في هذه الحالة المحددة، يتم تفعيل مكون التصويت فقط في فئة معينة
لذلك سنقوم بتعديل شريط التنقل في تلك الفئة فقط. استبدل {your-category-slug}
بالسلاكة الخاصة بالفئة المستهدفة*/
.category-{your-category-slug} #navigation-bar {
/*الأحدث*/
:nth-child(1) {
order: 1;
}
/*غير المقروءة*/
:nth-child(2) {
order: 2;
}
/*الجديدة*/
:nth-child(3) {
order: 3;
}
/*الأكثر تصويتًا*/
:nth-child(4) {
order: 5;
}
/*تصويتي*/
:nth-child(5) {
order: 6;
}
/*النشطة*/
:nth-child(6) {
order: 4;
}
/*المحفوظة*/
:nth-child(7) {
order: 7;
}
}
شكرًا لك @dax! هل تعتمد قيمة “nth-child” في CSS على الترتيب في إعداد top-menu، أم أن هذه القيم ثابتة في مكان ما؟ مثلًا، إذا قمت بإزالة “Active” (أي “Top”) من القائمة في الإعداد، هل سأحتاج إلى تحديث CSS أيضًا؟
وأيضًا، ماذا لو (كما كنت أفكر أعلاه) أردت إخفاء “My Votes”؟
نعم.
فقط أضف display: none; إلى ملف CSS الخاص بك، على سبيل المثال:
/*My Votes*/
#navigation-bar :nth-child(5) { order: 6; display: none;}