> For the complete documentation index, see [llms.txt](https://docs.wpsite.pro/wp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wpsite.pro/wp/powercourse-jiao-xue-wen-jian/duan-dai-ma-she-ding/ke-cheng-lie-biao-duan-dai-ma-shi-yong-jiao-xue.md).

# 課程列表短代碼使用教學

## <mark style="color:orange;">什麼是課程列表短代碼?</mark>

課程列表是可以一次顯示所有課程的列表，

主要是讓人能在你的網站上，一次就瀏覽到所有的課程，

在你設好課程列表顯示的條件之後，只需要點擊複製按鈕，就能將代碼貼在任何頁面中，

系統會依照你設定的條件，自動抓取課程相關資訊並顯示在列表中，

這個讓你可 自定義課程列表顯示 的功能稱為 - **課程列表短代碼**。

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FjsnrGfpDJkJs1SIDeBAj%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%884.50.25.png?alt=media&amp;token=6b18c76a-10e0-461c-b2b2-ec819b656972" alt=""><figcaption></figcaption></figure>

## <mark style="color:orange;">怎麼取得短代碼？</mark>

1. 到Power Course後台 > 短代碼
2. 下圖紅框處可調整 課程列表 要顯示的條件\
   例如想要顯示哪幾個課程、排列順序依據、一列想顯示幾個課程..等

{% hint style="info" %}
下方代碼會依據你所選的條件即時呈現，代碼都不相同
{% endhint %}

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FmzFBKrMVgS8s1YF5jTFx%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.15.49.png?alt=media&amp;token=37e419c9-5951-465a-949f-8266ed27231b" alt=""><figcaption></figcaption></figure>

3. 點擊下圖紅框處最右邊的<img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FihwyIZzPyPBq4yPBB85s%2Fcopy.png?alt=media&amp;token=7b070134-7a43-4125-a147-569b26551410" alt="" data-size="line">按鈕可複製整段代碼

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FLvYkamWFqABP1DKo9IHz%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.10.21.png?alt=media&amp;token=3c63c785-83e1-42d5-8d6e-cac2413c4184" alt=""><figcaption></figcaption></figure>

## <mark style="color:orange;">短代碼設定方式</mark>

1. 先在Power Course中設定好條件

* **顯示數量** - 列表要顯示多少課程數量<br>
* **欄位**  - 一列要顯示幾個課程<br>
* **只包含指定課程** - 如果想顯示所有課程沒有要指定，此欄可跳過\
  &#x20;                               這裡可指定只顯示哪幾個特定課程，欄位的課程可以複選！<br>
* **排序調整** - 可選擇排序要升序或是降序<br>
* **排序依據** - 選擇課程排列的順序要依據什麼，可以選擇用 發佈時間、修改時間、名稱、ＩＤ或是隨機<br>
* **商品分類** - 可抓出特定分類的課程\
  &#x20;                   例：有分類免費課程跟付費課程，只想顯示免費課程在列表中的話，就選擇免費課程的分類<br>
* **商品標籤** - 可讓抓出特定標籤的課程<br>

✳️小提醒：如果沒有編輯任何條件的話，短代碼不會生成\
&#x20;                   如課程列表沒有想指定的條件， 『排序依據』 的欄位可選 **隨機** ，下方就會出現短代碼囉

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FrPjTXDQjnxDRDNL0iyKP%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.15.49.png?alt=media&amp;token=da95c760-db9e-477a-8147-4ac3b645b660" alt=""><figcaption></figcaption></figure>

2. 將短代碼複製

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2F3AiLXFLSwsZDlezCmo4N%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.10.21.png?alt=media&amp;token=259b937b-bada-42d5-85c5-69c0ac44b628" alt=""><figcaption></figcaption></figure>

2. 到WordPress後台創立一個頁面，頁面 > 新增頁面

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2Fm5WmvCTdECKZvUB69cLS%2F1732598333233.jpg?alt=media&amp;token=01803851-2c39-4bfe-b37d-076ebf1b4f75" alt=""><figcaption></figcaption></figure>

3. 點擊選取 『短代碼』&#x20;

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2F2MdjrZEptTcK5SN5I6BL%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.02.25.png?alt=media&amp;token=754c7bba-b00e-4742-8a39-da126b730329" alt=""><figcaption></figcaption></figure>

4. 將剛複製的短代碼貼入欄位中， 最後點擊右上角 **發佈** 按鈕

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FvULhjA7WkbBbZ7X4oc44%2F1732605936119.jpg?alt=media&amp;token=9868950b-b433-4aff-9cc7-9b878088bf9d" alt=""><figcaption></figcaption></figure>

這樣就能輕鬆製做出一頁課程列表囉～<br>

## <mark style="color:orange;">使用 Elementor 編輯課程列表頁</mark>

如果你想在 課程列表 的頁面中增加更多資訊，

例如想放一些學員購課好康、最新優惠等，

可以選擇 **使用 Elementor 編輯**&#x20;

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FlR3DN2anKcznLJs3wfu9%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.53.52.png?alt=media&amp;token=5117d225-fca2-4b17-8bf4-ba8e041723f2" alt=""><figcaption></figcaption></figure>

進入 Elementor 編輯頁後，就可以任意編排你的課程列表頁囉！

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2F0Fe4Uuzb2cRKd4yZpW3Z%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.55.57.png?alt=media&amp;token=e61439d9-5f0f-4b69-936a-a081adb4d202" alt=""><figcaption></figcaption></figure>

> ### <mark style="color:orange;">編輯後的前台呈現範例圖</mark>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FOdQoY5mLotJ6fA6wxTCc%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.58.05.png?alt=media&amp;token=0370cb6c-7cd6-47ca-afef-33ea7ada0456" alt=""><figcaption></figcaption></figure>