Title: WP Menu Custom Fields
Author: rtCamp
Published: <strong>2020 年 4 月 3 日</strong>
Last modified: 2024 年 11 月 15 日

---

搜索插件

![](https://ps.w.org/wp-menu-custom-fields/assets/banner-772x250.png?rev=2274871)

**该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起
使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。

![](https://ps.w.org/wp-menu-custom-fields/assets/icon-256x256.png?rev=2274802)

# WP Menu Custom Fields

 作者：[rtCamp](https://profiles.wordpress.org/rtcamp/)

[下载](https://downloads.wordpress.org/plugin/wp-menu-custom-fields.1.1.zip)

 * [详情](https://cn.wordpress.org/plugins/wp-menu-custom-fields/#description)
 * [评价](https://cn.wordpress.org/plugins/wp-menu-custom-fields/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/wp-menu-custom-fields/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/wp-menu-custom-fields/#developers)

 [支持](https://wordpress.org/support/plugin/wp-menu-custom-fields/)

## 描述

This plugin adds custom fields on the menu item’s edit interface of wp-admin and
supports only 1-level menu configuration.
 Below is the list of custom fields this
plugin adds.

 * Custom text
 * Image selection with link and caption
 * Shortcode with caption
 * Custom HTML with TinyMCE editor

**Notes:**

 * This plugin works with default themes. In order to use it with custom themes,
   please add the necessary styling in your theme/child theme to override the plugin’s
   CSS.
 * The custom fields from this plugin should be used in the submenu for well-structured
   and responsive UI.
 * Currently, this plugin is not supported with FSE themes.

### Usage

 1. After installing and activating this plugin, goto Appearance -> Menus of your WordPress
    admin. Create a menu if you haven’t already and add menu items according to your
    need.
 2. When you expand any menu item, you’ll see the custom fields added here (see screenshots
    below). You can see **Custom Field** and **Select Feature** options.
 3. Along with Custom Text field, you can choose to use either Image, Shortcode or 
    Custom HTML feature for a particular menu item.
 4. You can click on the option you want to use and the input fields of that option
    will be visible.

#### Using Custom Text field

 * You can enter any text here and it’ll be displayed with this menu item.
 * This field can be used by all menu items along with any other feature.

#### Using Image

 * By clicking on **Select Image** button, WordPress’ media gallery window will 
   be opened up. You can choose 1 image from already uploaded images or you can 
   upload a new one and select that.
 * The selected image will be shown below **Select Image** button after you select
   and close the media gallery window.
 * To remove already selected image, click on **Select Image** button and deselect
   the already selected image. You can change the selected image by selecting any
   other image.
 * You can enter a URL in **Image Link** text field. On front-end, clicking on the
   image will lead to this URL.
 * You can enter a caption text in **Image Caption** field and it’ll be displayed
   below the image on the front-end.

#### Using Shortcode

 * You can add a shortcode in **Shortcode** field. We’ve added some stylings to 
   handle WordPress’ default `[video]` and `[audio]` shortcode.
 * You can enter a caption text in **Shortcode Caption** field and it’ll be displayed
   below the shortcode on the front-end.

#### Using Custom HTML

 * TinyMCE editor is used to add custom HTML here.
 * From the **Visual** tab, you can enter text and format it using tools given in
   toolbar.
 * You can switch to **Text** tab to see/change HTML code of the text you entered.

### Hooks

#### wp_menu_custom_fields_image_html Filter

 * Allows to change HTML generated for image feature.
 * There are 3 parameters. `$html` (Generated HTML), `$data` (Custom fields data),`
   $item_id` (Menu item ID).
 * Example:
 *     ```
           [selected-feature] => image
           [image] => Array
               (
                   [media-id] => 11
                   [media-type] => image
                   [media-link] => https://google.com/
                   [media-caption] => This is image caption
                   [media-url] => http://example.com/wp-content/uploads/2020/03/92d43b978cbcdc7b33e3596d131d5256.jpg
               )
       ```
   

#### wp_menu_custom_fields_shortcode_html Filter

 * Allows to change HTML generated for shortcode feature.
 * Parameters are same as `wp_menu_custom_fields_image_html`.
 * Example:
 *     ```
           [selected-feature] => shortcode
           [shortcode] => Array
               (
                   [shortcode] => [video src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"]
                   [shortcode-caption] => This is a shortcode caption
               )
       ```
   

#### wp_menu_custom_fields_custom_markup_html Filter

 * Allows to change HTML generated for custom HTML feature.
 * Parameters are same as `wp_menu_custom_fields_image_html`.
 * Example:
 *     ```
           [selected-feature] => html
           [html] => Array
               (
                   [custom-html] => <em><strong>This is custom HTML</strong></em>
               )
       ```
   

#### wp_menu_custom_fields_custom_text_html Filter

 * Allows to change HTML generated for custom text field.
 * Parameters are same as `wp_menu_custom_fields_image_html`.
 * Example:
 *     ```
           [custom-text] => This is a custom text
       ```
   

#### wp_menu_custom_fields_fields_html Filter

 * Allows to change the final custom field’s HTML generated for a particular menu
   item.
 * Parameters are same as `wp_menu_custom_fields_image_html`.
 * Example:
 *     ```
           Array
           (
               [custom-text] => This is a custom text
               [selected-feature] => image
               [image] => Array
                   (
                       [media-id] => 11
                       [media-type] => image
                       [media-link] => https://google.com
                       [media-caption] => This is image caption
                       [media-url] => http://example.com/wp-content/uploads/2020/03/92d43b978cbcdc7b33e3596d131d5256.jpg
                   )
   
           )
       ```
   

### Styling mega menu

A theme developer can add stylings for the custom fields added by this plugin by
referring to the below sample HTML code.

 * Image & Custom text
    - Sample HTML code
    -     ```
              <div class="rt-wp-menu-custom-fields-wrapper" style="padding-top: 10px; padding-right: 20px;">
                  <div class="rt-wp-menu-custom-fields-image-wrapper">
                      <a href="https://google.com">
                          <img class="rt-wp-menu-custom-fields-image" src="http://example.com/wp-content/uploads/2020/03/92d43b978cbcdc7b33e3596d131d5256.jpg">
                      </a>
                      <span class="rt-wp-menu-custom-fields-image-caption">This is an image caption</span>
                  </div>
                  <span class="rt-wp-menu-custom-fields-custom-text">This is a custom text</span>
              </div>
          ```
      
    - If **Image Link** is entered, then `img` tag will be wrapped inside `a`.
    - Custom text will be displayed below the feature’s HTML.
 * Shortcode
 *     ```
               <div class="rt-wp-menu-custom-fields-shortcode-wrapper">
                   <div class="rt-wp-menu-custom-fields-shortcode">
                       <!-- shortcode HTML will be here -->
                   </div>
                   <span class="rt-wp-menu-custom-fields-shortcode-caption">This is shortcode caption!</span>
               </div>
       ```
   
 * Custom HTML
 *     ```
               <div class="rt-wp-menu-custom-fields-custom-html">Welcome to <strong>WordPress</strong>. This is your first post. Edit or delete it, then start <em>writing</em>!</div>
       ```
   

### Important Links

 * [GitHub](https://github.com/rtCamp/wp-menu-custom-fields) – Please mention your
   wordpress.org username when sending pull requests.

### License

Same [GPL](http://www.gnu.org/licenses/gpl-2.0.txt) that WordPress uses!

### See room for improvement?

Great! There are several ways you can get involved to help make this plugin better:

 1. **Report Bugs:** If you find a bug, error or other problem, please report it! You
    can do this by [creating a new topic](https://github.com/rtCamp/wp-menu-custom-fields/issues)
    in the issue tracker.
 2. **Suggest New Features:** Have an awesome idea? Please share it! Simply [create a new topic](https://github.com/rtCamp/wp-menu-custom-fields/issues)
    in the issure tracker to express your thoughts on why the feature should be included
    and get a discussion going around your idea.

## 屏幕截图

[⌊Custom text field added under Appearance -> Menus⌉⌊Custom text field added under
Appearance -> Menus⌉[

Custom text field added under Appearance -> Menus

[⌊Custom text field (frontend)⌉⌊Custom text field (frontend)⌉[

Custom text field (frontend)

[⌊Custom image field added under Appearance -> Menus from WP-Media⌉⌊Custom image
field added under Appearance -> Menus from WP-Media⌉[

Custom image field added under Appearance -> Menus from WP-Media

[⌊Custom image field (frontend from WP-Media)⌉⌊Custom image field (frontend from
WP-Media)⌉[

Custom image field (frontend from WP-Media)

[⌊Custom image field added under Appearance -> Menus from image url⌉⌊Custom image
field added under Appearance -> Menus from image url⌉[

Custom image field added under Appearance -> Menus from image url

[⌊Custom image field (frontend from image url)⌉⌊Custom image field (frontend from
image url)⌉[

Custom image field (frontend from image url)

[⌊Custom shortcode field added under Appearance -> Menus⌉⌊Custom shortcode field
added under Appearance -> Menus⌉[

Custom shortcode field added under Appearance -> Menus

[⌊Custom shortcode field (frontend)⌉⌊Custom shortcode field (frontend)⌉[

Custom shortcode field (frontend)

[⌊Custom HTML field added under Appearance -> Menus⌉⌊Custom HTML field added under
Appearance -> Menus⌉[

Custom HTML field added under Appearance -> Menus

[⌊Custom HTML field (frontend)⌉⌊Custom HTML field (frontend)⌉[

Custom HTML field (frontend)

## 安装

 1. Extract the zip file.
 2. Upload it to the `/wp-content/plugins/` directory in your WordPress installation.
 3. Activate the WP Menu Custom Fields from your Plugins page.

## 评价

![](https://secure.gravatar.com/avatar/972265200c967b9b3cbfb403d00883c300943b04348a4232df69254d5181e6f9?
s=60&d=retro&r=g)

### 󠀁[The best menu customization plugin!](https://wordpress.org/support/topic/the-best-menu-customization-plugin/)󠁿

 [davidelomonaco](https://profiles.wordpress.org/davidelomonaco/) 2021 年 10 月 
29 日

If you need to customize the wordpress menu with custom sections (for example with
html code) this plugin is a bomb! I customized my menu in a few minutes and without
modifying the template files. The other existing plugins only provide an API key
that allows you to manually change the menu section, instead this is the only one
that does it automatically for you, saving hours of work. It’s fast, intuitive, 
lightweight and effective. Recommended.

 [ 阅读所有1条评价 ](https://wordpress.org/support/plugin/wp-menu-custom-fields/reviews/)

## 贡献者及开发者

「WP Menu Custom Fields」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ rtCamp ](https://profiles.wordpress.org/rtcamp/)
 *   [ sid177 ](https://profiles.wordpress.org/sid177/)
 *   [ Kiran Potphode ](https://profiles.wordpress.org/kiranpotphode/)
 *   [ devikvekariya ](https://profiles.wordpress.org/devikvekariya/)
 *   [ vaishaliagola27 ](https://profiles.wordpress.org/vaishuagola27/)
 *   [ Deepak Lalwani ](https://profiles.wordpress.org/deepaklalwani/)
 *   [ Alvi Tazwar ](https://profiles.wordpress.org/alvitazwar052/)
 *   [ Pradeep ](https://profiles.wordpress.org/pradeep1308/)
 *   [ Shreyas Ikhar ](https://profiles.wordpress.org/shreyasikhar26/)
 *   [ Gagan Deep Singh ](https://profiles.wordpress.org/gagan0123/)

「WP Menu Custom Fields」插件已被翻译至 5 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/wp-menu-custom-fields/contributors)
为本插件所做的贡献。

[帮助将「WP Menu Custom Fields」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/wp-menu-custom-fields)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/wp-menu-custom-fields/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/wp-menu-custom-fields/)，或通过[RSS](https://plugins.trac.wordpress.org/log/wp-menu-custom-fields/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/wp-menu-custom-fields/)。

## 更新日志

#### 1.1

FIXED
 * Fix UI bugs with default themes * Fix fatal error related to unknown format
specifier with PHP v8.x.x * Fix image not showing when added with a link

#### 1.0.2

FIXED
 * Fix audio Shortcode not rendering on frontend * Fix few notices

#### 1.0.1

FIXED
 * Class `WP_Menu_Custom_Fields\Inc\Plugin` not found error on Windows platform

#### 1.0

 * Initial release

## 额外信息

 *  版本 **1.1**
 *  最后更新：**2 年前**
 *  活跃安装数量 **700+**
 *  WordPress 版本 ** 5.4 或更高版本 **
 *  已测试的最高版本为 **6.7.5**
 *  PHP 版本 ** 7.0 或更高版本 **
 *  语言
 * [Chinese (Taiwan)](https://tw.wordpress.org/plugins/wp-menu-custom-fields/) 、
   [English (US)](https://wordpress.org/plugins/wp-menu-custom-fields/) 、 [Italian](https://it.wordpress.org/plugins/wp-menu-custom-fields/)、
   [Marathi](https://mr.wordpress.org/plugins/wp-menu-custom-fields/) 、 [Spanish (Chile)](https://cl.wordpress.org/plugins/wp-menu-custom-fields/)
   和 [Spanish (Spain)](https://es.wordpress.org/plugins/wp-menu-custom-fields/).
 *  [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/wp-menu-custom-fields)
 * 标签
 * [Navigation Menu](https://cn.wordpress.org/plugins/tags/navigation-menu/)
 *  [高级视图](https://cn.wordpress.org/plugins/wp-menu-custom-fields/advanced/)

## 评级

 5 星（最高 5 星）。

 *  [  1 条 5 星评价     ](https://wordpress.org/support/plugin/wp-menu-custom-fields/reviews/?filter=5)
 *  [  0 条 4 星评价     ](https://wordpress.org/support/plugin/wp-menu-custom-fields/reviews/?filter=4)
 *  [  0 条 3 星评价     ](https://wordpress.org/support/plugin/wp-menu-custom-fields/reviews/?filter=3)
 *  [  0 条 2 星评价     ](https://wordpress.org/support/plugin/wp-menu-custom-fields/reviews/?filter=2)
 *  [  0 条 1 星评价     ](https://wordpress.org/support/plugin/wp-menu-custom-fields/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/wp-menu-custom-fields/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/wp-menu-custom-fields/reviews/)

## 贡献者

 *   [ rtCamp ](https://profiles.wordpress.org/rtcamp/)
 *   [ sid177 ](https://profiles.wordpress.org/sid177/)
 *   [ Kiran Potphode ](https://profiles.wordpress.org/kiranpotphode/)
 *   [ devikvekariya ](https://profiles.wordpress.org/devikvekariya/)
 *   [ vaishaliagola27 ](https://profiles.wordpress.org/vaishuagola27/)
 *   [ Deepak Lalwani ](https://profiles.wordpress.org/deepaklalwani/)
 *   [ Alvi Tazwar ](https://profiles.wordpress.org/alvitazwar052/)
 *   [ Pradeep ](https://profiles.wordpress.org/pradeep1308/)
 *   [ Shreyas Ikhar ](https://profiles.wordpress.org/shreyasikhar26/)
 *   [ Gagan Deep Singh ](https://profiles.wordpress.org/gagan0123/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/wp-menu-custom-fields/)