it-swarm.asia

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

أدناه مثال. 3 فصول مرفقة بكل عنصر ، باستثناء العنصر الحالي ، الذي يحتوي على 6. هل يمكن أن أقوم بتخفيف ذلك إلى حد ما؟

<ul id="menu-global-nav" class="sf-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-5 current_page_item menu-item-63"><a href="#">Home</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="#">Services</a>
   <ul class="sub-menu">
   <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39"><a href="#">Case Studies</a></li>
   <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38"><a href="#">Story Discovery</a></li>
   </ul>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32"><a href="#">Company</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="#">Why Case Studies?</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="#">Case Study Showcase</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="#">Resources</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="#">Online Store</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="#">Contact Us</a></li>
</ul>
6
Ray Gulick

أنا ذاهب ضد الأغلبية في هذا واحد :)

نعم ، يمكن أن تكون فكرة جيدة. أنا شخصياً أحتفظ بفئات النوع current-xxx فقط وأستبدلها بـ activeو active-parent (لعناصر الأصل أو الجد النشطة).

لماذا ا؟

  • حول الويب ، active أصبح الفئة القياسية لعناصر القائمة النشطة (أعلى ذلك WP لها اصطلاحات تسمية غير متسقة بين "أسماء الفئات الخاصة بها)".
  • تحصل على كتابة قواعد أقل CSS ؛ قد لا يكون النطاق الترددي الذي تقوم بحفظه كبيرًا ، لكنه بالتأكيد يجعل ملف CSS أكثر قابلية للقراءة

كود محدث:

// for custom menus 
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes(array $classes, $item = null){

  // old classes to be replaced with 'active'
  $replacements = array(
    'current-menu-item',
    'current-menu-parent',
    'current-menu-ancestor',
    'current_page_item',
    'current_page_parent',
    'current_page_ancestor',
  );

  // if any of the classes above are present,
  // return an array with a single class ('active')
  return array_intersect($replacements, $classes) ? array('active') : array();
}

تحديث: لأي شخص يستخدم هذا الرمز ، لم تعد فئة active-parent مطلوبة (إلا إذا كنت لا تزال بحاجة إلى IE 6 دعم). باستخدام محدد الطفل (>) ، يمكنك تصميم الوالد النشط والطفل النشط بشكل فعال بالطريقة التي تريدها.

7
onetrickpony

تم التعديل من كود One Trick Pony لأنه لم ينجح مع الإصدار الحالي من WP (3.5.1).

تمت إضافة الفئات المتقطعة مثل WP الآن إلى كلاً من الإصدارات المرسلة والمتقطعة من فئات التسلسل الهرمي للصفحة.

تم تغيير array_diff -> array_intersect كما فرق بإرجاع كافة الفئات بدلاً من القائمة التي تمت تصفيتها.

// for custom menus
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes($classes, $item){

  // old class => new class
  $replacements = array(
    'current-menu-item'     => 'active',
    'current-menu-parent'   => 'active-parent',
    'current-menu-ancestor' => 'active-parent',
    'current_page_item'     => 'active',
    'current_page_parent'   => 'active-parent',
    'current_page_ancestor' => 'active-parent',
    'current-page-item'     => 'active',
    'current-page-parent'   => 'active-parent',
    'current-page-ancestor' => 'active-parent'
  );

  // do the replacements above
  $classes = strtr(implode(',', $classes), $replacements);
  $classes = explode(',', $classes);

  // remove any classes that are not present in the replacements array,
  // and return the result

  return array_unique(array_intersect(array_values($replacements), $classes));
}
4
Nicholas Turbanov

جميع هذه الفئات هي للتثبيت المفيد في جافا سكريبت لشيء مثل السمك الخارق ، وليس فقط بسبب IE6.

أيضًا ، بدون فئة مثل current_page_item ، لن تتمكن من إبراز الصفحة الحالية داخل التنقل.

المرونة هي المفتاح. أضف جميع الفئات ، الفريدة للعناصر الفريدة في القائمة ، امنح المصمم النهائي الكثير من المرونة في التصميم. لكنني أتفق ، وهذا هو عبء الطبقات. مبرمج HTML لائق ، مصمم يمكن أن تفعل ما يعادلها مع رمز أقل بكثير.

تحرير: جعله أكثر وضوحا ما قصدته ، عدم الاحترام المقصود

4
Dan Gayle

تمنحك wp_nav_menu function القدرة على تعديل المعرف والفئة لكل من الحاوية والقائمة. ولكن ليس عناصر LI.

إذا ألقيت نظرة على source حيث تقوم ببناء عناصر LI (start_el () وظيفة) ؛ يمكنك أن ترى أنه يستخدم عامل التصفية nav_menu_css_class؛ سيأخذ المرشح الصفيف الذي تعطيه (من السلاسل) ويستخدمه لإنشاء علامات الفئات.

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

4
Ryan Gibbons

لا أوصي بتقليصها. نعم ، قد تبدو العلامات منتفخة ، ولكن هذه هي فقط الطريقة التي يمكنك من خلالها تضييق نطاق التصميم إذا كنت تريد أن يبدو موقعك جيدًا ، على سبيل المثال ، IE6. ضع في اعتبارك أن IE6 لا يدعم أصلاً محددات متعددة (على سبيل المثال ، li.menu-item.current سوف ينكسر ويصبح افتراضيًا على li.current) ، لذلك إذا كنت تقوم بأي CSS يتوهم وترغب في العمل مع IE6 ، فمن الأفضل أن يتوفر لديك الكثير من محددات الصفوف غير الكافية.

لذلك ، في الواقع ، يمكنك يمكنك تحويل القائمة لأسفل إلى class = "menu-item" ... ولكن إذا كان لديك قائمة تضم أكثر من نوع منشور ، فستحتاج إلى قائمة- item-type-post_type ... وإذا كنت تريد إجراء تصفية الحيوانات ، فستستفيد من عنصر القائمة - فئة ## أيضًا.

تذكر أنه من غير المحتمل أن يشاهد أحد الشفرة الفعلية خلف موقعك ، وأن تحديد فئات متعددة لن يضر بأي شيء.

2
EAMann

@ Ray Gulick: أنا أكره الغطس لكنني أتفق معDan Gale وEAMann و @ Insanity5902. لا يسبب "النفاخ" أي مشاكل ملموسة ويمكن المصمم من وضع قائمة في القائمة بطرق عديدة مرنة.

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

2
MikeSchinkel