워드프레스 2차 메뉴 CSS

우리가 보통 2차 메뉴를 만드는 CSS는 이럴것이다. 

<div class="sub-listmenu">
    <ul>
        <li class="current_page_item"><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
    </ul>
</div>

.sub-listmenu { display: flex; height: 60px; padding: 0; align-items: center; justify-content: space-around; border-bottom: 1px solid #d9d9d9;}
.sub-listmenu ul { margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.sub-listmenu li {list-style: none; display: inline-block; position: relative; }
.sub-listmenu li a {  position: relative; color: #888; font-size: 20px; font-weight: 400; padding: 17px 12px; margin:0 25px; 
    text-decoration: none; display: inline-block; transition: all 0.2s; }
.sub-listmenu li a:hover {color: #000; }
.sub-listmenu li.current_page_item a { color: #000; font-weight: 500;}
.sub-listmenu li a::after { display: none; position: absolute; content: ''; width: 100%; bottom: 3px; height: 3px; background-color: #1E62CB; left: 0;}
.sub-listmenu li.current_page_item a::after { display: block;}

 

---

그러나 나의 경우 워드프레스에서 2차 메뉴를 뽑아 사용하는 법은 아래와 같다. 

function.php 에 아래소스 추가

// 상위 페이지 id 가져오기
function get_top_parent_id(){
	global $post;
	if( $post->post_parent ){
			$ancestors = array_reverse( get_post_ancestors( $post->ID ) );
			return $ancestors[0];
	}
	return $post->ID;
}

 

code snippets 플러그인에 코드 입력해놓고
재사용한다.

필요한 곳에 숏코드로 가져온다.

$args = array(
	'child_of' => get_top_parent_id(),
	'title_li' => '',
);
wp_list_pages( $args );

style.css에 CSS 넣기

/* sub-2차메뉴 */

.sub-listmenu { display: flex; height: 60px; padding: 0; align-items: center; justify-content: space-around; border-bottom: 1px solid #d9d9d9;}
.sub-listmenu ul { margin: 0 auto; display: flex; align-items: center;justify-content: center;flex-wrap: wrap;}
.sub-listmenu li { list-style: none; display: inline-block; position: relative;}
.sub-listmenu li a {position: relative; color: #888; font-size: 20px; font-weight: 400; padding: 17px 12px; margin:0 25px; text-decoration: none;
	display: inline-block; transition: all 0.2s;}
.sub-listmenu li a:hover {color: #000; }
.sub-listmenu li.current_page_item a { color: #000; font-weight: 500;}
.sub-listmenu li a::after { position: absolute; content: ''; width: 100%; bottom: 3px; height: 3px; background-color: #1E62CB; left: 0; display: none;}
.sub-listmenu li.current_page_item a::after { display: block;}

 

이걸 템플릿으로 만들어 넣으면, 
2차 메뉴가 알아서 부모페이지를 인식하여 자동으로 뿌려진다. 
현재 페이지를 인식하여 active 상황도 잘 먹은걸 알 수 있다.