> For the complete documentation index, see [llms.txt](https://docs.wpsite.pro/powercourse/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/powercourse/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://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FIyyngJy5oAaus0DudS40%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%884.50.25.png?alt=media&amp;token=be8322e9-4ba3-42dd-b98c-98d6a3cac015" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2F0bRXACKJMMHb5npkPuqm%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.15.49.png?alt=media&amp;token=be291db2-d1ac-4f46-8537-e4a5765c4a88" alt=""><figcaption></figcaption></figure>

3. 點擊下圖紅框處最右邊的<img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2Fvm8hXbqR2clqTvVAZQ9B%2Fcopy.png?alt=media&amp;token=3679583a-5463-4ace-a748-9ad152409767" alt="" data-size="line">按鈕可複製整段代碼

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FDxrRAZP0KJ3v6lFisc5J%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.10.21.png?alt=media&amp;token=9ffd8084-9fff-492d-8e96-2e71f40293f6" 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://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FcMaRQmqYNg0j4HIlzkcR%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.15.49.png?alt=media&amp;token=a5c84813-44b8-48a9-b7ba-5e0ef68754b2" alt=""><figcaption></figcaption></figure>

2. 將短代碼複製

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2Fh7RtKN36fI4PrT4wOWBe%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.10.21.png?alt=media&amp;token=919cfb41-a616-4b33-a11a-a50be2556d05" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FBSiAkeVgqgUo7JB7pB1D%2F1732598333233.jpg?alt=media&amp;token=0bf94b2e-e8a6-47c1-9b72-4442f90e199d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FML95dgRUUyLLyn6pA3T3%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.02.25.png?alt=media&amp;token=bbd09d4a-2934-48d1-bca4-98a95bb04a39" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FMUWEY6gaq1I8JVVpZqN7%2F1732605936119.jpg?alt=media&amp;token=3453d392-65c0-42fa-98c9-d54866dc8d7f" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FPVF21zTTreFyuDy2y6W6%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.53.52.png?alt=media&amp;token=91c94072-721c-4e70-888e-408a379c519d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FqajuIGpX7muymjDodsbA%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.55.57.png?alt=media&amp;token=4b9d3280-b13f-4646-93f9-7b018a5194de" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://645721907-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7S6olwNFm6y9EJW7zLPW%2Fuploads%2FFsW3zELzHS3HjZJB5VZR%2F%E6%88%AA%E5%9C%96%202024-11-26%20%E4%B8%8B%E5%8D%883.58.05.png?alt=media&amp;token=eb1dccb0-8bd8-40e8-9efc-9db8e1bf02be" alt=""><figcaption></figcaption></figure>