WordPress 메뉴 항목에 필드 추가 – 플러그인의 설정 페이지

게시 됨: 2021-07-08

WordPress 플러그인을 사용할 때 작성자가 플러그인 기능을 사용자 정의하는 데 사용할 수 있는 몇 가지 설정을 제공했다는 사실을 눈치채셨을 것입니다. 기술적으로 작성자는 메뉴 항목과 이 메뉴 항목이 리디렉션되는 설정 페이지를 만들었습니다. 이 기사에서는 자신의 플러그인에 대해 동일한 작업을 수행하기 위해 따라야 하는 단계를 수행합니다.

이 기사에서는 WordPress 메뉴 항목에 필드 추가하기 – 사용자 정의 플러그인 기사의 예제에 제공된 코드를 이미 적용해야 합니다. 여기에서 다시 시작하여 관리자 영역에 설정 페이지를 추가하여 플러그인을 보다 사용자 친화적으로 만드는 방법을 살펴보고 관리자가 플러그인 작동 방식에 대한 기본 설정을 지정할 수 있도록 합니다.

초기 단계

이 기사의 목적을 위해 우리는 멋진 간단한 설정 메뉴를 만들 것입니다. 이전 기사에서 보았듯이 플러그인을 사용하여 관리자는 모든 메뉴 항목에 자막을 추가할 수 있습니다. 다음 단계에서는 사용자가 자막 필드를 래핑할 HTML 요소 유형을 선택할 수 있는 옵션을 제공합니다.

이 시점에서 플러그인 기본 PHP 파일은 다음과 같습니다.

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></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_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function menu_item_sub_custom_walker( $args ) { if ( class_exists( 'My_Custom_Nav_Walker' ) ) { $args['walker'] = new My_Custom_Nav_Walker(); } else { echo 'DOES NOT EXIST'; } return $args; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator(); if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } if ( ! empty( $menu_item_sub ) ) { $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>'; } } } }

다음으로 할 일은 플러그인의 설정 페이지에 대한 메뉴 항목을 만들고 설정 페이지에 콘텐츠로 포함할 수 있는 항목의 간단한 예를 만드는 것입니다.

Pressidium으로 웹사이트 호스팅

60일 환불 보장

계획 보기

두 개의 WordPress 후크를 사용하여 작업해야 합니다. admin_menu 후크는 관리 메뉴 항목을 등록하고 admin_init 후크는 나중에 플러그인 설정 페이지를 양식과 함께 추가할 때 플러그인 옵션을 등록합니다. 물론 WordPress가 제공하는 API를 최대한 활용하고 일부 내장 기능을 사용할 것입니다. 더 깊이 들어가 보겠습니다.

옵션 페이지 메뉴 항목 만들기

메뉴 항목을 추가하기 위해 현재 추가된 후크 아래 __construct() 메서드 내부에 해당 admin_menu 후크를 추가합니다.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); } . . .

admin_menu 후크를 사용하고 플러그인의 설정 페이지와 메뉴 항목에 대한 정보를 지정하기 위해 plugin_settings_menu_page() 메서드(아래에서 설명함)를 정의했습니다.

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

메서드는 메인 플러그인 클래스에도 넣어야 합니다. plugin_settings_menu_page() 메소드 내에서 WordPress가 제공하는 add_menu_page() 함수를 사용했다는 점에 유의하십시오. 이 함수는 다음 인수를 허용합니다.

 add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position )
  • $page_title 은 반드시 정의되어야 하며, 기본적으로 이 메뉴 항목을 선택할 때 리디렉션되는 페이지의 제목 태그의 첫 번째 부분입니다.
  • $menu_title 또한 필수)은 메뉴에 사용할 텍스트입니다.
  • $capability 는 사용자가 이 메뉴를 표시하는 데 필요한 기능입니다. 우리의 경우 슈퍼 사용자와 관리자에게만 주어지는 manage_options 권한을 선택했습니다. 귀하의 요구 사항에 맞는 역할 또는 기능을 이해하려면 관련 공식 문서를 참조하십시오.
  • $menu_slug 도 필요하며 고유해야 합니다. 이 메뉴를 지칭하는 슬러그 이름입니다. sanitize_key() 와 호환되는 소문자 영숫자, 대시 및 밑줄 문자만 사용해야 한다는 것을 잊지 마십시오.
  • $icon_url 은 선택적 인수이며 메뉴 항목에 사용할 아이콘 파일에 연결하는 URL입니다.
  • $function 인수는 설정 페이지의 내용을 생성할 콜백 함수를 정의하는 곳입니다. 우리의 경우 아직 기능이 없는 plugin_settings_page_content() 입니다. plugin_settings_menu_page() 메서드를 사용하여 코드에 추가했습니다.
 public function plugin_settings_page_content() { $html = "<p>Test content for our custom plugin</p>"; echo $html; }

이 시점에서 "메뉴 항목 필드 생성기" 메뉴 항목과 콘텐츠 페이지 테스트 콘텐츠가 표시되어야 하며 인수에서 정의한 메뉴 URL을 인식해야 합니다.

또한 플러그인의 옵션을 별도의 최상위 메뉴 항목이 아닌 내장된 설정 메뉴 아래에 포함하려는 경우 대신 add_options_page() 함수를 사용하여 쉽게 수행할 수 있습니다. 이 경우 다음을 교체해야 합니다.

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

이것으로:

 public function plugin_settings_menu_page() { add_options_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

그러면 여기에 메뉴 위치가 표시됩니다.

다음 섹션에서는 관리자 사용자가 플러그인의 동작을 설정하는 데 사용할 수 있는 몇 가지 간단한 콘텐츠를 설정 페이지에 넣을 것입니다.

설정 페이지에 기능 추가

지금까지 우리가 한 것은 메뉴 항목을 추가하고 설정 콘텐츠 페이지를 표시할 기능을 정의하는 것입니다. 설정 페이지에서 기능을 원하면 일부 필드를 등록한 다음 플러그인의 설정 페이지에 표시해야 합니다. 예를 들어 사용자가 자막 필드를 래핑할 HTML 요소의 유형을 정의할 수 있는 양식을 만들 것입니다.

출력

plugin_settings_page_content 코드를 다음으로 교체합니다.

 public function plugin_settings_page_content() { ?> <form action="options.php" method="post"> <?php do_settings_sections( 'options_page' ); settings_fields( 'option_group' ); submit_button( __( 'Save Subtitle', 'oop-menu-item-sub' ) ); ?> </form> <?php }

이 줄에서 우리는 do_settings_sections() 및 settings_fields() 함수를 사용합니다. do_settings_sections() 는 등록된 모든 설정 섹션과 필드를 인쇄합니다. ▼ settings_fields() 는 설정 페이지에 대한 nonce, action 및 option_page 숨겨진 입력 필드를 출력합니다.

이제 계속 진행하여 설정을 등록해 보겠습니다.

설정 등록

필수 필드를 등록하려면 관리자 화면이 초기화될 때 실행되는 admin_init 후크를 사용합니다.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); add_action( 'admin_init', array( $this, 'plugin_register_settings' ) ); } . . .

다음과 같이 클래스 내부에 plugin_register_settings() 메서드를 삽입합니다.

 public function plugin_register_settings() { register_setting( 'option_group', 'option_name' ); add_settings_section( 'section_id', __( 'Settings Page Title', 'oop-menu-item-sub' ), array( $this, 'render_section' ), 'options_page' ); add_settings_field( 'html_element', __( 'Choose HTML Element:', 'oop-menu-item-sub' ), array( $this, 'render_field' ), 'options_page', 'section_id' ); }

이제 뒤로 물러나서 우리가 지금까지 한 일을 다시 살펴보겠습니다.

  • 설정과 해당 데이터를 등록하기 위해 문서에 따라 다음과 같이 구성된 register_setting () 함수를 사용했습니다.
 register_setting( $option_group, $option_name, $args )
  • $option_group 은 필수 매개변수이며 settings_fields() 에 사용된 그룹 이름과 일치해야 합니다.
  • $option_name 도 필수이며 삭제 및 저장할 옵션의 이름입니다. 옵션 데이터베이스 테이블의 option_name 열 아래에 있는 값입니다.
  • $args 는 여기에 필요하지 않습니다. 등록 시 설정을 설명하는 선택적 데이터 배열입니다. 여기서 지정할 수 있는 것은 해당 유형, 설명, 옵션 값에 대한 Sanitize_callback sanitize_callback() 함수, 현재 데이터를 REST API에 포함해야 하는지 여부를 정의하는 " show_in_rest " 옵션 및 기본값을 정의할 수 있는 기본 옵션입니다. get_option() 을 호출할 때.
  • 또한 이 단계를 완료하는 데 도움이 되는 add_settings_section() 및 add_settings_field() 함수를 도입했습니다.
  • add_settings_section() 함수는 WordPress에 특정 슬러그 이름이 있는 섹션을 등록하는 데 사용됩니다. 여기서 $id 는 섹션을 식별하기 위한 슬러그 이름으로 태그의 'id' 속성에 사용된다.
 add_settings_section( $id, $title, $callback, $page )
  • $title 은 섹션의 제목으로 표시될 섹션의 형식화된 제목이고, $callback 은 섹션의 맨 위에 내용을 표시하는 함수이고, $page 는 표시되어야 하는 페이지의 슬러그 이름입니다. do_settings_sections() 의 $page 인수와 일치합니다. 이 경우에는 "options_page"입니다.

위의 모든 매개변수가 필요합니다.

  • WordPress가 제공하는 add_settings_field () 함수를 사용하면 섹션에 새 필드를 추가할 수 있습니다.
 add_settings_field( $id, $title, $callback, $page, $section, $args )
  • $id , $title , $callback 및 $page 는 앞에서 설명한 대로 사용됩니다. $section 은 상자를 표시할 설정 페이지 섹션의 슬러그 이름이며 $args 는 필드를 출력할 때 사용됩니다. $section 과 $args 는 모두 선택 사항입니다.

이 기사의 목적을 위해 우리는 우리의 가치를 정화하는 추가 기능을 소개하지 않을 것입니다. 그러나 항상 양식 필드를 삭제하는 것이 좋습니다.

이제 우리는 render_section() 과 render_field() () 라는 두 가지 공개 메소드를 도입해야 합니다.

render_section() 메서드의 경우 섹션의 제목만 출력합니다.

 public function render_section() { ?> <h2><?php _e( 'Section #1', 'oop-menu-item-sub' ); ?></h2> <?php }

render_field() 메서드의 경우 HTML 요소에 대한 선택 항목과 함께 3개의 라디오 버튼을 출력합니다.

 public function render_field() { $stored_option = get_option( 'option_name' )['html_element']; ?> <input type="radio" name="option_name[html_element]" value="div" <?php checked( $stored_option, 'div' ); ?> /> div <input type="radio" name="option_name[html_element]" value="p" <?php checked( $stored_option, 'p' ); ?> /> p <input type="radio" name="option_name[html_element]" value="span" <?php checked( $stored_option, 'span' ); ?> /> span <?php }

지금 보고 있는 결과는 다음과 같습니다.

예를 들어 span과 같은 다른 요소를 선택하고 저장하면 올바르게 작동해야 합니다.

웹사이트에 옵션 페이지 변경 사항 반영

마지막으로 설명할 단계는 웹사이트 프론트 엔드 메뉴 항목 아래에 있는 자막 요소에 관리자가 선택할 HTML 요소를 적용하는 방법입니다.

이 단계는 데이터베이스 옵션 테이블에서 선택한 필드를 검색하고 코드에서 " My_Custom_Nav_Walker " 클래스를 수정하기만 하면 되므로 정말 간단합니다. 특히 $output 변수에 menu_item_sub 항목을 추가하는 코드 부분을 교체해야 합니다.

 $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>';

먼저 get_option( 'option_name' )['html_element']; $stored_option 변수에 보관하고 위의 줄에 적용하십시오. 최종 클래스는 다음과 같아야 합니다.

 if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } $stored_option = get_option( 'option_name' )['html_element']; if ( ! empty( $menu_item_sub ) ) { $output .= '<'. $stored_option .' class="menu-item-sub">' . $menu_item_sub . '</'. $stored_option .'>'; } } } }

플러그인 코드를 보면서 설정 페이지를 구축할 때 WordPress 기능이 어떻게 작동하는지 시각화하는 것이 때때로 도움이 됩니다. 다음은 우리의 예에서 어떻게 보이는지입니다:

결론

예상대로 WP 설정 API는 플러그인 옵션 페이지의 뼈대를 만들 수 있는 주요 도구입니다. 그 외에는 클래스에서 보다 객체 지향적인 접근 방식을 사용할 것인지 아니면 기본 플러그인 PHP 파일에 기능과 후크를 붙여넣는 더 간단한 경로를 사용할 것인지 결정하는 것은 사용자의 선택입니다.

플러그인을 재구성하기 위해 따라온 경로가 실제로 OOP가 아니라 확실히 그 방향으로 한 단계 이동했음을 지적합시다. OOP에 대한 다음 기사 시리즈에서는 플러그인 관리를 향상시킬 수 있는 다른 기능에 대해 더 자세히 알아볼 것입니다.

사용자 정의 플러그인에 대한 설정 페이지를 만드는 것은 약간 혼란스러울 수 있지만 이 기사를 읽은 후 필요한 것이 무엇인지 이해하기를 바랍니다. 즐거운 코딩!

또한 읽기

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