개요. | ||
|
본 글에서는 CSS 를 이용하여 메뉴만드는 과정 간략 정리한다.
설명. 현재의 우리 테마의 메뉴 부분을 보면 아래 그림처럼 투박하게 생긴 것이 보인다.
테마에서 메뉴를 보이게 하는 처리는 템플릿파일 중에서 header.php (테마 만들기 5편에서 했었던것) 의 아래 부분의 워드프레스에서 제공하는 메뉴 표현 함수에 의하여 보이고 있는 중이다.
header.php 중에서 메뉴를 표현하는 부분. 아래 파란색 부분의 코드에 의하여 위 그림의 메뉴처럼 보이고 있음.
워드프레스에서 제공되는 메뉴 표현함수는 그래픽 요소는 표현하지 않으며, <ul> </ul>로 메뉴 항목들을 트리구조로 표현하는 기능만 있다. 동시에 메뉴블럭의 클래스 이름과 ul 블럭의 아이디를 할당시키고 있다. 즉, CSS에서 제어할 수 있는 타겟을 심어준다. 따라서, 우리는 CSS를 이용하여 이들의 표현을 좀더 메뉴스럽게 변형하여 표현가능하다. wp_nav_menu() 에 인자를 전달하지 않고 호출하면 트리구조에서 0번 자리(즉 주메뉴)는 <ul class="menu"> </ul> 로 만들어지고, 서브메뉴들에는 <ul class="sub-menu"> 처럼 sub-menu 를 기본 클래스명으로 지정된다.
즉, 주메뉴1에 서브메뉴1,2가 있다면 wp_nav_menu() 함수는 아래처럼 트리구조로 html 태그를 넣어준다. <ul class="menu"> <li>주메뉴1 <ul class="sub-menu"> <li> 서브메뉴1</li> <li> 서브메뉴2</li> </ul> </li> </ul>
우리는 위 클래스명 menu, sub-menu 를 이용하여 CSS에서 메뉴표현할때 사용가능하다.
| ||
|
1. css 에서 메뉴 표현처리 | ||
|
아래 CSS구문은 우리테마의 style.css에 추가된 메뉴 처리부 이다. 주메뉴 보이는 것을 사각박스로 표현한다. 초기 상태의 서브메뉴는 보이지 않게 되어있고, 마우스를 주메뉴위에 올린 경우 서브메뉴들이 보이게 처리한 것이다. 아래 처리코드에서는 서브메뉴 보이는 부분에 대한 것은 대충 처리되어 웹에서 보일때는 이쁘지는 않다. 코딩 방법론을 이해하기 위한 코드임.
위 CSS구문이 적용된 메뉴부분은 아래 그림처럼 보인다. 단순히 html 로 처리된 것보다는 메뉴처럼 보인다.
| ||
|
본 글이 포함된 통합 정리 글
WordPress 활용정보 정리 : http://igotit.tistory.com/23
|
174.
'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글
| 워드프레스 회원 관리(가입, 로그인, 회원정보) 플러그인 UserPro 설치, 둘러보기. (0) | 2014.10.31 |
|---|---|
| 워드프레스 테마 만들기 12편. CSS에 구글 나눔고딕 폰트 지정, 테마 스크린샷, 1~12편까지 백업. (0) | 2014.10.31 |
| 워드프레스 테마 만들기 10편. CSS 이용하여 박스 그리드 표현하기. (0) | 2014.10.30 |
| 워드프레스 테마 만들기 9편. CSS 이용하여 레이아웃 만들기. (2) | 2014.10.30 |
| 워드프레스 테마 만들기 8편. 검색창 템플릿 searchform.php 추가하기. (0) | 2014.10.30 |
댓글