드롭다운메뉴 만들기 – Jquery를 이용해서 워드프레스에 적용하기

순수 CSS만을 이용한 드롭다운 메뉴를 만드는 방법을 소개한데 이어서 Jquery를 사용한 드롭다운 메뉴를 만드는 방법을 소개하려고 합니다. 저도 자바스크립트는 아예 모르고 그 Javascript를 이용한 Jquery도 당연히 모르는데, 몇 번 적용을 해 보니깐 방법만 알면 그렇게 어려운 것 같진 않아서 적용하는 방법만 소개를 해 보려 합니다.

검색을 해 보니깐 아래와 같은 소스들이 있었는데, 중복된 소스들이 많았습니다.

Jquery 드롭다운 메뉴 만들기

적용하기 전에 아래와 같은 것들을 우선 살펴봐야 됩니다.

  • HTML 마크업 : 앞서 포스팅한 CSS 드롭다운 메뉴의 내용을 참고하시기 바랍니다.
  • 브라우저간 호환 여부 : Jquery 드롭다운 메뉴 방법 중에 IE6을 지원하지 않는 경우가 적지 않습니다. IE6에서도 제대로 동작하기를 원하는 분은 확인해야 할 부분입니다.

jQuery Multi Level CSS Menu #2 방법을 워드프레스에 적용하기

처음엔 제 취향에 맞는 Smooth Navigation Menu를 적용했었는데, 인터넷 익스플로러 6 버전에서 제대로 동작을 하지 않아서, 여기서는 IE6을 지원하면서 Smooth Navigation Menu와 유사한 jQuery Multi Level CSS Menu #2를 적용해 보겠습니다.

HTML 마크업 확인

jQuery Multi Level CSS Menu #2 페이지에 가보면 메뉴 제작자가 설명을 잘 해 놓고 있습니다. The HTML 항목 밑의 HTML 소스를 보면 워드프레스가 메뉴를 출력하는 방식과 동일하기 때문에 워드프레스에서도 사용가능하다는 것을 알 수 있습니다.

css, js, 이미지 파일 업로드 하기

The external files 항목에 보면 필요한 파일들(jqueryslidemenu.css, jqueryslidemenu.js, down.gif, right.gif )이 있습니다. 마우스 오른쪽 버튼을 클릭한 후에 ‘다른 이름으로 저장’을 클릭해서 모두 컴으로 다운로드 받습니다.

다운 받은 파일을 계정의 테마 디렉토리로 업로드 합니다. 예를 들면, 이미지 파일은 images 디렉토리, 자바스크립트 파일은 js 디렉토리, css 파일은 css 디렉토리로 업로드 하면 됩니다.

head 태그 안에 css와 javascript 링크 넣기

The CSS/ JavaScript 항목에 밑에 나와 있는 소스를 header.php 파일내의 head 태그의 적당한 곳에 붙여넣어야 합니다. 붙여 넣기 전에 소스에 나와있는 파일들의 경로들을 계정에 올린 파일의 경로에 맞게 수정해 줘야 합니다.

워드프레스에서 포스트나 페이지의 경로는 ‘Setting>Permalinks’에서 설정한 실재하지 않는 가상 경로이지만, 이미지나 자바스크립트 파일들의 경로는 실제 계정의 경로를 사용해야 합니다. 만약 계정에 설치된 테마의 디렉토리 이름이 yourtheme 이라면 테마의 경로는 아래와 같이 됩니다.

http://yoursite.com/wp-content/themes/yourtheme

위와 같은 테마의 루트 디렉토리의 경로는 워드프레스에서 제공하는 <?php bloginfo('template_directory'); ?> 템플릿 태그로 대체할 수 있습니다. 따라서 The CSS/ JavaScript 항목에 있는 코드를 아래와 같이 계정으로 업로드한 파일의 경로에 맞게 수정한 후에, 테마의 header.php의 적당한 곳(<?php wp_head(); ?> 바로 밑에 줄)에 붙여넣기 하면 됩니다.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jqueryslidemenu.js"></script>

그리고, 계정에 올린 right.gif 와 down.gif 파일의 경로도 수정해 줘야 합니다. 보통 css 파일에서 이미지를 사용하는데, jQuery Multi Level CSS Menu #2는 jqueryslidemenu.js에서 사용하고 있습니다. 메모장이나 notepad++ 과 같은 텍스트 에티터로 jqueryslidemenu.js 파일을 열어서 10번째 줄 쯤에 있는 아래의 부분을,

var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

경로에 맞게 아래와 같이 바꿔줍니다.

var arrowimages={down:['downarrowclass', 'http://yoursite.com/wp-content/themes/yourtheme/images/down.gif', 23], right:['rightarrowclass', 'http://yoursite.com/wp-content/themes/yourtheme/images/right.gif']}

아래와 같이 상대경로를 사용해도 됩니다.

var arrowimages={down:['downarrowclass', '../wp-content/themes/yourtheme/images/down.gif', 23], right:['rightarrowclass', '../wp-content/themes/yourtheme/images/right.gif']}

wp_nav_menu 수정하기

워드프레스에서 메뉴를 출력하는 함수인 wp_nav_menu를 찾아서 메뉴의 요소에 사용되는 엘리먼트의 id와 클래스명을 jQuery Multi Level CSS Menu #2 에서 사용되는 id와 class를 일치시켜줘야 합니다.

‘Appearance>Editor’에서 header.php를 열어보면 아래와 같이 wp_nav_menu 부분이 있습니다. 괄호안에 사용된 파라미터들은 테마마다 다를 수 있습니다. ( 구버전의 경우 wp_list_pages 함수를 사용하는데, 그럴 경우 워드프레스 3.0 메뉴로 수정을 해 줘야 합니다. ) 

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

jQuery Multi Level CSS Menu #2에서 ul 태그를 둘러싸고 있는 div 태그의 myslidemenu 라는 아이디를 출력하기 위해서 wp_nav_menu에 아래와 같은 파라미터를 사용해야 합니다.

'container_id' => 'myslidemenu'

jqueryslidemenu 라는 클래스명을 출력하기 위해서는 아래와 같은 파라미터를 사용해야 합니다.

'container_class' => 'jqueryslidemenu'

그리고, 원래 wp_nav_menu 에서 사용된 아래와 같은 theme_location 파라미터는 그대로 사용을 해야 합니다.

'theme_location' => 'primary'

위의 세개의 파라미터를 각각 쉼표로 구분해서, wp_nav_menu에 적용하면 아래와 같이 됩니다. ( 참고 : Function Reference/wp nav menu )

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_id' => 'myslidemenu', 'container_class' => 'jqueryslidemenu' ) ); ?>

아래와 같이 원래의 wp_nav_menu는 주석처리하고 그 밑에 바로 위의 코드를 붙여넣기 한 후에 실제 웹상에서 테스트 해보고 이상이 없으면, 주석처리한 원래의 메뉴는 삭제하면 됩니다.

<!--   <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>   -->
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_id' => 'myslidemenu', 'container_class' => 'jqueryslidemenu' ) ); ?>

웹 로딩 속도를 위한 고려사항

반드시 필요한 작업은 아니지만, 위와 같이 드롭다운 메뉴가 이상없이 작동한다고 해도 웹 페이지의 로딩 시간을 위해 고려해 봐야 할 것이 있습니다.

우선, Jquery 드롭다운 메뉴를 스타일링하기 위해 style.css 파일과 별도의 jqueryslidemenu.css 파일을 사용하고 있는데, 브라우저가 해당 사이트의 페이지를 보여주기 위해 열어야 할 파일이 많아지면 페이지가 열리는 시간이 느려집니다. 그래서 jqueryslidemenu.css 파일을 계정으로 업로드 하지 않고, jqueryslidemenu.css 내의 코드들을 style.css에 붙여넣기 합니다. 그 후에 header.php 부분에 붙여넣은 아래와 같은 코드는 없애 줍니다.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/jqueryslidemenu.css" />

아래와 같은 코드를 통해서 jquery.min.js 파일을 외부 사이트에서 불러오고 있는데, 만약 외부 사이트와의 접속이 느려지면 페이지가 로딩되는 시간이 오래 걸립니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

위의 주소로 접속을 해서 해당 파일을 다운로드 받은 후에 계정의 js 디렉토리로 업로드 합니다. 그 후에 아래와 같이 파일의 경로를 수정해 주면 페이지 로딩 속도를 빠르게 할 수 있습니다. 그런데 파일 크기가 꽤 커서 트래픽을 조금 잡아 먹긴 합니다.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

카테고리의 다른 글 목록