向 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也是必需的，並且應該是唯一的。 它是引用此菜單的 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; }

此時，您應該會看到“Menu Item Field Creator”菜單項和內容頁面測試內容，並識別出您在參數中定義的菜單 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()將打印所有註冊的設置部分和字段。 Τhe 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()函數、定義當前數據是否應包含在 REST API 中的“ show_in_rest ”選項以及可以定義默認值的默認選項調用get_option()時。
  • 我們還介紹了add_settings_section()和add_settings_field()函數，它們將幫助我們完成這一步。
  • add_settings_section()函數用於向 WordPress 註冊具有特定 slug 名稱的部分。 在這裡， $id是標識部分的 slug 名稱，用於標籤的 'id' 屬性。
 add_settings_section( $id, $title, $callback, $page )
  • $title是節的格式化標題，將顯示為節的標題， $callback是在節頂部回顯內容的函數， $page是應該顯示的頁面的 slug-name匹配do_settings_sections()的$page參數，在我們的例子中是“options_page”。

以上所有參數都是必需的。

  • WordPress 提供的add_settings_field () 函數允許您向部分添加新字段。
 add_settings_field( $id, $title, $callback, $page, $section, $args )
  • $id 、 $title 、 $callback和$page如前所述使用。 $section是設置頁面中顯示框的部分的 slug 名稱，在輸出字段時使用$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()方法，我們將輸出 3 個單選按鈕，其中包含我們對 HTML 元素的選擇：

 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 ”類。 具體來說，我們將不得不替換將menu_item_sub條目添加到$output變量的代碼部分。

 $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 Settings API 是這裡的主要工具，它允許我們為插件的選項頁面創建骨骼。 除此之外，您可以自行決定是對類使用更面向對象的方法，還是使用更簡單的方法，將函數和鉤子粘貼到主插件 PHP 文件中。

讓我們在這裡指出，我們重建插件所遵循的路線並不是真正的 OOP，但肯定朝那個方向邁出了一步。 在即將發布的有關 OOP 的系列文章中，我們將深入探討可以增強插件管理的其他功能。

為我們的自定義插件創建設置頁面可能會有點令人困惑，但希望在閱讀本文後，您了解所需內容。 快樂編碼！

另請閱讀

  • 向 WordPress 菜單項添加自定義字段
  • 向 WordPress 菜單項添加字段 – 自定義插件