테마를 만들다가 메뉴 스타일링 관련 질문...

여기서 질문하는 게 맞는지 모르겠습니다만 일단 믿고 질문해봅니다 ^^;

워드프레스 테마를 처음부터 만들어보고 있습니다.

메뉴를 만들고 화면에 띄우는 것 까지 했고요.

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로 상속을 받고 해야 하나 보군요.

    (댓글에 코드는 제가 올린 대로가 아니고 저렇게 변경이 되어 올라갔네요)

    감사합니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요