워드프레스 메인 커스텀 네비게이션 메뉴 숏코드 만들기

워드프레스 외모 > 메뉴에서 설정할 수 있는 사이트 메뉴, 정식명칭 '워드프레스 네비게이션 메뉴(WordPress navigation menu)'를 숏코드화 해서, 페이지나 기타 원하는 곳 어디던지 삽입할 수 있게 만들 수 있다.

보통은 이 네비게이션 메뉴를 숏코드화 해서 넣을 필요도 없고 이유도 모를 텐데, 폴리랭(Polylang) 등의 다국어 사이트 플러그인을 사용한다던지, 기본설정 되어있는 모바일 네비게이션 메뉴가 맘에 들지 않아서 아예 새로 만들고 싶다던지 할 때 활용할 수 있다.

네비게이션 메뉴를 숏코드화 하려면 커스텀 메뉴를 생성하고, 생성한 메뉴를 숏코드에 등록하는 두 가지 단계를 거쳐야 한다. 모든 코드는 워드프레스 functions.php 안에 입력하면 된다.

워드프레스 커스텀 네비게이션 메뉴 만들기

우선 임의의 커스텀 메뉴를 functions에 등록시켜, 외모 > 메뉴 에서 수정할 수 있는 상태를 만들어야 한다. 아래의 코드를 입력하면 된다.

register_nav_menus( array(
  'custom_menu' => 'Custom Menu',
) );

functions가 적용되길 잠시 기다리면 외모 > 메뉴에서 Custom Menu가 활성화된 걸 확인할 수 있다. 'custom_menu' => 'Custom Menu' 부분만 바꿔서 붙여넣으면 계속해서 새로운 메뉴를 생성할 수 있다.

메뉴 숏코드로 만들기

이제 생성된 메뉴를 숏코드화해서 등록하면 된다. 사실 숏코드화 하는 방법은 굉장히 쉬운데, 기본형으로 코드를 입력하면 특정 스킨에서 모든 스타일을 무시하고 최상단에 위치하는 현상이 나타난다. 때문에 아래와 같은 방식으로 입력하면 오류 없이 커스텀 메뉴를 숏코드화 시킬 수 있다.

function get_menu($args){
    $menu = isset($atts['menu']) ? $atts['menu'] : '';
    ob_start();
    wp_nav_menu(array(
        'theme_location' => 'custom_menu',
    ) );
    return ob_get_clean();
}
add_shortcode('Custom_nav_menu', 'get_menu');

위의 코드에서 적었던 파란색custom_menu부분이 같아야 하고, 빨간색 Custom_nav_menu부분이 숏코드 이름이다. 즉 이렇게 코드를 입력하고 [Custom_nav_menu]라고 입력하면, 설정했던 커스텀 메뉴가 숏코드로 불려진다.

코드 안에 wp_nav_menu(array(안의 내용을 추가하면, 네비게이션 메뉴의 설정을 변경하거나 추가할 수 있다.

    wp_nav_menu(array(
        'theme_location' => 'custom_menu',
        'fallback_cb'      => false,
    ) );

이런식으로 빨간색 부분처럼 추가하면 된다. fallback_cb는 코드에 명시되어있는 메뉴가 없을 경우 어떻게 할지를 정하는 코드인데, 기본값은 페이지목록을 보여주고, false라고 입력하면 빈 공간이 보여지게 된다.

사용 가능한 속성들

여기서 사용할 수 있는 코드들은 아래와 같다. 전부 사용해본 건 아니라 공식 도움말을 참조했기 때문에, 일부 코드가 설명과는 다를 수 있다.

허용할 메뉴의 ID, 슬러그(Slug), 이름 등을 입력한다

메뉴를 구성하는 Class명을 부여한다. 말 그대로 여기서 적은 대로 메뉴의 Class명이 생성됨.

메뉴를 구성하는 ID명을 부여한다.

Ul을 감쌀지 말지 정한다. 기본값은 div

메뉴를 감싸고 있는 콘테이너container의 class명을 지정한다.

container의 ID명을 지정한다.

위에서 말한 코드. 코드 내에 명시하는 메뉴가 없을시 불러올 값을 정한다. 기본값은 페이지 목록이고 false를 입력하면 아무것도 나타나지 않음.

CSS로 자유롭게 글과 이미지, 아이콘을 넣어보자 ::before, ::after 편에서 설명한 ::before속성처럼, 링크의 마크업 앞에 나오는 텍스트를 정할 수 있다.

위의 before와 같지만, 이전이 아니라 이후에 나올 텍스트를 정한다.

위와 같고 링크 텍스트 앞의 텍스트를 정한다.

위와 같고 링크 텍스트 뒤의 텍스트를 정한다.

메뉴를 표시하거나 리턴할지 정한다고 한다. 기본값은 true

불러올 메뉴의 계층구조를 결정한다. 여기 2라고 입력하면, 메뉴 안의 메뉴를 2단계까지 표현한다. 기본값은 0이고, 0은 모든 계층을 표현한다는 뜻이다.

사용자 정의 워커 클래스의 인스턴스를 정의한다.

사용할 테마의 위치를 정의한다는데, 여기에 사용할 커스텀 메뉴의 이름을 집어넣으면 된다.

목록 항목을 래핑한다고 함. 기본값은 id와 ul로 이루어져 있는데, printf()방식으로 변경된다고 함.

메뉴의 HTML내부의 공백을 보존할지 아닐지를 정의한다. 기본값은 보존하는 preserve이고, discard라고 입력하면 보존하지 않음.

사용할 수 있는 모든 속성은 위와 같고, 내용은 워드프레스 wp_nav_menu 공식 도움말에서도 확인할 수 있다.