Home Blog wp_Dev. function 메인네비게이션 현재위치 표시 문제 (싱글포스트)

메인네비게이션 현재위치 표시 문제 (싱글포스트)

메인네비게이션에 ‘블로그(목록 페이지)’를 넣었을 때, 글 제목을 눌러서 싱글 포스트로 들어간 경우 네비게이션의 현재 위치 표시가 없어져서 아쉬움이 있었습니다.

Cap 2016-07-03 11-43-05-654

이 부분을 해결하기 위해 페이지 구조를 한 번 살펴보니, 대부분의 테마에서 ‘current-menu-item’와 같은 current(현재)를 나타내는 이름의 클래스가 네비게이션 목록에 추가됐다 빠졌다가 하는 것을 보고 전 이렇게 해결을 했습니다.

개념 :

1. 현재 페이지의 위치를 확인 ( https://codex.wordpress.org/Conditional_Tags )

2. 만약 싱글포스트 페이지가 열린 상태라면, myscript.js 라는 jquery 파일을 연결

3. jquery로 메인네비게이션 > 블로그 메뉴에 현재 위치를 나타내는 클래스들을 추가 ( ‘current- ‘ 클래스들)

방법 :

1,2 는 functions.php (자식테마 이용 시)에 조건에 따라 js 파일을 연결하는 코드를 적어주면 됩니다.

function mytheme_custom_scripts(){       
	    wp_register_script( 'myscript', get_stylesheet_directory_uri() . '/js/myscript.js', array('jquery'),'1',true);   // .js 파일의 위치를 등록 
    
	    if(is_single()) {   // 현재 페이지가 싱글 포스트인가?를 체크 
		        wp_enqueue_script( 'myscript' );    // 등록한 js 파일을 사용
	    }
}
add_action('wp_enqueue_scripts', 'mytheme_custom_scripts');  // 외부 사이트에 적용

3번의 조건에 따라 불러오는 js 파일에는 jquery를 이용해서 블로그 메뉴에 class를 추가해 주는 코드를 적습니다.

(function($) {
	
	    $('#menu-item-342').addClass("current-menu-item current_page_item current_page_parent");
	    // #menu-item-342 아이디를 가진 html 요소에 뒤에 적힌 클래스를 추가 

})( jQuery );

( ※ jQuery addClass 방법 :?https://api.jquery.com/addclass/ )

메뉴 아이디를 확인하는 방법 (크롬 개발자도구 실행 > id=”#~~~” 확인)