여기서 질문하는 게 맞는지 모르겠습니다만 일단 믿고 질문해봅니다 ^^;
워드프레스 테마를 처음부터 만들어보고 있습니다.
메뉴를 만들고 화면에 띄우는 것 까지 했고요.
wp_nav_menu()함수에 menu-class를 통해 css파일에 연결까지는 성공 했습니다.
다른 한편으로는, W3 CSS라는 프레임워크를 붙이려고 해봤는데요.
그중에 드롭다운 메뉴를 사용해보려고 했습니다.
<div class="w3-dropdown-hover"> <button class="w3-button">드롭다운버튼</button> <div class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button">메뉴 1</a> <a href="#" class="w3-bar-item w3-button">메뉴 2</a> <a href="#" class="w3-bar-item w3-button">메뉴 3</a> </div> </div>
이런식으로 들어가는데요. 이걸 어떻게 해야 할지 잘 모르겠습니다.
문제는 전체를 감싸는 w3-dropdown-hover 라는 것이 있고, 그 안에 w3-dropdown-content 가 있고, 그 안에 각각의 항목들은 w3-bar-item, w3-button이어야 하는데요.
wp_nav_menu(array( 'container_class' => 'menu-bar', 'menu_class' => 'w3-dropdown-hover custom-setting' ));
이렇게 해버리면... 메뉴바 전체가 w3-dropdown-hover 가 적용되지만 style.css 에서는
.custom-setting { ??? }
메뉴 하나하나를 어떻게 해야 할지 모르겠고요.
말로 표현하기가 참 애매하네요.
워드프레스식의 메뉴가 아니라 하드코딩해 넣어야 하나 하는 생각을 하고 있습니다.
혹시 이 부분에 대해 아시는 분이 계시다면 좀 도와주세요..
태그가 이상하군요.
아래처럼 나오는건 명백하게, HTML 사용방법이 틀렸습니다.
<div class="<span class="marker"><strong>w3-dropdown-hover</strong></span>">
class 속성 안에는 태그가 들어갈 수 없습니다.
<div class="w3-dropdown-hover"> 이렇게 해주셔야 겠죠.
물론 wp_nav_menu 함수에도 아래처럼 하셔야 겠죠.
<?php wp_nav_menu( array(
'container' => '',
'theme_location' => 'main_menu',
'menu_class' => 'main_menu_css'
));
?>
메뉴를 커스텀 하시려면 Walker_Nav_Menu 클래스에 대해서 알아보세요.
https://developer.wordpress.org/reference/classes/walker_nav_menu/
보시면 아시겠지만 nav_menu_css_class 필터가 있어서 메뉴마다 클래스를 추가할 수 있도록 되어있습니다.
즉 기본적으로 메뉴마다 각각 다른 class가 추가되거든요.
기본적인 Walker_Nav_Menu 대신 다른걸 등록해서 사용하신건지? 의문입니다.
nav_menu_css_class 필터에 대해서도 알아보세요.
https://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_css_class
wp_nav_menu 함수를 안써도 되긴 하지만, 안쓰면 관리적인 측면에서는 불편한게 있을겁니다.
wp_nav_menu 함수를 사용해서 메뉴를 만들면
보통은 메뉴 하나하나 별로 아이디와 클래스가 추가되거든요.
그래서 메뉴별로 CSS 속성을 추가할 수 있습니다.
그런데 그렇게 안된다는 거죠?
사이트 주소도 알려주시겠어요?
올려주신 예제에서
메뉴 하나를 선택하려면 :nth-child() 선택자를 사용해보세요.
.w3-bar-item:nth-child(2) { color: red; }
지금 다른 작업을 하고 있어서 밤쯤에 사이트 주소를 올려보겠습니다.
저도 어떤 상황인지 설명드리기가 애매하네요.
다시 정리해보면 w3 css 프레임워크에서 드롭다운 메뉴를 하려면
<div class="a"> <div class="b"> <div class="c"> </div> </div> </div>
형태가 필요합니다.
<div class="w3-dropdown-hover"> <button class="w3-button">드롭다운버튼</button> <div class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button">메뉴 1</a> <a href="#" class="w3-bar-item w3-button">메뉴 2</a> <a href="#" class="w3-bar-item w3-button">메뉴 3</a> </div> </div>
이게 예제고요. ( https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover )
<div class="w3-dropdown-hover"> <?php wp_nav_menu( array( 'container' => '', 'theme_location' => 'main_menu', 'menu_class' => 'main_menu_css w3-button' )); ?> </div>
이런 식으로 header.php에 넣었습니다. 맞는 건 아닌 것 같지만요.. 어떻게든 우겨넣어 보려고요.
일단 w3-dropdown-hover 클래스는 잘 적용 됐지만... 그 이상 무엇도 아니네요.
메뉴1, 메뉴2, 메뉴3에 w3-bar-item 클래스를 지정하는 법도 모르겠고요. w3-button 도 올바른 적용 범위가 아닌 것 같고..
지금 이런 상황입니다.
wp_nav_menu() 를 쓰지 말까 싶기도 하고요. 그러면 워드프레스의 메뉴관리, 페이지관리의 혜택은 못 보게 되겠죠..?
네 제가 찾던 것이 그게 맞습니다.
메뉴들의 마크업을 바꾸고 싶었던 거예요.
php로 상속을 받고 해야 하나 보군요.
(댓글에 코드는 제가 올린 대로가 아니고 저렇게 변경이 되어 올라갔네요)
감사합니다.