goldenapples
  • 0
Гуру

Почему настраиваемые меню навигации генерируют так много классов для элементов списка? Могу ли я как-то с этим справиться?

  • 0

Ниже приведен пример. К каждому элементу прикреплено 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>
Share
  1. Я иду против большинства в этом вопросе 🙂

    Да, это может быть хорошей идеей, чтобы раздеть его. Лично я сохраняю только current-xxx классы типов и заменяю их на active и active-parent (для активных родительских или предковых элементов).

    Почему?

    • во всем Интернете активный стал стандартным классом для активных пунктов меню (помимо этого 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). С помощью дочернего селектора ( > ) вы можете эффективно стилизовать активный родительский и активный дочерний элементы любым удобным для вас способом.

    • 0
  2. Функция wp_nav_menu дает вам возможность изменять идентификатор и класс как для контейнера, так и для меню. Но не элементы LI.

    Если вы посмотрите на источник, где он создает элементы LI (функция start_el()); Вы можете видеть, что он использует фильтр nav_menu_css_class; Фильтр возьмет предоставленный вами массив (строк) и будет использовать его для построения тегов класса.

    Примечание. Из того, что я вижу в коде, если вы передадите ему пустой массив. WordPress по-прежнему будет включать атрибут класса для элемента LI, он просто будет пустым.

    • 0
  3. Все эти классы предназначены для полезного подключения к javascript для чего-то вроде superfish, а не только из-за IE6.

    Кроме того, без такого класса, как current_page_item, вы не сможете выделить текущую страницу в навигации.

    Гибкость является ключом. Добавьте все классы, уникальные для уникальных элементов в список, предоставьте конечному дизайнеру большую гибкость в стилях. Но я согласен, что это куча классов. Достойный HTML-программист, дизайнер мог бы сделать то же самое с гораздо меньшим количеством кода.

    РЕДАКТИРОВАТЬ: сделал более ясным, что я имел в виду, без неуважения

    • 0
  4. Изменено из кода One Trick Pony, так как он не работал у меня с текущей версией WP (3.5.1).

    Добавлены пунктирные классы, так как WP теперь включает как подчеркнутые, так и пунктирные версии классов иерархии страниц.

    Изменен array_diff -> array_intersect, так как diff возвращает все классы вместо отфильтрованного списка.

    // 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));
    }
    
    • 0
  5. Я бы не рекомендовал его урезать. Да, разметка может выглядеть раздутой, но это единственный способ действительно сузить стили, если вы хотите, чтобы ваш сайт хорошо выглядел, скажем, в IE6. Имейте в виду, что IE6 изначально не поддерживает несколько селекторов (т.е. li.menu-item.current сломается и по умолчанию будет li.current), поэтому, если вы делаете какой-нибудь причудливый CSS и хотите, чтобы он работал с IE6, лучше иметь много доступных селекторов классов, чем недостаточно.

    Итак, на самом деле вы можете сократить список до class=»menu-item»… но если у вас когда-либо будет меню с более чем одним типом сообщений, вам понадобится menu-item-type- post_type… и если вы хотите сделать фильтрацию посложнее, вам также пригодится класс menu-item-##.

    Помните, что никто, скорее всего, никогда не увидит реальный код вашего сайта, и определение нескольких классов ничему не повредит.

    • 0
  6. @Ray Gulick: Я ненавижу погружаться, но я согласен с @Dan Gale, @EAMann и @Insanity5902. «Раздувание» не вызывает каких-либо ощутимых проблем и позволяет дизайнеру изменять тему меню множеством гибких способов.

    Мне интересно, почему вас беспокоит «наворот»? Я знаю, что это некрасиво, но рядом никто никогда этого не увидит. Если это проблема производительности, то в первую очередь нужно решить сотни других вещей, таких как сокращение HTTP-запросов и уменьшение размеров ваших изображений, последнее из которых, вероятно, принесет на порядок больше пользы.

    • 0

Оставить ответ

You must login to add an answer.