內容簡介
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」<a href="#" class="open_sidemenu">Example Link</a>。您可以在元素中添加類別以控制內容，就像使用短代碼一樣。
若要使用錨點連結打開 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)
Avada
Avanam
BeTheme
Divi
Genesis Block Theme
Genesis Framework
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”.
