wp_nav_menu에 커스텀 HTML을 추가하는 방법

wp_nav_menu에 커스텀 HTML을 추가하는 방법

WordPress와 WordPress 메뉴 시스템에 익숙합니다.하지만 커스텀 HTML을 추가하는 방법을 찾고 있습니다.wp_nav_menu().

다음과 같은 메뉴를 만들려고 합니다.

제품의 드롭다운 메뉴에는 이미지와 링크가 포함되어 있습니다.이걸 다시 만들고 싶어요.몇 가지 플러그인을 살펴봤지만 코드를 쓰는 게 낫겠어요.

이미지나 링크를 하드 코딩하는 것은 상관없지만 Word Press를 사용하여 메뉴를 관리할 수 있는 유연성을 유지하고 싶습니다.

WordPress가 메뉴 페이지를 통해 항목을 표시하는 방법은 워커 개체를 사용하는 것입니다.이 경우 이 개체의 특정 클래스를 Walker_Nav_Menu라고 합니다.에서 찾을 수 있습니다.wp-includes\nav-menu-template.php.

그Walker_Nav_Menu꽤 간단한 수업입니다.링크와 메뉴 구조가 어떻게 구축되어 있는지 확인할 수 있습니다.기능start_el그리고.end_el메뉴판을 만드는 데 사용됩니다.기능들start_lvl그리고.end_lvl네스트 메뉴용입니다.이 접근법에서는 주로start_el그리고.end_el.

고객님의 고객명functions.php클래스를 만들고 확장하다Walker_Nav_Menu부모 클래스와 매우 유사한 메서드를 사용합니다.

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Copy all the start_el code from source, and modify
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    // Copy all the end_el code from source, and modify
  }
}

이러한 기능에서는$item메뉴 항목입니다.이 메뉴 항목에서는 현재 메뉴 항목에 따라 추가 내용을 조회할 수 있습니다.다음 항목은 포함하지 않았습니다.start_lvl그리고.end_lvl그러나 클래스는 덮어쓰지 않더라도 상위 클래스의 메서드를 자동으로 상속하므로 상관없습니다.

그런 다음 테마 파일에서 다음과 같이 wp_nav_menu를 호출할 수 있습니다.

wp_nav_menu(array(
  'theme_location' => 'main',
  'container' => false,
  'menu_id' => 'nav',
  'depth' => 1,
  // This one is the important part:
  'walker' => new Custom_Walker_Nav_Menu
));

WordPress는 출력되는 코드를 수정할 수 있도록 사용자 지정 클래스와 함수를 사용합니다.

언급URL : https://stackoverflow.com/questions/12250866/how-to-add-custom-html-to-wp-nav-menu