상세 컨텐츠

본문 제목

wordpress 테마만들기(header.php)-3 메뉴바 만들기

쿠쿠 작업장(web CMS)/wordpress

by eunclove 2014. 10. 17. 15:02

본문

728x90
반응형

워드프레스 메뉴바 만들기


로고 이미지 업로드와 마찮가지로 functions.php에 아래 코드를 삽입해 준다.



register_nav_menus( array(

'menu01(워드프레스에서 생성한 카테고리 이름)' => '01menu(워드프레스에서 관리자에서 보여질 이름)',

'menu02' => '02menu',

));


메뉴를 하나만 쓸경우 한줄만 입력을 하시고 두개 이상 다중 메뉴를 쓸경우 위와 같이 ,표시로 만들어 주시면 됩니다.


관리자로 들어가시게 되면 아래처럼 내비게이션이란 탭이 생긴걸 보실수 있습니다. 위에서 메뉴를 두개를 설정하였기 때문에 아래에도 내비게이션을 두가지를 선택 하실수 있게 나옵니다.





이제 메뉴를 삽입할 페이지(header.php or index.php)에 아래의 코드를 입력해 줍니다.


<?php

wp_nav_menu( array(

'theme_location' => 'menu01(워드프레스에서 생성한 카테고리 이름)',

));

?>


이렇게 하시며 메뉴 자리에 페이지 목록이 나오는걸 보실 수 있습니다.

왜? 메뉴가 아니고 페이지 목록이 뜨느냐 --- 메뉴 설정이 아직 안되었기 때문입니다.

위에 있는 관리자 모드에서 내게이션내에서 메뉴를 지정해 주시면 메뉴가 나오는걸 보실수 있습니다.

메뉴가 설정 되지 않았을 경우 아무것도 표시되지 않게 하기 위해서는 아래와 같이 코드를 하나더 삽입해 줍니다.



<?php

wp_nav_menu( array(

'theme_location' => 'menu01',

'fallback_cb' => false, //메뉴가 설정되지 않았을 경우 보이지 않게 하는 코드 입니다.

));

?>


자 이제  메뉴를 설정하고 나서 페이지를 보면 아무런 css가 처리 되지 않았기 때문에 모든 메뉴가 아래와 같이 ul 형식으로 출력이 됩니다.



메뉴에 css를 입히기 위해서는 다음과 같은 코드를 삽입해 줍니다.


<?php

wp_nav_menu( array(

'theme_location' => 'menu01',

'fallback_cb' => false,

'menu_class' => 'menu01', class명을 지정해 줍니다.

));

?>




728x90

관련글 더보기

댓글 영역