it-swarm-ko.tech

왜 사용자 지정 탐색 메뉴는 목록 항목에 너무 많은 클래스를 생성합니까? 어떻게 든 이것을 관리 할 수 ​​있습니까?

아래는 그 예입니다. 현재 항목을 제외한 각 항목에 3 개의 클래스가 첨부되어 있습니다.이 항목을 어떻게 든 다운시킬 수 있습니까?

<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();
}

업데이트 :이 코드를 사용하는 모든 사용자는 IE 6 지원이 필요하지 않는 한 active-parent 클래스가 더 이상 필요하지 않습니다. 자식 선택기 (>)를 사용하면 활성 부모와 활성 자식의 스타일을 효과적으로 지정할 수 있습니다.

7
onetrickpony

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));
}
4
Nicholas Turbanov

이 모든 클래스들은 IE6뿐만 아니라 superfish와 같은 것을 위해 javascript에 유용하게 사용됩니다.

또한 current_page_item와 같은 클래스가 없으면 탐색 내에서 현재 페이지를 강조 표시 할 수 없습니다.

유연성이 핵심입니다. 목록의 고유 항목에 대한 고유 한 클래스를 모두 추가하여 최종 디자이너에게 스타일을 유연하게 적용 할 수 있습니다. 그러나 나는 그것이 클래스의 buttload이다 동의한다. 괜찮은 HTML 프로그래머 인 디자이너는 훨씬 적은 코드로 동일한 작업을 수행 할 수 있습니다.

편집 : 그것은 더 명확하게 내가 의도 한 의미, 무례 의도

4
Dan Gayle

wp_nav_menu function은 컨테이너와 메뉴의 ID와 클래스를 수정할 수있는 기능을 제공합니다. 그러나 LI 요소는 아닙니다.

source 어디에서 LI 요소 (start_el () 함수)를 빌드하는지 살펴보십시오. nav_menu_css_class 필터를 사용하고있는 것을 볼 수 있습니다. 필터는 문자열의 배열을 가져 와서 클래스 태그를 빌드하는 데 사용합니다.

참고 : 코드에서 볼 수 있듯이 빈 배열을 전달하면됩니다. Wordpress에는 여전히 LI 요소에 대한 클래스 속성이 포함되며 비어있게됩니다.

4
Ryan Gibbons

나는 그것을 아래로 paring 것을 권하지 않을 것이다. 예, 마크 업이 부풀어 오르는 것처럼 보일 수도 있지만, 이는 IE6과 같이 사이트를 멋지게 보이게하려면 스타일을 실제로 좁힐 수있는전용방식입니다. IE6는 기본적으로 여러 셀렉터를 지원하지 않는다는 점을 명심하십시오 (예 : li.menu-item.current가 중단되어 li.current로 기본 설정 됨). 따라서 멋진 CSS를 사용하고 IE6에서 작동하도록하려면 더 좋습니다 충분하지 않은 것보다 많은 클래스 선택기를 사용할 수 있습니다.

그래서 현실에서는couldclass = "menu-item"까지 목록을 패어 넣을 수 있습니다. 그러나 하나 이상의 게시 유형이있는 메뉴를 사용하려면 menu-item-type-post_type이 필요합니다. 더 좋아하는 필터링을 원할 경우 menu-item - ## 클래스의 이점을 누릴 수 있습니다.

아무도 귀하의 사이트 뒤에서 실제 코드를 볼 가능성이 높지 않으며 여러 클래스를 정의하면 아무런 상처를 입지 않을 것임을 기억하십시오.

2
EAMann

@Ray Gulick : 나는 다이빙을 싫어하지만 @Dan Gale, @EAMann 및 @ Insanity5902와 동의합니다. "부풀림"은 문제를 일으키지 않으며 디자이너가 메뉴를 다양한 방식으로 테마 지정할 수 있습니다.

왜 "부풀림"이 당신을 귀찮게하는지 궁금합니다. 나는 그것이 예쁘지 않지만 아무도 옆에 그것을 볼 수 없다는 것을 알고 있습니다. HTTP 요청을 줄이고 이미지 크기를 줄이는 것과 같이 수백 가지 먼저 해결해야 할 다른 것 인 성능 문제가있는 경우 후자는 아마도 더 큰 이점을 가질 것입니다.

2
MikeSchinkel