利用 HTML5 FUN 的烘焙機可以製作 HTML5 FUN 遊戲嵌入網站的語法，然後將自訂題庫的 HTML5 FUN 遊戲放在網站的文章中。之前的測試， HTML5 FUN 烘焙機應用在 Google Blogger、Google Sites、Weebly 和 ClassroomScreen 的嵌入區塊中是沒問題的；因為七月初要去宜蘭縣的學校分享 HTML5 FUN，而宜蘭縣網路中心提供的 blog 是使用 WordPress，好久沒架站了，偷懶直接申請了一個宜蘭縣網的 WordPress 來試試看。摸索了一個晚上，終於試出如何讓 WordPress 可以正常的接受「烘焙機」的語法。這樣說來，表示可以成功在 WordPress 中嵌入 HTML5 FUN 的遊戲了嗎？是也，非也！程式、圖片可以正常運作，聲音的部份則無法順利地播放(此問題在一般的 WordPress 中不會發生)，研究了半天，也盡量調整了 HTML5 FUN 的程式，看來是無法全部由烘焙機這邊解決，詳情後面再說明。
底下來看看讓 WordPress 可以嵌入「焙焙機」的三部曲。
之一：在 WordPress 文章中插入HTML語法
我申請到的 WordPress 中，目前文章的編輯器有三種：
- 傳統編輯器
- 區塊編輯器
- Elementor 編輯器
傳統編輯器（別試了）
「傳統編輯器」是 WordPress 內建的，這個編輯器中有一個「文字」的按鈕，按下去可以切換編輯模式，讓我們輸入 HTML 語法；或是在預覽模式中的「檢視」中有一個「內容的 HTML 程式碼」選項，按下後，可以讓我們自己輸入 HTML 語法；但是當我們按「預覽」或是結束編輯、儲存時，語法並非保持原始輸入的的內容，會被插入一堆 <p>、</p>、<br> 的分段、換行語法，這樣一來，「烘焙機」中，題庫設定的語法就會被破壞，而無法正常運作。所以建議如果要放 HTML5 FUN 的遊戲，就不用花時間測試WordPress 的「傳統編輯器」了。
區塊編輯器（姑且一試）
較新版的 WordPress 內建編輯器是「區塊編輯器」，如果預設的編輯器是前面提到的「傳統編輯器」(例如宜蘭縣網中心的WordPress 5.9.4 版)，可以在 WordPress 「控制台」中這樣更換(參考圖1)：
- 按「控制台」。
- 按「設定」中的「寫作」。
- 「 全站預設編輯器」選「區塊編輯器」。
- 按「儲存設定」
 |
| [圖1] 將編輯器換成「區塊編輯器」 |
如何使用「區塊編輯器」來加入「烘焙機」的語法呢？
在新增區塊時，先按一下斜線「/」，找到「自訂 HTML」的「小工具」(參考圖2)，將它拖曳到文章中新增，利用它，可以將 HTML5 FUN 烘培機的語法貼進去 (參考圖3～5)。
 |
| [圖2] 區塊編輯器的「自訂HTML」 |
 |
| [圖3] 「自訂HTML」的輸入區 |
 |
| [圖4] 在「自訂HTML」的輸入區中貼上「烘焙機」語法 |
 |
| [圖5] 按「發布」鈕張貼文章 |
運作的結果如何呢？
利用「區塊編輯器」的「自訂HTML」小工具新增烘焙機語法，「幾乎」保持原狀，為什麼用「幾乎」這個詞呢？在「區塊編輯器」中，對 AND 符號「&」有時會將它編碼變成「&」，這對 JavaScript 的程式來說就有困擾了，因為烘焙機中有使用到「&&」來做兩個條件的 AND 邏輯運算，「&&」和「&&」完全不同啊！如果無法保持烘焙機的完整語法，就會出現類似圖6 ，題庫格式有問題的錯誤訊息，而無法正常運作：
 |
| [圖6] 因題庫設定格式被破壞產生的錯誤訊息 |
試了半天，前述「&」的問題我有解法，就是在使用到「&&」的前一行，加上一行註解，並放入大於符號「>」即可避免「區塊編輯器」將「&」變成「&」。
哈！有新發現是很好玩，但是要一個個將烘焙機的範本加上無用的語法，一點都不好玩。所以我花了一些時間，修改了 HTML5 FUN 烘焙機的題庫範本，將原來需要用的「&&」通通改用「||」，也就是將原來運算式的「且」，改用「或」，避開 WordPress 「區塊編輯器」會特別關注的「&」，這樣子，大家用起來會更方便。
Elementor 編輯器(最佳方案)
Elementor 是 WordPress 的外掛，宜蘭縣網中心很貼心地已安裝好 Elementor 外掛，並且可以隨時捨 WordPress 內建的編輯器，改使用 Elementor 來編輯文章(參考圖7，按下箭頭所指的按鈕)。
 |
| [圖7] 指定使用 Elementor 編輯器 |
在 Elementor 的「小工具」中，有一個圖示為「</>」的「HTML」小工具，可以讓我們自行輸入 HTML 語法，將該圖示拖曳到文章的編輯區中(參考圖8)，
 |
| [圖8] 拖曳「HTML小工具」到編輯區 |
然後將烘焙機的製作的語法貼到輸入區中，即可按「更新」的按鈕儲存內容(參考圖9)。
 |
| [圖9] 貼語法至「HTML小工具」中並儲存內容 |
之二：修改「壓縮HTML」的設定
前面提到可以使用 WordPress 的外掛 Elementor 編輯器來輸入「烘焙機」的內容，但是如果將文章發布後實際測試，結果卻還是出現像之前圖6的找不到題庫的錯誤訊息。
原來宜蘭縣中心的 WordPress 有安裝並啟用了「Minify HTML」外掛，本來是可以使用這個外掛來將文章的資料精簡(壓縮)，它會會在 WordPress 的後臺，將文章中的 HTML 語法(包括 JavaScript) 盡量地減少資料量，可以加快文章載入的速度。使用「壓縮HTML 」的外掛，一般情形下是沒有問題，但是「烘焙機」的題庫使用了一個特殊的機置來存放題庫，剛好會被 WordPress 的「壓縮HTML」中的選項給壓縮(刪除)了；所以如果不修改設定，並關閉「壓縮HTML」，程式載入遊戲題庫時，就會找不到題庫，而無法出題。
在 WordPress 中關閉「壓縮HTML」的方法如下：
開啟 WordPress 的「控制台」，裡面會有一個「設定」，打開「設定」後，應該會看到清單中有「壓縮HTML」，點選以後，就可以進行設定。(參考圖10)
 |
| [圖10] 關閉「壓縮 HTML」的部份功能 |
排除「壓縮HTML」設定中的「Minify HTML」讓 HTML5 FUN 遊戲題庫造成的干擾，最簡單的方式當然是直接將「Minify HTML」設為「Disable」，這樣就將「壓縮HTML」整個關閉了。如果想保守一點，讓其它選項保持預設值，只要將底下兩項設為「No」就好：
- Minify inline JavaScript
- Remove HTML, JavaScript and CSS comments
修改完，按「儲存設定」的按鈕，設定即可生效。當我們再度開啟之前無法正常載入遊戲題庫的 HTML5 FUN 遊戲時，應該可以正常運作了。
之三：待解決
前面說到 HTML5 FUN 的遊弃在宜蘭縣網中心的 WordPress 會有無法播放聲音的問題，主要是該主機對載入網站外部的網頁及相關資料有設置了「Content Security Policy (CSP)」的安全規則，照目前的設定，它有針對影音媒體設了限制使用的規則：
- media-src 'self' https://www.youtube.com;
這條規則的意思是，只有存放在該主機，或來源是 Youtube 網站的影音，才能播放。
而 HTML5 FUN 的音效或是語音檔案的主要來源是使用 Base64 編碼的資料(放在設定檔或是程式中)、放在 Github 主機，或是使用者自訂的來源；這樣一來，當 HTML5 FUN 的遊戲放在宜蘭縣網的 WordPress，就會因為聲音資料來源不符合 CSP 的管制規則，而無法播放聲音了。以 HTML5 FUN 的籃球高手來說，如果去查看瀏覽器的控制台，在載入遊戲以後，會看到類似這樣的錯誤訊息：
Refused to load media from 'https://gsyan888.github.io/html5_fun/html5_basketball/assets/basketball_sound.mp3' because it violates the following Content Security Policy directive: "media-src 'self' https://www.youtube.com".
因為籃球高手的音效檔案是放在 github 網域中，違反了縣網中心設定的 CSP 規則了，所以便無法播放音效。少了音效的遊戲，趣味的確少了很多。
怎麼解決呢？遊戲使用的音效資料因為是固定的，我已經修改了大部份的遊戲，讓音效資料不用重新透過別的網站載入，這樣子，遊戲的音效可以正常運作；不過，其它的聲音，像許多遊戲中會使到 Google 的合成語音(TTS)、Vocaroo網站錄的語音或是其它聲音檔，除非 WordPress 主機的 CSP 規則設定改了，不然，暫時是無解的。
結論
歸納一下前述的內容，做一個小結論，目前如果使用宜蘭縣網中心提供的 WordPress 主機放 HTML FUN 的遊戲：
- 建議使用 Elementor 編輯器來編寫文章，用它貼上「烘焙機」的內容。
- 記得修改「壓縮HTML」的設定，讓它不會在後台更動「烘焙機」的題庫語法。
發表文章
沒有留言:
張貼留言