工作熊這兩個禮拜一直在使用免費的ChatGPT，來幫我模仿WPTouch製作WordPress的行動裝置佈景主題，也順便讓自己進一步了解CSS的規則與PHP的程式碼。經過兩個禮拜的奮鬥後，終於成型，可以試用了，距離脫離被WPTouch綁架的日子又往前跨了一步。
整體感覺，對網頁設計還處在半熟不熟的人來說，AI真的幫了大忙，一些以前需要搞半天，甚至好幾天才能解決的程式設計問題，AI幾乎都可以幫忙搞定，就算弄錯了，AI也會耐心陪著你繼續debug。想自學摸著石頭過河的人，AI真的是個可以考慮的好幫手。
先交代一下，我自己以前有寫過C、Fortran、Basic等程式語言的經驗，有些基本的程式語言邏輯概念，但很久沒有碰了，對於PHP與JavaScript太概就看得懂，要活用就有點難。
開發 WordPress 行動裝置手機佈景主題的思路
首先來整理一下自己想要開發這個WordPress行動裝置佈景主題的一些思路。我現在使用的是傳統固定網頁寬度的佈景主題，然後安裝 WPtouch Mobile 外掛，這支外掛可以讓使用WordPress架設的網站，在遇到手機訪客時，自動切換到適合手機瀏覽的佈景主題，也就是畫面會變得比較簡潔、字體變大，而其他使用桌機及平板的訪客則維持原來的佈景主題。當然啦！如果你使用的是響應式(Responsive)的佈景主題，就沒有這個困擾，響應式佈景主題可以自動適應不同裝置（如電腦、平板、手機）的螢幕尺寸，自己調整排版和內容顯示，提供最佳的瀏覽體驗。
寫在前面：在中文環境下寫程式碼很容易出現不被CSS認可的「空白中文字元（全形空白 / 不可見字元）」，導致 CSS 規則整行失效，使用DevTools查看Elements時會出現刪除線+驚嘆號，一定要多加留意小心。
如何與 ChatGPT 溝通
在一開始的時候，我將自己的需求與使用環境告訴ChatGPT說：
如果我想自己開發一個行動裝置的WordPress版型，使用現有的免費版型來修改成自己的Wordpress佈景主題，類似 WPtouch mobile plugin 的版型，你有什麼建議？該如何開始，程式碼又該如何寫？
ChatGPT最先開始建議我選用 Twenty Twenty-Three 或 Twenty Twenty-Four 這類比較簡單的佈景主題來當 base，後來發現 Twenty Twenty-Four 沒有傳統的 PHP template，所以最後我選用 TwentyTen 來當 Base。然後在盡量不去改動到原先的佈景主題的程式碼與檔案下，專為 mobile 佈景主題新增底下的檔案：
- mobile.css 專責mobile版型的CSS樣式表
- index-mobile.php 專責mobile版型的主要模板內容。通常是首頁。
- header-mobile.php 專責mobile版型的頁首內容。網站頂部的標題。
- footer-mobile.php 專責mobile版型的頁尾內容。網站底部的版權宣言。
- single-mobile.php 專責mobile版型的單篇文章內容。
- page-mobile.php 專責mobile版型的page文章內容。
- tag-mobile.php 專責mobile版型的標籤文章列表。
- category-mobile.php 專責mobile版型的分類文章列表。
- comments-mobile.php 專責mobile版型的留言功能與內容。
如何判斷並切換到行動裝置的佈景主題？
原來想要在 WordPress 判斷並切換到行動裝置版型這麼容易，只要在原來版型的 functions.php 中使用 wp_is_mobile() 函數就可以做到。但是這個函數有個缺點，就是會連同iPad與平板電腦都判斷為行動裝置，所以要改為讀取 $_SERVER[‘HTTP_USER_AGENT’] 變數來精準判斷是否為手機裝置。最後，將下列判斷是否為手機裝置的程式碼放在原來版型的 functions.php 最後面就可以了。
/* ==================================================
* 判斷是否為手機裝置
* ================================================== */
function is_phone_device() {
if ( ! isset($_SERVER['HTTP_USER_AGENT']) ) {
return false;
}
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
/* 明確排除所有 iPad / Tablet（如果是ipad/Tablet，則傳回false） */
if (
strpos($ua, 'ipad') !== false || strpos($ua, 'tablet') !== false
) {
return false;
}
/* iPhone / iPod （如果是iphone/ipod，則傳回true） */
if (
strpos($ua, 'iphone') !== false || strpos($ua, 'ipod') !== false
) {
return true;
}
/* Android 手機（如果同時有 android + mobile，則傳回true） */
if (
strpos($ua, 'android') !== false &&
strpos($ua, 'mobile') !== false
) {
return true;
}
return false;
}
/* ==================================================
* Load mobile templates (phone only)
* ================================================== */
add_filter('template_include', function ($template) {
if ( ! is_phone_device() ) {
return $template;
}
if ( is_single() && locate_template('single-mobile.php') ) {
return locate_template('single-mobile.php');
}
if ( locate_template('index-mobile.php') ) {
return locate_template('index-mobile.php');
}
return $template;
}, 99);註：$_SERVER[‘HTTP_USER_AGENT’]是PHP中的一個超全域變數，它包含了使用者瀏覽器發送的使用者代理字串，用於識別訪問者的瀏覽器類型、版本、作業系統（如Windows, macOS, iOS）和裝置（如手機、電腦）等詳細資訊，幫助網站判斷和適應不同的客戶端環境。
設計index-mobile.php(首頁)的圓形日期章與文章列表
搞定了只有使用手機瀏覽網站才切換為行動裝置佈景主題的程式碼之後，接下來就可以來設計index-mobile.php(首頁)的圓形日期章與文章列表。這一部分的php程式碼其實不複雜，麻煩的是CSS的部分，因為我們的行動版型是依附在base底下，而每個版型的CSS也都長得不太一樣，必須配合DevTools來debug，找到相關的CSS名稱與格式，然後在行動版型的CSS中強制定義優先順序。所以，我們還得在原來版型的 functions.php 最底下，再增加載入我們單獨設計給行動裝置用的樣式表 mobile.css，以及後續會使用到的JavaScript程式檔 mobile.js。
add_action( 'wp_enqueue_scripts', function () {
if ( is_phone_device() ) {
wp_enqueue_style(
'mobile-style',
get_stylesheet_directory_uri() . '/mobile.css',
array(),
'1.0'
);
wp_enqueue_script(
'mobile-js',
get_stylesheet_directory_uri() . '/mobile.js',
array(),
'1.0',
true
);
}
}, 20 );註：wp_enqueue_script() 是 WordPress 提供的一個核心函數，用於安全、高效地將 JavaScript 文件排隊載入到網站前端，讓主題或外掛能引入自訂的 JS 檔案，確保只載入一次、避免衝突、並能控制載入位置（頁首或頁尾），是 WordPress 開發的標準做法，比直接在 header.php 引入更推薦。
設計開啟/關閉選單 menu (☰) – header-mobile.php
選單(☰)的程式碼放在 header-mobile.php 裡。這個選單的設計也是卡了很久，每次都是按了☰按鈕後，畫面只閃了一下，然後就沒動作了，試了好幾種方法，最後才發現，原來mobile.js裏頭同時存在兩個關閉邏輯程式碼，也就是選單有被打開，但是一打開後又馬上被關閉了，這也是我們這種對程式碼半生不熟的人容易遇到的問題，因為 ChatGPT 會一直讓你貼新的程式碼進去，到最後會搞不清楚到底貼了多少程式碼。個人建議，如果debug一直不成功，可以試著把現在的程式碼整個回貼給 ChatGPT 重新做確認。到了最後要収尾時，也可以整個貼給 ChatGPT 重新整理，也可以清理掉一些已經不需要的程式碼。
另外，在選單(menu)閃一下的問題解決後，點擊選單後卻只滑出一片空白。也是嚐試了好幾種方法，最後才發現，原來是行動裝置佈景主題的 WordPress menu assignment 還沒被初始化過，只需要到 WordPress 後台，重新設定一下 menu 的內容，再點擊選單就可以看到內容了。
下面剩下幾個mobile專屬的php程式碼，ChatGTP 基本上都是給一次程式碼就搞定，也沒有什麼碰到什麼大問題，就只要稍微調整CSS樣式，這裡就不再詳述內容。
- single-mobile.php
- footer-mobile.php
- comments-mobile.php
- tag-mobile.php
- category-mobile.php
延伸閱讀：
發佈留言