外掛說明

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!

這個外掛可以為使用中的佈景主題插入具備回應式設計的 SideMenu 選單資訊欄及選單位置，並可在其中加入小工具。

透過點擊選單按鈕便可以 SideMenu 選單，使用者可將 SideMenu 選單按鈕新增至網站的任何選單中。

開啟 SideMenu 選單時，網站整個頁面會變暗，並以滑出的方式顯示選單。

點擊 SideMenu 選單右上方的關閉按鈕、點擊網站畫面變暗的地方或向下捲動畫面，便能關閉 SideMenu 選單。

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
Inspiro
OKAB
Twenty Seventeen
Twenty Twenty
Twenty Twenty-One
Twenty Twenty-Two
Varia 及其子佈景主題 (例如 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” <a href="#" class="open_sidemenu">Example Link</a>. 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”.

適用於區塊編輯器

這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。

SideMenu Block to show the open SideMenu button.

安裝方式

使用這個外掛能輕鬆將 SideMenu 選單加入 WordPress 網站…

1) 自動安裝 SideMenu 或透過上傳 ZIP 檔案手動安裝。
2) 在 WordPress 的 [外掛] 頁面啟用外掛。
3) 在 [外觀]→[選單] 或在小工具/文章中使用 [sidemenu] 短代碼新增能開啟 SideMenu 選單的按鈕。
4) 在 [外觀]→[小工具] 中將小工具新增至 SideMenu 選單資訊欄，或在 [外觀]→[選單] 將選單新增至 SideMenu 選單位置。

使用者評論

swivelsupport 2024 年 3 月 28 日 1 則留言

Excellent plugin and really good support, could not recommend highly enough.

ellieadco 2023 年 2 月 8 日 1 則留言

This plugin is excellent, and the support team is incredible! My client wanted a very specific, niche-in-style side menu, and this plugin made it very easy to created and customize to the client's exact specifications. Saved me hours of custom coding, and I couldn't be happier. Highly recommend!

wolnosc95 2022 年 12 月 6 日 1 則留言

Fast support <3 Quick introduction of new feature <3 Very good plugin and cheap plugin <3 Advantages only 🙂 I recommend buying the plugin in the PRO version, the author of the plugin is a professional 🙂

incwise 2022 年 7 月 11 日 1 則留言

You can do anything you want with this plugin to create awesome side menus. Support is ultra-fast and they even update plugin for my request, they care about customers. Mobile friendly, you can use different page builders (exmp. Divi) and many more features. Indrek veebihai.ee

Richard Brown 2022 年 6 月 1 日

Hi Installed the free version and within minutes bought the upgrade. I didn't need to the free version worked for me just fine but for £5.99 the cost is worth it and of course I am supporting the developer. I love that this menu enables me to remove the sidebar and have a full width content site. It is easy to use and makes navigating the site simple. Thanks.

zbyszekpietras 2022 年 5 月 9 日 1 則留言

Well, I chose to use this addon for one reason: I needed to minimize pages number with static information. SideMenu was an excellent choice. It works with Elementor, is hight customized via the settings panel, and with CSS too. And a very important topic: support is great!

閱讀全部 22 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈SideMenu〉的開發相關工作。

Oliver Campion

〈SideMenu〉外掛目前已有 1 個本地化語言版本。感謝全部譯者為這個外掛做出的貢獻。

將〈SideMenu〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣？

任何人均可瀏覽程式碼、查看 SVN 存放庫，或透過 RSS 訂閱開發記錄。

變更記錄

1.8.1

Fixed a bug with the “Settings” link in the plugins panel

1.8

Fixed an “unexpected output” bug

1.7.9

Minor security updates to translation strings

1.7.8

Fixed JavaScript bug with SideMenu block (for real this time!)

1.7.7

Fixed JavaScript bug with SideMenu block

1.7.6

Added a SideMenu block to add a button to open the SideMenu in Gutenberg

1.7.5

General housekeeping

1.7.4

Added support to hijack the mobile menu toggle in Inspiro theme

1.7.3

Add a fix for a bug in WordPress core that fires wp_footer hook when managing Widgets and another bug in v6.2.2 that adds
and

p> tags to shortcodes in block theme templates

1.7.2

Added title attribute to buttons and cleaned up JavaScript

1.7.1

General housekeeping

1.7.0

Added aria-label to open / close button icon wrappers

1.6.9

Updated details of new mobile width / min width options

1.6.8

General housekeeping

1.6.7

Fixed a bug where the SideMenu closed when the iPhone keyboard appeared after clicking on an input element

1.6.6

Added support to hijack the mobile menu toggle in Twenty Twenty theme

1.6.5

Bug fix to delay by 5 milliseconds to allow Divi JavaScript to generate the mobile menu

1.6.4

Preparing for WordPress v6.0

1.6.3

Text Domain issue resolved

1.6.2

Submenu toggle CSS tweak

1.6.1

Bug fix

1.6.0

Added support to hijack the mobile menu toggle in Auction Theme (AT10) and Twenty Twenty-Two themes

1.5.9

Fixed a bug where # anchor links would not close the SideMenu when clicked

1.5.8

Added details of some new premium options (menu item hover animation, grow content to fit SideMenu, rounded corners and close icon background color)

1.5.7

Added option to show a border to the left of menu items in the SideMenu

1.5.6

Added Customizer Panel and more Sections to make settings easier to find

1.5.5

Various bug fixes

1.5.4

Removed block margins when block has a background
Added option to prevent admin auto-open with tooltips

1.5.3

Use a dashicon for the submenu toggle icon
On toggle close child submenus are closed too
Added option to show the number of menu items in a submenu

1.5.2

Added support to hijack the mobile menu toggle in Varia and Rockfield themes

1.5.1

Use anchor links to open the SideMenu with #open_sidemenu

1.5.0

Use links to open the SideMenu by adding “open_sidemenu” to the link class attribute

1.4.9

Fixed a bug with Twenty Twenty-One mobile menu hijack

1.4.8

Bug fixes including opening / closing transitions and hiding Twenty Twenty-One submenu toggles

1.4.7

Bug fix for class filtering with themes that add extra wrappers to menu elements

1.4.6

Added support for Block Widget Editor and removed all PHP short tags

1.4.5

Preparing for WordPress v5.8

1.4.4

Bug fix for Astra theme mobile menu hijack

1.4.3

Added a control to increase the z-index property of the SideMenu

1.4.2

Bug fix for Astra theme mobile menu hijack

1.4.1

Bug fix for Astra theme sites using jQuery

1.4.0

General housekeeping

1.3.9

Bugfixes

1.3.8

Fixed issue with Divi theme and dropdown submenus on iOS devies
Fixed issue with SideMenu that can be seen on iPhone in landscape view
Added a checkbox to choose to hide scrollbar

1.3.7

Bug fix issue with submenu click events on iOS devices

1.3.6

Added support to hijack the mobile menu toggle in Divi theme
Added CSS to hide the vertical scrollbar on Windows browsers

1.3.5

Added support for BeTheme’s custom header mobile menu button hijack

1.3.4

General housekeeping

1.3.3

Bug fix to allow mobile menu hijack to work when no SideMenu toggle is on the page

1.3.2

Added option to enable dropdown menus on Navigation Menu widgets

1.3.1

Added option to enable dropdown menus

1.3.0

Added support to hijack the mobile menu toggle in OKAB theme

1.2.9

Bug fix

1.2.8

Added the ability to filer the SideMenu to allow different SideMenu buttons to show different content in the SideMenu

1.2.7

Added the ability to show the hamburger icon before or after the SideMenu button title

1.2.6

Added support to hijack the mobile menu toggle in Twenty Twenty-One and BeTheme themes

1.2.5

General housekeeping

1.2.4

Updated JavaScript to work with IE11

1.2.3

Bug fix

1.2.2

Added support to hijack the mobile menu toggle in Astra theme

1.2.1

Added support to hijack the mobile menu toggle in Twenty Seventeen theme

1.2.0

CSS adjustments

1.1.9

CSS adjustments

1.1.8

CSS adjustments

1.1.7

Bug fix

1.1.6

Redeveloped the JavaScript to remove requirement for jQuery

1.1.5

Bug fixes

1.1.4

Bug fixes

1.1.3

Moved all premium options to a new premium plugin

1.1.2

Option to change width of section border

1.1.1

Option for text size
Bug fix

1.1.0

Options for title size, weight, alignment and case

1.0.9

Bug fix

1.0.8

Options to change opacity and color of site overlay

1.0.7

Bug fixes

1.0.6

Option to choose your own Dashicon

1.0.5

Option to use “hamburger” icon on open button(s)

1.0.4

Options for color and width
Allow SideeMenu scrolling

1.0.3

New [sidemenu] shortcode
Started adding premium options

1.0.2

Full width SideMenu on mobile
SideMenu display location

1.0.1

Customizer option to position the menu on the left or the right

1.0.0

First version of the plugin