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

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 파일을 연결하는 코드를 적어주면 됩니다.

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

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

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

Cap 2016-07-03 13-02-19-211

 

위 방법을 응용하면 상태 체크 후 사이드 메뉴에도 현재 위치를 표시할 수도 있고, 포트폴리오나 게시판 글 종류에도 적용을 할 수 있습니다.

 

끝.