동적으로 활성 상태로 설정

Question

이 문제가 자주 발생하여 해결책을 찾을 수 없습니다. 상단 탐색 기능이있는 Wordpress 사이트가 있습니다. 이것이 내 header.php에 있고 모든 페이지에 사용 되었기 때문에 각 페이지에 대한 활성 메뉴 상태를 하드 코딩 할 수 없습니다.

각 페이지에 대해 활성화 상태를 동적으로 설정하려면 어떻게해야합니까?

<nav id="main-menu" class="padbot"> 
<ul id="ce"> 
    <li class="cemenu"><a href="<?php echo $base_url;?>/about">About</a></li> 
    <li class="cemenu"><a href="<?php echo $base_url;?>/consulting">Consulting</a></li> 
    <li class="cemenu"><a href="<?php echo $base_url;?>/intelligence">Intelligence</a></li> 
    <li class="cemenu"><a href="<?php echo $base_url;?>/academy">Academy</a></li>   
    <li class="cemenu"><a href="<?php echo $base_url;?>/blog">Blog</a></li> 
    <li class="cemenu"><a href="<?php echo $base_url;?>/contact">Contact</a></li> 
</ul> 

나는 이미 설정 내 활성 상태의 특성을 가지고 그 "활성"라는 CSS 클래스했습니다 :

여기에 내 현재 탐색 코드입니다. 이상적으로 내가 찾고있는 것은 "About"페이지 (또는 다른 페이지들)에서 활성 상태를 위해 생성 한 클래스가 현재 li 클래스에 추가 될 때입니다.

예 :

<li class="cemenu active"><a href="<?php echo $base_url;?>/about">About</a></li> 

감사합니다!

Answer 1

의 행을 따라 뭔가를 시도해 볼 수 있습니다.

<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>"><a href="<?php echo $base_url;?>/about">About</a></li> 

Answer 2

당신은이 방법으로 수행 할 수 있습니다

이 URL에서 page 들어있는 <a>에 active 클래스를 추가됩니다.

$(function(){ 
    var url = window.location.href; 
    var page = url.substr(url.lastIndexOf('/')+1); 
    $('.cemenu a[href*="'+page+'"]').addClass('active'); 
}); 

하고 부모 리튬에 클래스를 추가 할 경우이에 마지막 줄을 교체하고 CSS 클래스는 다음과 같이해야한다 :

.active a{ 
     css 
     properties 
     for active li's a 
} 

// using closest 
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active'); 

또는

// using parent 
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active'); 

just tryout the fiddle here

Answer 3

먼저, '활성'링크 스타일링을 위해 준비한 CSS 의사 클래스가 : 상황에

a:active {css} 

을, 당신은 당신의 스타일에이 클래스를 추가해야합니다 :

.active a, a:active {css} 

하지만 PHP 쪽에서는 CSS보다 더 많은 것을 필요로 할 것입니다. 아마도 다른 사람이 당신을 도울 것입니다. jQuery를 사용하는 자바 스크립트 솔루션이있을 것이고, 실제 위치를 찾아 CSS 선택기를 적절한 요소에 삽입 할 것입니다.

this article 및 this other one (영문)을 확인하십시오. 그것은 당신을 도울 것입니다.

스택 오버플 참조 :

• How do I target each menu different items on active state in Wordpress
• How to add Active states and icons in wordpress wp_nav_menu()
• Loosing Nav Active State in Wordpress Dynamic Menu
• google search

Answer 4

이 같은 시도 :

을

get_page_link와 같은 wordpres 기능을 사용하면 Server Super Global을 사용하는 것보다 좋을 것입니다. 좋지 않습니다. 당신은 폴더가 아닌 문서 루트에 워드 프레스가 있다면이 또한 실패, 당신이 시작할 수 있도록 단순한 예제 :

Answer 5

당신은이 같은 class="active"을 추가 preg_replace이다()를 사용할 수 있습니다

ob_start(); 
echo '<ul> 
    <li><a href="page1.php">Page 1</a></li> 
    <li><a href="page2.php">Page 2</a></li> 
    </ul>'; 
$output = ob_get_clean(); 
$pattern = '~<li><a href="'.$url.'">~'; 
$replacement = '<li class="active"><a href="'.$url.'">'; 
echo preg_replace($pattern, $replacement, $output); 

Answer 6

당신은 당신의 홈 페이지에 다음이

<li class="<?php 
       if($this_page=='Home'){ 
        echo 'active'; 
       } 
      ?>"> 
     Home 
</li> 
<li class="<?php 
       if($this_page=='Contact'){ 
        echo 'active'; 
       } 
      ?>"> 
     Contact 
</li> 

처럼 시도하고 있습니다

$this_page='Home'; 

그리고 귀하의 연락처 페이지에

$this_page='Contact';