programing

Wordpress - 하위 메뉴 항목 페이지를 선택/로드할 때 상위 메뉴 항목을 강조 표시합니다.

powerit 2023. 3. 4. 15:14
반응형

Wordpress - 하위 메뉴 항목 페이지를 선택/로드할 때 상위 메뉴 항목을 강조 표시합니다.

기본 메뉴도 있고 서브 메뉴도 있어요.저는 워드프레스에 대한 경험이 거의 없기 때문에 지금 당장은 자세한 내용을 알아볼 시간이 없습니다.따라서 서브메뉴 페이지 중 하나로 이동할 때 상단 메뉴 항목을 강조 표시하는 가장 간단한 방법은 무엇입니까?(javascript와 pure css를 모두 사용하여 요소 ID와 "current-cat-parent" 클래스를 사용하여 색상 속성을 설정하려고 했지만 둘 다 작동하지 않았습니다).
어떤 도움이라도 대단히 감사합니다.

주의: 저는 카멜레온이라는 테마를 사용하고 있습니다.

current-menu-item 클래스를 .current-menu-tem 클래스에 다음과 같이 할당할 수 있습니다.

.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{
    color: #777777 !important; /* highlight color */
}

상위 페이지 메뉴가 강조 표시됩니다.

페이지를 참조해 주세요.

테마의 바닥글에 다음 코드를 삽입할 수 있습니다.php 파일은 본문 태그 바로 앞에 있습니다.

<!-- Highlight parent page link when on child page -->
<?php if (is_page()) {   //  displaying a child page ?>
    <script type="text/javascript">
        jQuery("li.current-page-ancestor").addClass('current-menu-item');
    </script>
<?php } ?>

이것의 장점은 PHP에 있기 때문에 코드가 역동적이라는 것입니다.현재 페이지의 링크를 활성화하는 다른 네이티브 WordPress nav li 클래스를 추가하는 기능만 수행합니다.

여기 간단한 글을 써서 어떻게 작동하는지 설명했습니다.하위 페이지/하위 페이지를 볼 때 상위 페이지 탐색 링크를 강조 표시하는 방법!

궁금하신 점이 있으시면 언제든지 말씀해 주세요.

편집에 조금 문제가 있었지만 쉬운 해결책을 찾았습니다.Wordpress Storefront 테마를 사용하고 있습니다.자녀 테마에 붙여넣기만 하면 됩니다.style.css파일:

li.current-menu-parent >a {
  color:red !important;
}

재밌는.솔루션이 현재 자녀가 아닌 부모를 강조 표시했습니다.하지만 그것이 나를 올바른 길로 인도했고 결국, 이것이 내가 필요로 하는 것이었다.

li.current-menu-parent >a, .current-menu-item >a {
    color: red !important;
}

WordPress 5.7

테스트 완료 및 동작, 2021년

2021년아직도 해결책을 찾는 사람이 있다면, 여기 있습니다.

그러면 부모와 그 자녀가 강조 표시됩니다.하위 메뉴가 없는 경우 상위 메뉴가 강조 표시됩니다.기억하세요.!important필수 항목입니다.

.current-menu-parent > a,
.current-menu-item a { 
    color: blue !important; /* Important is required */
}

.current-menu-ancestor효과가 없었습니다. .current-page-ancestor했다.

이건 나한테 효과가 있었어.다음 CSS를 사용하면 활성 메뉴를 스타일링할 수 있습니다.세 가지 메뉴까지 있습니다.

.current-menu-ancestor{ background:RED !important; }
.current_page_parent{background:GREEN !important;}
.active{background:YELLOW !important;}
  • 현재 활성 페이지를 나타내는 메뉴 버튼은 노란색입니다.
  • 현재 활성 페이지를 나타내는 버튼이 중첩된 경우, 상위 페이지는 녹색이 됩니다.그렇지 않으면 메뉴의 최상위 버튼이 녹색이 됩니다.

  • 그리고 가장 중요한 것은 (메뉴에 표시되는 중첩 레벨의 수에 관계없이) .current-menu-ancestor 클래스가 있는 요소는 모두 빨간색 배경으로 스타일링됩니다.

또한 .current-menu-ancestor 스타일만 지정할 수 있으며 모든 상위 메뉴 항목이 스타일링됩니다.

언급URL : https://stackoverflow.com/questions/15603950/wordpress-highlight-the-parent-menu-item-when-child-menu-item-page-is-selected

반응형