[WordPress] 外掛分享： WP Menu Custom Fields

WordPress 外掛 WP Menu Custom Fields 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「WP Menu Custom Fields」是 2020-04-02 上架。
  • 目前有 700 個安裝啟用數。
  • 上一次更新是 2024-11-15，距離現在已有 170 天。
  • 外掛最低要求 WordPress 5.4 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
  • 有 1 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

rtcamp | sid177 | gagan0123 | pradeep1308 | alvitazwar052 | deepaklalwani | devikvekariya | kiranpotphode | vaishuagola27 | shreyasikhar26 |

外掛標籤

Navigation Menu | Navigation Menu Custom Fields |

內容簡介

這個外掛會在 wp-admin 的選單項目編輯介面上新增自訂欄位，並僅支援 1 層選單配置。
下面是此外掛所新增的自訂欄位清單：

自訂文字
選擇圖片並附帶連結和標題
附帶標題的短代碼
帶有 TinyMCE 編輯器的自訂 HTML

注意事項：

此外掛適用於預設佈景主題。若要在自訂佈景主題中使用，請在主題/子主題中新增必要的樣式，以改寫外掛的 CSS。
此外掛的自訂欄位應當用於子選單，以便維護良好的結構和響應式介面。
目前，此外掛不支援 FSE 主題。

使用方式

安裝並啟用此外掛後，進入 WordPress 管理後台，到外觀 -> 選單。如果尚未建立選單，請建立選單並按需新增選單項目。
展開任何選單項目時，您將會看到新增的自訂欄位（請參閱下面的螢幕截圖）。您將看到自訂欄位和選擇功能的選項。
在自訂文字欄位旁，您可以選擇使用圖片、短代碼或自訂 HTML 功能來新增選單項目的特定功能。
您可以點擊要使用的選項，該選項的輸入欄位將會顯示。

使用自訂文字欄位

您可以在此輸入任何文字，該文字將會顯示在此選單項目中。
此欄位可由所有選單項目使用，並與任何其他功能一起使用。

使用圖片

點擊「選擇圖片」按鈕，WordPress 的媒體庫視窗會彈出。您可以從已上傳的圖片中選擇 1 張，或上傳新的圖片並選擇該圖片。
選擇並關閉媒體庫視窗後，所選擇的圖片將會顯示在「選擇圖片」按鈕下方。
若要刪除已經選擇的圖片，請點擊「選擇圖片」按鈕，然後取消勾選已經選擇的圖片。您可以通過選擇其他圖片來更改所選擇的圖片。
您可以在「圖片連結」文字欄位中輸入 URL，該圖片的點擊將導向該 URL。
您可以在「圖片標題」欄位中輸入標題文字，該標題將顯示在前端的圖片下方。

使用短代碼

您可以在「短代碼」欄位中新增一段短代碼。我們添加了一些樣式，以處理 WordPress 的預設 和 短代碼。
您可以在「短代碼標題」欄位中輸入標題文字，該標題將顯示在前端的短代碼下方。

使用自訂 HTML

使用 TinyMCE 編輯器在此處新增自訂 HTML。
您可以在「視覺化」標籤中輸入文字，並使用工具列中提供的工具格式化文本。
您可以切換到「文本」標籤，以查看/更改您輸入的 HTML 代碼。

鉤子（Hooks）
wp_menu_custom_fields_image_html Filter

允許更改為「圖片」功能生成的 HTML。
有 3 個參數。 $html（已生成的 HTML）、$data（自訂欄位資料）、$item_id（選單項目 ID）。

範例：

[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
)

原文外掛簡介

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

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.
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.
Along with Custom Text field, you can choose to use either Image, Shortcode or Custom HTML feature for a particular menu item.
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 and 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] =>


[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] => This is custom HTML
)

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




This is an image caption

This is a custom text

If Image Link is entered, then img tag will be wrapped inside a.

Custom text will be displayed below the feature’s HTML.

Shortcode

This is shortcode caption!

Custom HTML

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

Important Links

GitHub – Please mention your wordpress.org username when sending pull requests.

License
Same GPL that WordPress uses!
See room for improvement?
Great! There are several ways you can get involved to help make this plugin better:

Report Bugs: If you find a bug, error or other problem, please report it! You can do this by creating a new topic in the issue tracker.
Suggest New Features: Have an awesome idea? Please share it! Simply create a new topic in the issure tracker to express your thoughts on why the feature should be included and get a discussion going around your idea.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「WP Menu Custom Fields」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0 | 1.1 | 1.0.1 | 1.0.2 | trunk |

延伸相關外掛（你可能也想知道）

  • Menu Item Visibility Control 》透過這個外掛，你可以使用 WordPress 的條件標籤來在前台啟用或停用選單項目。它的作用類似於「Widget Logic」，但是適用於選單項目。, 請注意：這些條件是 P...。
  • Full Screen Menu for Elementor 》此外掛為 Elementor 頁面建構器 增加一個全屏選單小工具。必須啟用 Elementor 外掛才能使用此外掛。啟用所需外掛後，此小工具將可在 Elementor 中使用。, 安...。
  • WP Mobile Bottom Menu 》WP Mobile Bottom Menu is a WordPress plugin that creates a bottom navigation menu for mobile users, enhancing user engagement and boosting conversi...。
  • Clever Mega Menu for Elementor 》, Clever Mega Menu for Elementor（又稱@CMM4E）是一個一流的 Elementor 超級菜單擴展。它允許您創建一個完全響應的超級菜單，帶有下拉項目，豐富的內容模塊...。
  • Clever Mega Menu for Visual Composer 》Clever Mega Menu 是一款易於使用的 Visual Composer 超級菜單外掛。此外掛具有使用者友善、高度自訂化以及完全響應式等特色。Clever Mega Menu 讓您輕鬆地在...。
  • Mobile Menu Builder for WordPress 》WordPress Mobile Menu Builder 外掛專為手機裝置而設計，具備易用、客製化與高度靈活的特點。透過建立響應式選單，使手機瀏覽體驗更加簡化，提供簡易的手機...。
  • IntelliWidget Per Page Custom Menus and Dynamic Content 》telliWidget WordPress Plugin:, IntelliWidget 是一個功能強大的 WordPress 外掛，可以讓您的動態側邊欄「針對特定頁面」創建自定義「配置文件 (Profiles)」...。
  • Search box on Navigation Menu 》在導航選單中的搜尋框外掛程式允許您在網站導覽列中加入搜尋表單，使使用者更輕鬆地搜尋您的網站。, 該外掛程式在管理區提供各種設定，讓您可以自訂搜尋表單...。
  • Multilevel Navigation Menu 》多級導航菜單（Multilevel Navigation Menu）外掛可讓我們在網站上添加一個全屏導航菜單。這是一種在我們的網站上輕鬆使用該外掛的方法。, 您可以在頁首檔案...。
  • WPB Floating Menu or Categories – Sticky Floating Side Menu & Categories with Icons 》WPB Floating Menu or Categories 是一個免費的 WordPress 外掛，可以讓您增加站點的可用性，透過加入帶有圖示的固定浮動側邊選單或分類。, 它可以與任何 Wor...。
  • The Menu: Custom mobile navigation with icons 》### 總結文案:, The Menu 外掛為 WordPress 提供高度自訂、動態導覽方案，旨在增強您網站的可用性和美學吸引力。具有移動裝置友好的設計、SVG 圖示整合和顏色...。
  • AMP Sidebar Hamburger Menu 》如果您正在使用 AMP 的過渡或標準模式，請查看下面的常見問題解答，或在安裝後按照設置選項進行操作。, 功能：, , 易於設置, 適用於 AMP 和非 AMP, 快速加載...。
  • Customizer Hide Menu 》雖然很多人反對這個決定，但導航菜單介面仍被強制加入到自訂器（Customizer）中。, 由於有許多人沒有時間向現有客戶解釋這一點，這個外掛程式只是從自訂器中...。
  • Wield Menu 》這個外掛可讓長而複雜的導覽選單更容易管理，可以建立可展開和摺疊的群組。, 預設情況下，在 wp-admin 中的所有導覽選單都是摺疊的。當按住 Option/Alt 鍵點...。
  • Country Specific Menu Items 》國家特定菜單項目* 允許您隱藏或顯示個別菜單項目給訪問您網站的不同國家的訪客。該外掛在「外觀 > 選單」下為每個菜單項目新增額外設置。只需選擇一個或多個...。

文章
Filter
Apply Filters
Close
Mastodon