by Rain Chu | 3 月 2, 2023 | PHP, wordpress, 程式
手機版本以及電腦版本的網頁共存的方法很多種，但總是要很多時候需要最佳化，當然現在流行的是採用AMP來處理手機頁面，每一種都有自己適用的場景，今天要介紹的是全手動自刻PHP程式碼處理的方法，透過 WP 內建的兩個函式來偵測使用者是否用手機看你的網頁，是的話就導引到手機專用的網頁上。
先準備好可以在你的頁面內直接寫PHP的外掛 Insert PHP Code Snippet
在外掛內搜尋 Insert PHP Code Snippet，如下圖打勾處
安裝完畢後，你可以在後台的主選單中找到 XYZ PHP Code，選擇 PHPCode Snippets，我們來寫一支很簡單的程式碼，當然你也可以用自己習慣的程式碼外掛處理
PHPCode Snippets
新增一筆程式碼，我把它命名為 checkMobile，裡面內容也很簡單，就是偵測到客戶用手機看，我們就導引到手機的頁面上
新增 PHP Code Snippet
利用 WP 內建的 wp_is_mobile() 和 wp_redirect() 就可以達到想要的效果
<?php
if( wp_is_mobile())
{
wp_redirect("https://rain.tips/phone/");
exit;
}
wp checkmobile
寫完存檔後，就可以看到 Snippet Short Code 狀態是 Active ，把Short Code複製起來，並且貼到你的頁面或是文章中就可以用了
by Rain Chu | 5 月 16, 2022 | 小學, 教育, 線上學習, 遊戲
WordWall 在疫情期間內瘋迷了半個台灣小學，老師們都用心地在思考如何讓小朋友更有興趣的學習，更有效率的練習，也讓自己更有效率的出考題和改考卷，我想 WordWall 是個很好的解決方案，他的基礎用法已經有太多的文章和影片可以參考了，我這邊就不多描述，這篇文章專注再提供進階功能說明。
進階第一問，PRO有那些功能
基本版共18種小遊戲
Pro 專家進階版再給你18種小遊戲
其中 Flash cards 閃卡就很適合練習你的記憶，跟Anki暗記是一樣的功能
進階再一問，我們是學校單位，要怎麼採購
個人方案
- 標準版本，一年費用960元，用月繳來算，用年繳計算，可以打九折，每年繳864元
- Pro版本，一年費用1,440元，用月繳來算，用年繳計算，可以打九折，每年繳1,296元
學校機構版本
這個價格等於是買4各送一個(8折)，買6各送4各(6折)，買越多送越多，所以才說應該要團購起來
進階再進階，我們有自己的線上教學平台，可以是我們平台上的一個課後測驗遊戲呢?
很多教學平台，已經有了很專業的內容，但就缺少了Quiz測驗的這段，真的要出考題，勞心費時，改考題時候，更是需要出動許多小助理才能完成，不然一個老師要對30-40個學生，甚至於我們在大學教學的時候，常常會超過100人，沒各3-5個助教，老師恐怕就會浪費太多時間在改考卷身上，既然只是缺少測驗，我們可以把 WordWall 內嵌在我們的網站中，使用的過程不用跳到別的網頁
作法也很簡單，因為他支援 oEmbed API ，只要是下面兩種資源，都可以 LINK 到你的網頁中
URL scheme
https://wordwall.net/resource/*
https://wordwall.net/play/*
下面我用 CodePen 示範給大家看一次
1.首先選擇你要遷入的網頁，例如我找了猜台灣地名的遊戲，網址是 https://wordwall.net/resource/31725039/taiwan
2. WordWall 的 API EndPoint 是 https://wordwall.net/api/oembed ，所以你要做的事情是把 https://wordwall.net/api/oembed?url= + https://wordwall.net/resource/31725039/taiwan + &format=json ，整合成一個網址，並且貼到連覽器上，這個網址分別由三個部分所組成(Api 位置，資源網址、回傳格式為json)
組合完畢後會是 https://wordwall.net/api/oembed?url=https://wordwall.net/resource/31725039/taiwan&format=json ，當你將上面這個網址打開後，你會取得 json 的回傳，這時候可以用程式取解析他，並且放在你自己的網站中，如果不太會程式的，也可以找到 html tag 後面的資訊
{"version":"1.0","type":"rich","width":500,"height":380,"title":"TAIWAN",
"html":"<iframe src=\"https://wordwall.net/embed/e1d7f7dee34d4db3b06cfdfd399782bf?themeId=0&ref=oembed\" width=\"500\" height=\"380\" frameborder=\"0\" allowfullscreen></iframe>",
"thumbnail_url":"https://az779572.vo.msecnd.net/screens-800/e1d7f7dee34d4db3b06cfdfd399782bf_0","thumbnail_width":800,"thumbnail_height":600,"author_name":"fish077311168",
"author_url":"https://wordwall.net/teacher/8247144/fish077311168",
"provider_name":"Wordwall","provider_url":"https://wordwall.net"}以上面的 json 檔案為例子，你可以取出下面的 iframe 區塊
<iframe src="https://wordwall.net/embed/e1d7f7dee34d4db3b06cfdfd399782bf?themeId=0&ref=oembed" width="500" height="380" frameborder="0" allowfullscreen></iframe>
之後把這區塊填到你的網頁中即可
可以到我的 codepen 看看
https://codepen.io/gwoyju/pen/ExQZogR
LMS 深度結合
在 WP 的 LMS 系統中，可以插入新的單元，並且透過 Short Code – [iframe][/iframe] ，將 <iframe>…</ifame> 區段包起來就可以無縫整合在你的課程中。
新增課程
編輯課程單元，並且插入 iframe
最後呈現的課程
近期留言