워드프레스 외모 > 메뉴에서 설정할 수 있는 사이트 메뉴, 정식명칭 '워드프레스 네비게이션 메뉴(WordPress navigation menu)'를 숏코드화 해서, 페이지나 기타 원하는 곳 어디던지 삽입할 수 있게 만들 수 있다.
보통은 이 네비게이션 메뉴를 숏코드화 해서 넣을 필요도 없고 이유도 모를 텐데, 폴리랭
네비게이션 메뉴를 숏코드화 하려면 커스텀 메뉴를 생성하고, 생성한 메뉴를 숏코드에 등록하는 두 가지 단계를 거쳐야 한다. 모든 코드는 워드프레스
워드프레스 커스텀 네비게이션 메뉴 만들기
우선 임의의 커스텀 메뉴를
register_nav_menus( array(
'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');
위의 코드에서 적었던 파란색
코드 안에
wp_nav_menu(array( 'theme_location' => 'custom_menu', 'fallback_cb' => false, ) );
이런식으로 빨간색 부분처럼 추가하면 된다.
사용 가능한 속성들
여기서 사용할 수 있는 코드들은 아래와 같다. 전부 사용해본 건 아니라 공식 도움말을 참조했기 때문에, 일부 코드가 설명과는 다를 수 있다.
허용할 메뉴의 ID, 슬러그(Slug), 이름 등을 입력한다
메뉴를 구성하는
메뉴를 구성하는
메뉴를 감싸고 있는 콘테이너
위에서 말한 코드. 코드 내에 명시하는 메뉴가 없을시 불러올 값을 정한다. 기본값은 페이지 목록이고
CSS로 자유롭게 글과 이미지, 아이콘을 넣어보자
위의
위와 같고 링크 텍스트 앞의 텍스트를 정한다.
위와 같고 링크 텍스트 뒤의 텍스트를 정한다.
메뉴를 표시하거나 리턴할지 정한다고 한다. 기본값은
불러올 메뉴의 계층구조를 결정한다. 여기
사용자 정의 워커 클래스의 인스턴스를 정의한다.
사용할 테마의 위치를 정의한다는데, 여기에 사용할 커스텀 메뉴의 이름을 집어넣으면 된다.
목록 항목을 래핑한다고 함. 기본값은
메뉴의
사용할 수 있는 모든 속성은 위와 같고, 내용은 워드프레스
안녕하세요. 좋은 강의 감사합니다. 알려주신 방법으로 커스텀메뉴 숏코드화해서 불러오기는 성공하였습니다만 가로정렬로 ccs를 수정하려면 어떻게해야할까요? ㅠㅠ
질문이 명확하지 않아 답변하기 애매하지만 CSS로 객체를 가로 중앙에 정렬시키는 방법은
‘text-align: center;’ 을 사용해 중앙정렬 시키거나
‘margin: 0 auto;’ 을 사용해 auto로 중앙정렬 시키거나
‘margin-left: 40%;’ 등으로 적당히 수동으로 중앙쯤에 위치시키거나 하는 방법들이 있습니다.