워드프레스 메뉴의 수정에 유용한 li 태그의 class name 종류
예전에 워드프레스 메뉴를 수정하는 방법에 대해 포스팅을 한 적이 있는데, 오늘은 출력된 메뉴를 원하는 방향으로 스타일링하기 위해 필요한 li 아이템의 class name의 종류에 관해서 알아 보겠습니다.
워드프레스 메뉴의 li 태그에 사용가능한 class name의 종류
기본적으로 워드프레스의 wp_nav_menu(); 함수는 아래와 같은 방식으로 자동적으로 클래스명을 출력합니다. 아래 코드들은 워드프레스 관리자 페이지에서는 확인이 안되고 실제 출력된 웹페이지에서 소스보기를 해야 확인이 가능합니다.
<ul> <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-30"><a href="링크 주소">Home</a></li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-31"><a href="링크 주소">Sample Page</a></li> <li id="menu-item-32" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-32"><a href="링크 주소">Uncategorized</a></li> <li id="menu-item-38" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-38"><a href="링크 주소">테스트</a> <ul class="sub-menu"> <li id="menu-item-74" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-74"><a href="링크 주소">테스트 서브 메뉴 1</a></li> <li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41"><a href="링크 주소">테스트 서브 메뉴 2</a></li> </ul></li> <li id="menu-item-86" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-86"><a href="링크 주소">테스트 2</a></li> </ul>
위의 코드는 ‘Home’, ‘Sample Page’, ‘Uncategorized’, ‘테스트’의 네 개의 메뉴가 있고, 그 중에 ‘테스트’ 메뉴의 하위에 ‘테스트 서브 메뉴 1′, ‘테스트 서브 메뉴 2′가 존재할 때 워드프레스가 출력하는 html 태그들 입니다.
아래는 li 태그에 출력되는 class name의 종류입니다.
menu-item-숫자: li 아이템의 id 와 class 명으로 사용이 됩니다. menu-item 뒤에 고유숫자를 붙여서 다른 li 태그의 클래스명이나 아이디명과 중복이 되지 않습니다.current-menu-item: li 태그내에 있는 링크가 현재 열려있는 웹문서의 주소와 동일할 때 출력이 됩니다.current_page_item: 현재 열려있는 웹문서가 페이지의 글이고, li tag 내에 있는 링크가 해당 웹문서의 주소와 동일할 때 출력이 됩니다.menu-item-home: 메뉴의 링크가 홈페이지로 가는 주소일 때 생성됩니다.menu-item: 모든 메뉴의 li tag에 붙는 공통 클래스명입니다.menu-item-type-custom: 워드프레스 관리자 페이지의 메뉴 페이지에서 ‘Custom Links’ 항목에 직접 링크를 입력한 경우에 menu-item-type 뒤에 ‘custom’이 붙고, ‘Pages’ 나 ‘Posts’ 항목에서 메뉴를 생성했을 때는 ‘post_type’ 이라는 클래스명이 붙고 ‘Categories’나 ‘Post Tags’에서 생성했을 경우에는 ‘taxonomy’가 클래스명에 붙습니다.( 3.0 메뉴 그림 참고 )menu-item-object: menu-item-object 뒤에는 post type의 라벨(이름)이 붙습니다. 워드프레스가 메뉴 페이지에 제공하는 기본적인 항목인 Custom Links, Pages, Category, Post Tags의 라벨은 각각 custom, page, category로 menu-item-type과 동일하며, ‘Post Tags’에서 메뉴를 추가했을 때에는 ‘post_tag’가 menu-item-object 뒤에 붙습니다.current-post-ancestor: 현재 열려있는 페이지가 포스트이고, 해당 포스트가 분류되어 있는 카테고리나 그 카테고리의 상위 카테고리들이 메뉴의 링크에 있을 때, 그 메뉴에 출력이 됩니다.current-post-parent: 현재 열려있는 페이지가 포스트이고, 해당 포스트가 분류되어 있는 카테고리들이 메뉴의 링크에 있을 때, 그 메뉴에 출력이 됩니다. 해당 포스트를 직접 포함하고 있는 카테고리에만 출력이 되며, 그 카테고리의 상위 카테고리에는 출력이 되지 않습니다.current-page-ancestor: 현재 열려있는 웹문서가 페이지 형식의 글이고, 해당 페이지의 parent page나 그 parent page의 상위 페이지들이 메뉴의 링크에 있을 때, 그 메뉴에 출력이 됩니다.current-menu-parent: 현재 열려있는 웹문서(페이지나 포스트 등의 문서의 타입에 관계없이)의 해당 포스트를 직접 포함하고 있는 카테고리나, 해당 페이지의 parent page로 가는 메뉴에만 출력이 됩니다.
그리고, 놓치기 쉬운 것이 하나 있는데, 위의 그림처럼 ‘Appearance>Menus’ 페이지 상단에 있는 Sreen Options 버튼을 클릭하면 CSS Classes 라는 체크박스가 있는데 그 체크박스를 클릭하면, 왼쪽 그림처럼 class를 입력할 수 있는 입력필드가 생겨서 해당 li 엘리먼트에 class 명을 지정할 수도 있습니다.
