[WordPress] 外掛分享： SideMenu

前言介紹

• 這款 WordPress 外掛「SideMenu」是 2019-10-17 上架。
• 目前有 1000 個安裝啟用數。
• 上一次更新是 2025-04-09，距離現在已有 25 天。
• 外掛最低要求 WordPress 4.6 以上版本才可以安裝。
• 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
• 有 23 人給過評分。
• 論壇上目前有 1 個提問，問題解答率 0%

外掛協作開發者

domainsupport |

外掛標籤

side nav | side menu | slide menu | vertical menu |

內容簡介

SideMenu

這個外掛在新的 FSE（全站編輯）主題（如 Twenty Twenty-Two）中運作非常良好。請查看 Rye 網站中的選單，以查看這個輕量級外掛的實際應用範例！

這個外掛會在您的主題中注入一個響應式的 SideMenu 側邊欄和選單位置，您可以在其中加入 widget。

SideMenu 會在點擊您網站上的任何選單中添加的菜單按鈕時打開。

當 SideMenu 滑動開時，整個網站會被調暗並向左滑動。

要關閉 SideMenu，可以點擊 SideMenu 右上方的關閉圖標、點擊蒙板網站或向下滾動。

如果需要，此外掛還可以劫持已存在於您主題中的移動設備選單按鈕。已支援此功能的主題為：

Astra
Auction Theme（AT10）
BeTheme
Divi
OKAB
Twenty Seventeen
Twenty Twenty
Twenty Twenty-One
Twenty Twenty-Two
Varia（以及 Rockfield 等子主題）

如果要新增您的主題，請到SideMenu 支援論壇詢問我們！

此外掛還支援啟用「超級選單」樣式的下拉式選單功能。

如何使用 [sidemenu] 短代碼

使用 [sidemenu] 以顯示預設按鈕
使用 [sidemenu]My Button Title[/sidemenu] 或 [sidemenu title=”My Button Title”] 以顯示含有您自己文字的按鈕
使用 [sidemenu class=”my-class” title=”過濾的 SideMenu 按鈕”] 以顯示只會顯示指定類別 widget 或選單項目的按鈕

在「儀表板 - 樣式 - 選單」中，點擊在螢幕右上角的「螢幕選項」，勾選「CSS 類別」以為選單項目新增類別欄位。

在「儀表板 - 樣式 - Widget」中，展開您已添加至 SideMenu widget 區域的 widget，顯示的類別名稱顯示在底部。自 WordPress v5.8 版本引入新的區塊式 Widget 編輯器後，使用者可以輕鬆地為每個區塊設置自定義 CSS 類別，只需選擇區塊，然後在右側的區塊選項中滾動到底部，展開「進階」功能區塊，即可在「其他 CSS 類別」欄位中新增。

此影片將說明如何使用類別以控制 widget 內容 …

若要使用連結作為開啟 SideMenu 的按鈕，請將連結的類別屬性設置為「open_sidemenu」Example Link。您可以在元素中添加類別以控制內容，就像使用短代碼一樣。

若要使用錨點連結打開 SideMenu，請將連結設定為「#open_sidemenu」。這不需要設置類別。為控制顯示內容，請添加連字符和所需顯示的元素類別，例如「#open_sidemenu-testclass」。

原文外掛簡介

SideMenu
This plugin works really well with new FSE (Full Site Editing) themes such as Twenty Twenty-Two. Check out the menu in the Rye website for an example real-world use of this lightweight plugin!

This plugin will inject a responsive SideMenu sidebar and menu location into your theme that you can add widgets to.
The SideMenu is opened by clicking on a menu button that you can add to any menu in your site.
When the SideMenu slides open, the entire site is dimmed and slid to the left.
The SideMenu is closed by either clicking the close icon at the top right of the SideMenu, clicking on the dimmed site or by scrolling down.
This plugin can also hijack the existing mobile menu button within your theme if required. Themes that already work with this feature are …

Astra
Auction Theme (AT10)
BeTheme
Divi
Genesis Block Theme
Inspiro
OKAB
Twenty Seventeen
Twenty Twenty
Twenty Twenty-One
Twenty Twenty-Two
Varia (and child themes like Rockfield)

… ask us in the SideMenu Support Forum to add your theme!
You can also enable a “Mega Menu” style dropdown menu feature.
How to use the SideMenu block
The SideMenu block to show the button to open the SideMenu. The optional title attribute is the text that is shown on the button.
Please note that for the meantime, all options are still found in “Customizer – SideMenu”.
How to use the [sidemenu] shortcode

Use [sidemenu] to just show the default button
Use [sidemenu]My Button Title[/sidemenu] or [sidemenu title=”My Button Title”] to show the button with your own text
Use [sidemenu class=”my-class” title=”Filtered SideMenu Button”] to show a button which only shows widgets or menu items with the specified class

To add a class to a menu item in “Dashboard – Appearance – Menus” click “Screen Options in the top right hand corner of the screen and tick “CSS Classes”. The menu items will then show a “CSS Classes” field when expanded.
To see the class of a widget in “Dashboard – Appearance – Widgets”, expand the widget that you’ve added to the SideMenu widget area and the class name is shown at the bottom. Since WordPress v5.8 with the new Block Widget Editor, it’s super easy to set a custom CSS class for each block, just select the block and in the block options on the right, scroll to the bottom and expand “Advanced” where you can add them into “Additional CSS class(es)”.
This video will help to explain how to use classes to control the content of the widget …

To use a link as a button to open the SideMenu, set the class attribute of the link to be “open_sidemenu” Example Link. You can add classes to the element to control what content is shown as with the shortcode.
To use an anchor link to open the sidemenu, set the link to be “#open_sidemenu”. This doesn’t require a class to be set. To control what content is shown, add a dash and the class of the element(s) to be shown, for example “#open_sidemenu-testclass”.

各版本下載點

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

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

---

1.8 | 1.1.3 | 1.1.4 | 1.1.5 | 1.1.6 | 1.1.7 | 1.1.8 | 1.1.9 | 1.2.0 | 1.2.1 | 1.2.2 | 1.2.3 | 1.2.4 | 1.2.5 | 1.2.6 | 1.2.7 | 1.2.8 | 1.2.9 | 1.3.0 | 1.3.1 | 1.3.2 | 1.3.3 | 1.3.4 | 1.3.5 | 1.3.6 | 1.3.7 | 1.3.8 | 1.3.9 | 1.4.0 | 1.4.1 | 1.4.2 | 1.4.3 | 1.4.4 | 1.4.5 | 1.4.6 | 1.4.7 | 1.4.8 | 1.4.9 | 1.5.0 | 1.5.1 | 1.5.2 | 1.5.3 | 1.5.4 | 1.5.5 | 1.5.6 | 1.5.7 | 1.5.8 | 1.5.9 | 1.6.0 | 1.6.1 | 1.6.2 | 1.6.3 | 1.6.4 | 1.6.5 | 1.6.6 | 1.6.7 | 1.6.8 | 1.6.9 | 1.7.0 | 1.7.1 | 1.7.2 | 1.7.3 | 1.7.4 | 1.7.5 | 1.7.6 | 1.7.7 | 1.7.8 | 1.7.9 | 1.8.1 | 1.8.2 | 1.8.3 | 1.8.4 | 1.8.5 | trunk |

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

• OT Flatsome Vertical Menu 》Flatsome Woocommerce 佈景主題垂直菜單外掛。, 捐助連結：https://paypal.me/thinhbg59, 如需升級至專業版，請聯繫 Facebook：https://fb.com/thinh59 ̵...。
• WPB Accordion Menu – Responsive Collapse Vertical Sidebar Menu – WooCommerce Category Accordion 》手風琴菜單是 WordPress 網站非常實用的元素，讓更多內容呈現於網頁，並且避免使用者需不斷翻頁。, 如果你正在尋找手風琴菜單或折疊分類功能，那你來對地方了...。
• Mega Menu Plugin for WordPress – AP Mega Menu 》enu 插件, 使用 AP Mega Menu 在您的 WordPress 網站上添加強大且外觀精美的 mega menu。, 以下是插件特色列表：, , 水平和垂直兩種佈局, Widgetized，拖放, ...。
• Responsive Vertical Icon Menu 》#8220;8211; Select the Background color when hovering, Font size when hovering – Type the Font size when hovering , Font family when hoverin...。
• IntelliWidget Per Page Custom Menus and Dynamic Content 》telliWidget WordPress Plugin:, IntelliWidget 是一個功能強大的 WordPress 外掛，可以讓您的動態側邊欄「針對特定頁面」創建自定義「配置文件 (Profiles)」...。
• SM Vertical Menu 》這是一個 WordPress 小工具選單，可以在您的網站側邊欄垂直顯示菜單。, 特色, , 將垂直菜單添加到您的小工具區域。, 。
• Vertical Menu Widget 》輕鬆地將垂直菜單添加到您的小工具側邊欄。使用此外掛，您可以創建具有所有父項/子項可見的平面菜單，或者創建只有當前頁面/父項的子項可見的分層彈出菜單。,...。
• Vertical Sidebar Menu Block 》**總結：**Vertical Sidebar Menu Block 是一個強大的 Gutenberg 區塊外掛，讓您輕鬆地創建可自訂的垂直菜單。適用於側邊欄、導覽面板或小工具區域，該區塊旨...。
• HHD Flatsome Vertical Menu 》Flatsome 主題的垂直選單外掛。, 捐款連結： https://paypal.me/huuhadev, 感謝使用。。
• Flyout Menu Awesome by Themes Awesome 》Flyout Menu Awesome – 垂直滑出式選單 WordPress 外掛, Flyout Menu Awesome 是一款很棒的 WordPress 滑出式選單外掛，能協助您在 WordPress 網站上建立自訂...。