메뉴 항목에 대한 사용자 지정 HTML

WPML CMS 내비게이션 애드온 플러그인을 사용하면 메뉴 항목에 대한 자신만의 HTML로 멋진 탐색 메뉴를 만들 수 있습니다.

예제부터 시작하겠습니다. 다음 이미지와 같이 상단 탐색 메뉴에 아이콘과 간단한 설명을 추가한다고 가정해 보겠습니다.

각 페이지에 아이콘과 설명 텍스트를 담을 수 있는 커스텀 컬럼을 추가할 것입니다. 그런 다음 메뉴 함수에 연결하여 메뉴 항목에서 이러한 필드를 사용하도록 지시합니다.

1단계) 페이지에 커스텀 컬럼 추가하기

각 페이지에 고유한 아이콘과 설명을 표시하기 위해 커스텀 컬럼을 사용합니다.

페이지에 아이콘 및 설명 커스텀 컬럼 추가하기 — 페이지에 아이콘 및 설명 커스텀 컬럼 추��하기

2단계) 메뉴 항목을 생성할 테마 함수 빌드하기

메뉴 항목의 HTML을 생성하는 함수를 만들어야 합니다. 기본적으로 메뉴의 각 항목은 페이지 제목을 갖습니다. 이 기능을 사용하면 메뉴 항목 안에 임의의 HTML을 배치할 수 있습니다.

드롭다운 효과, 섹션 및 기타 모든 것을 포함한 전체 메뉴는 WPML이 계속 작성합니다. 이 기능을 통해 각 항목의 콘텐츠를 제어할 수 있습니다.

제 기능은 다음과 같습니다:

function text_for_menu($page_id, $menu_level){
  $ret = '';
  $icon = get_post_meta($page_id,'icon',true);
  $description = get_post_meta($page_id,'Description',true);
  if($menu_level==0){
    if ($icon) $ret .= '<img width="24" height="24" style="vertical-align: middle; margin:0 5px 0 5px;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
    $ret .= '<br /><span>'.$description.'</span>';
  } else {
    if ($icon) $ret .= '<img width="16" height="16" style="vertical-align: middle; margin:0 5px 0 0;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
  }
  return $ret;
}

기능

‘아이콘’과 ‘설명’이라는 커스텀 컬럼의 콘텐츠를 가져옵니다: get_post_meta($page_id,’icon’,true);
항목이 속한 메뉴 수준을 확인합니다. 상단 메뉴 항목은 “0”이고 드롭다운 항목은 “1”입니다.
상단 메뉴 항목의 경우 24×24픽셀 아이콘, 페이지 제목, 설명이 추가됩니다.
드롭다운 메뉴 항목의 경우 16×16픽셀 아이콘과 페이지 제목이 추가됩니다.

3단계) 해당 함수를 WPML에 연결하기

마지막으로, 메뉴 항목을 생성하기 위해 이 기능을 사용하도록 WPML에 지시합니다. functions.php 파일에 다음 줄을 추가하면 됩니다:

add_filter('icl_nav_page_html', 'text_for_menu', 1, 2);

이것이 하는 일은 WordPress에 text_for_menu라는 함수를 WPML의 icl_nav_page_html에 추가하도록 지시하는 것입니다. 표준 WP 필터이므로 여러 번 호출하고 필드를 점점 더 추가할 수 있습니다.