WordPress 메뉴 항목에 사용자 정의 필드 추가

게시 됨: 2021-03-23

웹사이트의 메뉴는 사이트를 디자인할 때 종종 무시됩니다. 이는 전통적으로 맞춤화하기가 기술적으로 어려웠기 때문일 수 있습니다. 이것은 이제 WordPress 메뉴 사용자 정의 필드를 비교적 쉽게 추가할 수 있는 몇 가지 새로운 후크를 도입한 WordPress 5.4에서 변경되었습니다.

문제의 후크는 wp_nav_menu_item_custom_fields 및 wp_nav_menu_item_custom_fields_customize_template 작업 후크입니다. 이를 사용하여 이제 관리 메뉴 편집 페이지와 사용자 정의 옵션 패널 모두에서 메뉴 항목에 고유한 사용자 정의 필드를 쉽게 추가할 수 있습니다.

이 기사에서는 wp_nav_menu_item_custom_fields 후크를 사용하여 메뉴 항목에 고유한 사용자 정의 필드를 추가할 수 있는 몇 가지 간단한 방법을 살펴보고 코딩하지 않고도 사용자 정의 필드를 추가하는 데 사용할 수 있는 두 가지 플러그인을 살펴보겠습니다. .

시작하겠습니다.

WordPress 메뉴 사용자 정의 필드 후크

wp_nav_menu_item_custom_fields 후크는 메뉴 화면에만 해당되며 다음과 같이 설명됩니다.

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );
  • 정수 $id 는 메뉴 항목 ID입니다.
  • $menu_item 개체는 메뉴 항목 데이터 개체입니다.
  • $depth 정수는 메뉴 항목의 깊이입니다.
  • $args 는 메뉴 항목 인수의 개체입니다.

후크는 메뉴 편집기에서 탐색 메뉴 항목의 이동 버튼 직전에 실행되며 wp-admin/includes/class-walker-nav-menu-edit.php 파일의 242번째 줄에 소개됩니다.

매우 간단한 예를 통해 실제로 이를 입증할 수 있습니다. 활성 테마의 functions.php 파일을 열고 다음 코드를 추가하세요.

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

이제 메뉴 편집 관리 페이지로 이동하면 아래 스크린샷과 같이 각 메뉴 항목 아래에 에코된 문자열이 표시됩니다.

물론 이것은 기능이 전혀 없지만 메뉴를 편집할 수 있는 방법을 보여줍니다. 이제 사용자 정의 필드의 형태로 몇 가지 간단한 기능을 추가하여 더 유용한 것을 시도해 보겠습니다.

코드를 사용하여 WordPress 메뉴 항목 사용자 정의 필드 추가

이 예에서는 모든 메뉴 항목에 설명을 삽입할 수 있는 WordPress 메뉴 사용자 정의 필드를 만들 것입니다.

1단계: 출력 추가

시작하려면 먼저 관리자 사용자가 설명을 채울 수 있는 입력 필드를 표시할 콜백 함수를 만듭니다. 이를 수행하는 코드는 다음과 같습니다.

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

이 코드를 functions.php 파일에 추가하고 저장하십시오. 이제 WordPress 웹 사이트의 관리 영역에 다시 로그인하고 메뉴 화면을 열면 필드가 표시되어야 합니다. 우리의 경우 이것을 '항목 설명'이라고 합니다. 물론 위의 코드를 자유롭게 편집하여 원하는 대로 필드 이름을 지정할 수 있습니다. 고유한 이름이어야 함을 명심하십시오.

2단계: 입력 저장

다음으로, 입력이 저장됨을 의미하는 데이터베이스 포스트 메타 테이블의 필드 값을 업데이트할 코드를 아래에 삽입합니다.

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

이 코드를 functions.php 파일에 저장하면 WordPress 관리자로 돌아가 메뉴 항목을 열고 필드에 설명을 추가할 수 있습니다. 다음으로, phpMyAdmin 데이터베이스로 이동하면 포스트 메타 데이터베이스 테이블에서 항목을 볼 수 있어야 합니다.

메뉴 관리자에서 값을 변경하면 데이터베이스에 반영되어야 합니다. 마찬가지로 값을 삭제하면 완전히 사라집니다.

3단계: 메뉴 필드 값 표시

다음으로 get_post_meta 함수와 nav_menu_item_title 후크를 사용하여 저장된 메뉴 필드 데이터를 검색하고 프런트 엔드 메뉴에 표시하는 방법을 보여줍니다. functions.php 파일에 아래 코드를 추가하세요.

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

nav_menu_item_title 후크는 메뉴 항목의 제목을 필터링하며 wp-includes/class-walker-nav-menu.php 파일에서 225번째 줄 주변에서 찾을 수 있습니다.

4개의 매개변수, 메뉴 항목의 제목 문자열, 현재 메뉴 항목, wp_nav_menu() 인수의 개체, 메뉴 항목의 깊이인 정수를 허용합니다.

이제 메뉴 항목 제목 아래에 설명이 표시되어야 하며 적절한 CSS를 사용하여 웹사이트에 맞게 스타일을 지정할 수 있습니다.

플러그인을 사용하여 WordPress 메뉴 항목 사용자 정의 필드 추가

WordPress 메뉴에 사용자 정의 필드를 추가하기 위해 코드를 작성하는 일에 휘말리고 싶지 않다면 좋은 소식입니다. 이 작업을 수행할 수 있는 플러그인이 있습니다.

고급 사용자 정의 필드

매우 인기 있고 다재다능한 Advanced Custom Fields 플러그인은 WordPress 메뉴에 사용자 정의 필드를 추가할 수 있는 기능으로 이 플러그인의 위력을 다시 한 번 보여줍니다.

설치 및 활성화한 후 플러그인을 열고 '새로 추가' 버튼을 클릭하여 필드를 추가합니다. 위치 규칙에서 '메뉴 항목'을 선택합니다. 지침을 따르고 필요에 따라 필드를 업데이트합니다.

필드를 게시하면 관리 영역 내에서 WordPress 메뉴로 이동하여 생성한 새 필드를 볼 수 있습니다. 꽤 쉽습니다!

WP 메뉴 사용자 정의 필드

WP 메뉴 사용자 정의 필드 플러그인은 이름에서 알 수 있듯이 메뉴 항목에 사용자 정의 필드를 추가하는 데 도움이 되는 비교적 새로운 플러그인입니다. 사용자 정의 텍스트, 이미지, 단축 코드 또는 사용자 정의 HTML을 추가할 수 있습니다.

전용 플러그인 인터페이스를 통해 사용자 정의 메뉴 항목을 생성하는 대신(고급 사용자 정의 필드와 마찬가지로) WP 메뉴 사용자 정의 필드는 대신 관리 메뉴 편집 영역의 모든 메뉴 항목에 편집 가능한 옵션을 직접 추가합니다.

메뉴 항목에 사용자 정의 필드 및 기타 콘텐츠를 추가하는 쉽고 좋은 방법입니다. 플러그인 문서는 HTML에서 생성된 각 기능을 추가로 사용자 정의하는 데 사용할 수 있는 플러그인의 후크도 제공합니다.

결론

WordPress 메뉴에 사용자 정의 필드를 추가하는 것은 정말 유용할 수 있으며 웹사이트에서 종종 무시되는 이 영역을 개선하는 데 도움이 될 수 있습니다. 당신이 자신 있는 코더라면 WordPress 5.4에서 제공되는 새로운 후크를 사용하는 것이 상대적으로 쉬울 것입니다.

또한보십시오

  • WordPress 메뉴 항목에 필드 추가 – 사용자 정의 플러그인