How to add Gliaplayer in your WordPress website

本篇文章將會引導您，輕鬆嵌入 GliaPlayer 在您的 wordpress 頁面上

• 您可以選擇在特定頁面上 將 GliaPlayer 嵌入頁面

• 也可以選擇利用小工具 將 GliaPlayer 放置於網頁全局

將 GliaPlayer 嵌入頁面

1. 首先，進入 wordpress 的控制台介面。

2. 點選要編輯的 wordpress 頁面，進入編輯界面。

3. 在要放置播放器的位置新增區塊，選擇 自訂 HTML。

4. 將 GliaCloud 提供給您的播放器代碼貼上代碼區塊。

範例代碼格式大致如下：

<div class="gliaplayer-container" data-slot="slotGroup-name" data-article="article"></div>
<script src="https://player.gliacloud.com/player/slotGroup-name" async></script>

5. 點擊預覽可以看見播放器加載成功。

最後點擊發布即可完成，並瀏覽頁面確認播放器是否正確嵌入！

將 GliaPlayer 放置於網頁全局

或許，您會感到疑惑，只在特定頁面上嵌入播放器，那其餘的頁面是否就不會顯現播放器了？

是的，如果您想要在所有頁面都顯示播放器，就必須在每個頁面的編輯上執行上述步驟。

放置 gliaplayer 的頁面

未放置 gliaplayer 的頁面

當然，除了如此費力的方法，我們也可以利用 WordPress 的 Widgets（小工具），將播放器自動嵌入網頁所有的頁面。

1. 首先，進入 wordpress 的控制台介面 > 外觀。

2. 選擇小工具 > 自訂 HTML。

選擇您想放置 player 的 widget 區塊（此範例使用頁尾的區塊）

3. 編輯小工具內容，貼上提供給您的播放器代碼。

代碼內容與頁面編輯時的代碼一樣

完成後點選儲存 > 完成。

5. 前往網站瀏覽可以看見播放器加載成功，出現在您選擇的工具區塊上。

附註. 使用 HTML Code 鎖定 Player 為特定尺寸

如果您希望您的播放器以固定尺寸顯示，可以在代碼上再加上一層 <div> 固定區塊大小。

固定 300px x 250px 的 Player

修改範例代碼：width 為寬；height 為高，可依需求自行修改。

<div style="width:300px;height:250px">
    <div class="gliaplayer-container" data-slot="slotGroup-name" data-article="article"></div>
    <script src="https://player.gliacloud.com/player/slotGroup-name" async></script>
</div>