워드프레스 상단 메뉴 만들기


테마에 상단메뉴가 있는 경우는 상관없지만 테마에서 사이드바에만 페이지 리스트를 출력하는 경우, 상단메뉴를 추가하는 법에대해 적어보겠습니다.

방법은 아주 간단 합니다. 사이드바에 출력하는 방식 그대로 원하는 위치에 페이지를 출력하면 됩니다.
물론, 생성한 페이지들을 하나하나의 링크로 만들어서 목록 스타일로(ul, li) 출력하는 방법도 있지만 워드프레스에서 지원하는 페이지 목록 출력 함수를 이용하면 더욱 쉽게 표현 할 수 있습니다.

우선 워드프레스의 기본 테마에서 페이지 목록을 출력하는 부분(sidebar.php)을 찾아보면 아래와 같습니다.

Pages' ); ?>

wp_list_pages“가 원하는 함수 입니다.

하지만 이곳에 포함된 설정값(title_li=

Pages

)을 그대로 상단 메뉴에 사용하게 되면 이상한 레이아웃이 나오게 됩니다.

따라서 상단메뉴에 적용하기 전에 “wp_list_pages“에대해 간략하게 확인 할 필요가 있습니다.
http://codex.wordpress.org/Template_Tags/wp_list_pages

위 링크를 확인하시면 함수의 설정값에대한 자세한 내용들이 나와 있습니다. 그 중에서 이번 설명에서 필요한 부분만 정리해 보겠습니다.

[spoiler ‘simple”설정값들 설명 보기”감추기’]

필요한 설정값들 (arguments)
  • title_li : 페이지 목록의 제목을 출력해 줍니다. 기본 테마의 예를 보면 페이지 목록의 제목에

    Pages

    를 출력해 줍니다. 값을 비워두게 되면 제목이 표시되지 않으며 또한 목록 출력형태에서

      부분도 출력되지 않게 됩니다.

    • sort_column : 페이지 목록의 정렬 방법을 정하게 됩니다. 이름에서 알 수 있듯이 워드프레스의 포스트 테이블(“wp_posts“)의 컬럼을 지정 할 수 있습니다. 가장 문안한 설정값은 ‘menu_order’ 입니다.
    • exclude : 목록에서 제외할 페이지를 선택 할 수 있습니다. 모든 페이지를 출력하려면 이 값은 필요치 않습니다. 제외할 페이지들을 쉼표(,)로 나눠서 적으면 됩니다. 페이지의 아이디(ID)값은 관리자화면(Wp-Admin) > 관리(Manage) > 페이지(Pages) 에서 확인 할 수 있습니다.
    • depth : 부속된 페이지들을 어디까지 목록에 포함할지를 결정합니다. 기본값인 ‘0’으로 설정되면 모든 페이지 목록이 출력됩니다. 제 경우는 부속 페이지 목록을 포함하지 않기위해 ‘1’로 설정했습니다.
    • 나머지 설정값들에대한 자세한 내용은 위에 링크된 페이지를 확인하세요.

    [/spoiler]

    위 설정값들을 적용하여 페이지 출력 함수를 만들어 보겠습니다.
    • title_li= : 상단메뉴에 제목은 필요치 않으며, 따로 “블로그 처음”이나 외부 페이지에 연결하기 위해
    • 목록을 추가하기위해 “title_li“값은 비워두겠습니다

    • 저로서는 따로 제외할 페이지 목록이 없으므로 “exclude“값도 제외합니다. Gallery2에서 wpg2header.php 파일을 만드는 과정에서는 유용하게 사용 할 수도 있습니다.
    • sort_column=menu_order : 제 경우 각 페이지 수정화면에서 “Page Order(쪽 순서)”부분에 순서들을 미리 정해 두었으므로 “sort_column“에 menu_order를 사용했습니다.
    • depth=1 : 부속된 페이지를 목록에 포함하지 않게 하기위해서 “depth“값을 “1”로 했습니다. “-1″로 설정하셔도 같은 결과를 얻을 수 있습니다.

    결과적으로 아래와 같은 함수값을 적용하게 됩니다.

    
    

    이제 실질적으로 블로그에 상단 메뉴를 추가해 보도록 하겠습니다.

    출력되는 페이지 목록의 스타일을 지정하기 위해 페이지 목록을 DIV태그로 감싸서 클래스(class)를 지정합니다. 또한 “title_li“를 비워두었으므로, UL태그로 감싸줄 필요가 있겠죠.

    
    

    위 예제에서 복잡하게 수동으로 추가한

  • 메뉴가 “블로그 처음”에대한 링크 입니다.

    마지막으로 테마의 스타일 파일(style.css)에 상단 메뉴 부분을 추가하겠습니다. 스타일을 지정하지 않을 경우 목록이 세로로 표시되어 버리는 불상사가 발생하게 됩니다.:|
    [spoiler ‘simple”스타일 예제 보기”감추기’]

    [/spoiler]

    위 예제에서 눈여겨 볼 부분은
    • 위 예제는 현재 제 블로그에 적용중인 스타일이기때문에 다른 테마를 사용하시는 분들께서는 아래에 언급할 내용을 제외하고는 각자의 테마에 맞게 추가, 제거, 수정 하셔야 합니다.
    • "ul.menu"의 "list-style: none;" : 기본적으로 지정된 목록 스타일을 초기화
    • "ul.menu li"의 "display: inline;" : 세로로 출력되는 목록을 가로로 출력
    • "ul.menu li.current_page_item a" : 페이지 메뉴를 클릭해서 페이지에 접속했을때 그 메뉴의 클래스(class)가 "current_page_item"으로 바뀌게 됩니다. 따라서 이 부분에 스타일을 지정해 두면 현재 페이지의 출력 스타일이 다른 메뉴와 차별화 됩니다.

    이제 모든 준비가 끝났습니다. 테마 템플릿의 원하는 곳에 위에 작성해둔 페이지 목록 태그를 추가하시면 됩니다. (일반적인 테마의 경우 header.php파일)

    알고보면 간단한 내용인데 너무 장황하게 설명했나 하는 느낌이 살포시 드네요.^^;
    물론 이 설명을 응용하면, 상단메뉴만 있고 사이드바에 페이지 메뉴가 없는 테마에 사이드바에 페이지 목록을 출력하는것도 충분히 가능할것입니다.:)


    2 responses to “워드프레스 상단 메뉴 만들기”

    1. 아 감사합니다 !
      특정페이지로 가도 그 부분이 변하지가 않아서 골치 아펏는데 이렇게 또 정리해주시니 정말 감사합니다. :)