[WordPress] 外掛分享: SideMenu

首頁外掛目錄 › SideMenu
WordPress 外掛 SideMenu 的封面圖片
900+
安裝啟用
★★★★
4.8/5 分(24 則評價)
33 天前
最後更新
問題解決
WordPress 6.2+ PHP 7.0+ v2.0 上架:2019-10-17

內容簡介

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」。

外掛標籤

開發者團隊

⬇ 下載最新版 (v2.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「SideMenu」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

SideMenu adds an off-canvas panel that slides in from the side of your site and can be opened from a block button placed in your content, templates or template parts.
Version 2.0 introduces a block-first workflow for modern WordPress sites. Create reusable SideMenu content in the editor, choose the default SideMenu content for free blocks, then place the “SideMenu Open Button” block wherever visitors should be able to open the panel.
The block workflow is ideal for block themes and Full Site Editing because the SideMenu button can live directly in a template, header, navigation area, page or post.
Key features

SideMenu Open Button block for posts, pages, templates and template parts.
Reusable SideMenu content managed as its own editor content type.
Default SideMenu content selector in the editor.
Button text and hamburger icon controls.
Block styling support for color, typography, spacing, dimensions and borders.
Responsive sliding panel with cover overlay and close button.
Developer filters for default content and panel settings.

How to use the SideMenu block

Go to “SideMenus” in the WordPress admin and add the content you want to show in the sliding panel.
Add the “SideMenu Open Button” block to a post, page, template or template part.
Set the button text and choose whether to show a hamburger icon.
Choose the default SideMenu content from the editor’s SideMenu settings panel.

The free block uses one default SideMenu content item. Developers can filter the block content ID with the sidemenu_block_content_id filter.
Classic theme and classic SideMenu support
Classic SideMenu features are still available when your site uses a classic theme, or when the plugin detects existing classic SideMenu usage. This keeps existing shortcodes, widget sidebars, menu locations, mobile menu hijacks and Customizer settings working while giving block themes a cleaner setup path.
On classic themes, SideMenu loads the original Customizer-driven runtime. This provides the traditional SideMenu sidebar, menu location, shortcode, mobile menu hijack options and classic styling controls.
If you move an older site to a block theme, SideMenu checks for existing classic usage and keeps the classic runtime available when it finds classic SideMenu blocks, shortcodes, open links, widgets, menu locations or mobile menu hijack settings.
How to use the [sidemenu] shortcode
Classic shortcode support is still available when the classic runtime is active.

Use [sidemenu] to show the default button.
Use [sidemenu]My Button Title[/sidemenu] or [sidemenu title="My Button Title"] to show your own button text.
Use [sidemenu class="my-class" title="Filtered SideMenu Button"] to show a button that only displays classic widgets or menu items with the specified class.

To add a class to a menu item, go to “Appearance – Menus”, open “Screen Options” and enable “CSS Classes”. To add a class to a block widget, select the block in “Appearance – Widgets”, open the “Advanced” panel and use “Additional CSS class(es)”.
How to open SideMenu from a link
To use a normal link as a SideMenu button, give it the open_sidemenu class:
Example Link

To use an anchor link, set the link URL to #open_sidemenu.
For classic filtered content, add a dash and the class name to the anchor. For example, #open_sidemenu-testclass opens SideMenu and shows classic content marked with the testclass class.
Supported mobile menu hijacks
SideMenu can hijack the existing mobile menu button in a range of themes, including:

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 such as Rockfield

延伸相關外掛

文章
Filter
Apply Filters
Mastodon