
內容簡介
Widget Areas for LearnDash 是一款外掛,可以在 LearnDash 之中新增多個小工具區塊 (也稱為「側邊欄」) 以供客製化學習體驗。透過建構在 LearnDash 內建的回呼功能上,我們可以在 LearnDash 頁面上的不同區域分配小工具區塊。
支援的 LearnDash 小工具區塊:
- 專注模式 (Focus Mode):側邊欄 - 導覽上方
- 專注模式 (Focus Mode):側邊欄 - 導覽下方
- 專注模式 (Focus Mode):內容起始處
- 專注模式 (Focus Mode):內容下方
- 課程頁面 (Course Page):內容起始處
- 課程頁面 (Course Page):內容結束處
- 群組頁面 (Group Page):內容起始處
- 群組頁面 (Group Page):內容結束處
本外掛需要使用「LearnDash 3.0」的啟用範本,版本測試為 LearnDash 3.6.0.3。
如何使用:
啟用本外掛後,就能在 WordPress 管理後台的「外觀」>「小工具」畫面上看到新增的小工具區塊。您也可以透過「客製化」>「外觀」>「小工具」使用這些小工具區塊。
只要在相對應的小工具區塊新增您需要的區塊/小工具,請務必點擊下方的「儲存」按鈕,然後刷新您所新增區塊/小工具的頁面,就能看到它們出現在那裡。
新增的內容類型:
WordPress 固有了一組預設的小工具,其中幾個可能非常有用。如果您使用新的區塊編輯器,所有區塊都可以適用。
- 新增帶有一些基本文字的簡單段落區塊
- 新增圖像或影片/嵌入區塊以進行更多視覺內容
- 新增導覽選單小工具以插入您所建立的自訂選單
- 新增個人化 HTML 小工具以嵌入 < code > 和編寫您自己的程式碼
提示:您可以使用 LearnDash 學生和 LearnDash 訪客區塊,只向已註冊學生或未註冊訪客顯示區塊內容。
LearnDash 小工具:
LearnDash 事先已包含了一些小工具,不過在這些小工具區塊中可能只會有一種小工具是有意義的。
- 在專注模式側邊欄的頂部或底部新增課程進度條
請隨意嘗試使用其他 LearnDash 小工具。更多資訊請見此 LearnDash Widgets。
Elementor 範本:
如果您使用 Elementor Pro,您可以建立自訂的區塊,並在您的網站的任何位置嵌入它,包括您的新的LearnDash 小工具區塊。有兩種方式可以實現:
1.在您選擇要插入的區塊 / 小工具時,選擇 Elementor Library 小工具。從下拉清單選擇一個範本。按一下“儲存”。
2.在“範本”>“儲存範本”中,複製要插入的範本旁邊的短代碼。現在,您將在小工具區塊中插入一個短代碼區塊,然後貼上這個短代碼。
如需更多信息,請參閱Elementor知識庫中的文章。
小工具區塊的CSS類名:
如果您需要使用 CSS 樣式來定位小工具區塊以套用自訂樣式,您可以使用以下類名。
所有小工具區塊均具有.lgx-widget-area類名。
- 專注模式:側邊欄 - 導覽上方 - .lgx-widget-area.fm-nav-before
- 專注模式:側邊欄 - 導覽下方 - .lgx-widget-area.fm-nav-after
- 專注模式:內容起始處 - .lgx-widget-area.fm-content-start
- 專注模式:內容下方 - .lgx-widget-area.fm-con
外掛標籤
開發者團隊
原文外掛簡介
Widget Areas for LearnDash simply gives you more places to add custom content in LearnDash. By utilizing built-in LearnDash action hooks, we assign widget areas (also known as “sidebars”) to various locations throughout your LearnDash pages.
Available LearnDash Widget Areas
Focus Mode: Sidebar: Above Navigation
Focus Mode: Sidebar: Below Navigation
Focus Mode: Content: Start
Focus Mode: Below Content
Course Page: Content: Start
Course Page: Content: End
Group Page: Content: Start
Group Page: Content: End
Requires the “LearnDash 3.0” Active Template. Tested with LearnDash 4.23.
How to Use
Upon activating the plugin, new widget areas will appear on the Appearance > Widgets screen in your WordPress admin area. You can also access them via the Customizer (Appearance > Customize > Widgets).
Simply add the blocks/widgets you’d like to insert into the corresponding widget areas. Be sure to click the “Save” button at the bottom.
Navigate to a page that contains that widget area, refresh, and your new widgets will be there.
Types of Content to Add
WordPress comes with a set of default widgets, several of which might be useful. If you’re using the new block editor, all blocks will also be available to you.
Add a simple Paragraph block with some basic text
Add an Image or Video/Embed block for more visual content
Add a Navigation Menu widget to insert a custom menu you’ve created
Add your own Custom HTML widget to embed an
TIP: You can use the LearnDash Student and LearnDash Visitor blocks to display a block’s contents only to enrolled students or unenrolled visitors.
LearnDash Widgets
LearnDash comes prepackaged with a few widgets, but there’s probably only one that makes sense in these widget areas.
Add a Course Progress Bar to the top or bottom of your Focus Mode sidebar
Feel free to experiment with the other LearnDash widgets.
Elementor Templates
If you’re using Elementor Pro, you can create a custom section and embed it anywhere on your site, including in your new LearnDash widget areas. There are two ways to do this:
When you go to insert a block/widget, select the Elementor Library widget. Choose a template from the dropdown menu. Click “Save.”
Navigate to Templates > Saved Templates. Copy the shortcode next to the template you want to insert. Now you’ll insert a Shortcode block into the widget area, and paste the shortcode.
For more information, see the article in Elementor’s knowledge base.
Widget Area CSS Class Names
If you need to target the widget areas to apply custom styles using CSS, you can use the following class names.
All widget areas have the .ldx-widget-area class.
Focus Mode: Sidebar: Above Navigation – .ldx-widget-area.fm-nav-before
Focus Mode: Sidebar: After Navigation – .ldx-widget-area.fm-nav-after
Focus Mode: Content: Start – .ldx-widget-area.fm-content-start
Focus Mode: Below Content – .ldx-widget-area.fm-content-bottom
Course Page: Content: Start – .ldx-widget-area.course-content-start
Course Page: Content: End – .ldx-widget-area.course-content-end
Group Page: Content: Start – .ldx-widget-area.group-content-start
Group Page: Content: End – .ldx-widget-area.group-content-end
Example Usage:
.ldx-widget-area.fm-nav-before {
margin: 1em;
}
This would add 1em of spacing around the widget area that appears above the navigation in the Focus Mode sidebar.
In addition, all widgets placed inside of a widget area have a class of .ldx-widget.
Show/Hide Widgets on Certain Devices
While not a direct feature of this plugin, you can show/hide widgets on different devices using another free plugin.
Install & activate the Widget Options plugin
Navigate to the widget that you’d like to adjust the visibility on
Scroll to the bottom and click on the tab with the mobile phone
Choose to either show or hide on the checked devices
Check the appropriate devices
Click “Save”
Show/Hide Widgets on Specific Course/Lesson/Topic Pages
Another feature of the free Widget Options plugin (mentioned above) is to only show widgets on specific course, lesson, topic or quiz pages.
Install & activate the Widget Options plugin
Navigate to the widget that you’d like to adjust the visibility on
Scroll to the bottom and click on the settings cog icon
Click on the Logic tab
In the text box, you can use the is_single() conditional tag to only display that widget on a specific page
Use the ID of the course, lesson, topic or quiz
👉 How to find the ID of LearnDash content
Example:
This would only display the widget on the page with an ID of 7:
is_single( '7' )
If you wanted to display a widget on multiple pages (with IDs of 1, 2 and 3), your code would look like this:
is_single( array( 1, 2, 3 ) )
There are many more WordPress conditional tags you can use.
From within WordPress
Visit “Plugins > Add New”
Search for “Widget Areas for LearnDash”
Click the “Install” button
Click the “Activate” button
Navigate to “Appearance > Widgets” or open the Customizer to start adding blocks/widgets to your new widget areas
