---
# System prepended metadata

title: '【本地端架設 ＷordPress 測試 : XAMPP Apache + MariaDB + PHP + Perl】'

---

# **【本地端架設 ＷordPress 測試 : XAMPP Apache + MariaDB + PHP + Perl】**

:::info
- Xampp 本地端伺服器環境
- WordPress.org 下載副本安裝
- Wordpress 基礎功能設置
- Hosting（主機）商選擇
- WordPress 網站託管到伺服器
- 設置免費 email
- 設置 SSL
- Sub Domain
- 更改登入入口
- 綁定子網域到雲端服務商
:::

<br/>


筆記越記越多，自覺應該來用一個網站來分類，考慮維護方便、SEO友善，便決定架 WordPress，先使用 Xampp，再部署到 host 的方式來架設

## Xampp 本地端伺服器環境



為什麼使用Xampp? 單純以前轉職班做專案嘗試過

WordPress 是基於PHP的語言，我們需要一個能跑的環境。XAMPP 是一個免費、開源的網頁伺服器套件，由 Apache Friends 團隊開發，主要用來建立本地端（localhost）的伺服器環境，讓開發者可以在自己電腦上模擬網站運行

[XAMPP Apache + MariaDB + PHP + Perl](https://www.apachefriends.org/index.html)
![截圖 2025-06-26 21.31.58](https://hackmd.io/_uploads/BkVyhpqNel.png)

這裡我使用 mac os 版本，載好後會跳出（點兩下）
![截圖 2025-06-26 21.35.44](https://hackmd.io/_uploads/HkhmT69Vxg.png)

要授權（點強制打開）
![截圖 2025-06-26 21.36.10](https://hackmd.io/_uploads/SJY4ppcVeg.png)
![截圖 2025-06-26 21.36.42](https://hackmd.io/_uploads/SkkUaT9Vge.png)

打開後
![截圖 2025-06-26 21.37.22](https://hackmd.io/_uploads/HklP6T9Eel.png)
其他資料庫也一併安裝
![截圖 2025-06-26 21.57.53](https://hackmd.io/_uploads/rJObf0qEgx.png)

安裝好後，應用程式出現如圖，點開.app檔
![截圖 2025-06-26 22.06.05](https://hackmd.io/_uploads/Hkw1E0cEle.png)
![截圖 2025-06-26 22.06.47](https://hackmd.io/_uploads/rkev4ERcVle.png)
工具點選start
![截圖 2025-06-26 22.07.38](https://hackmd.io/_uploads/SJaVNRqVgx.png)

這時！啟動 mysql 失敗了，因為我本機端已經裝過 mysql，預設的 port 3306 已經被佔據，點右邊 Configure 改為 3307 就可以了
![截圖 2025-06-26 22.13.39](https://hackmd.io/_uploads/ryvbLAq4ge.png)
![截圖 2025-06-26 22.14.07](https://hackmd.io/_uploads/SkNMICq4gg.png)

apache server 也指定一下，預設是 8080 ，因為我 8080 裝了其他東西，這裡設置為 8081
![截圖 2025-06-26 22.20.47](https://hackmd.io/_uploads/SkHUPC94gl.png)

現在到瀏覽器輸入 localhost:8081 就會出現
![截圖 2025-06-26 22.22.04](https://hackmd.io/_uploads/H1fowCc4eg.png)

<br/>

## [WordPress.org](https://wordpress.org/) 下載副本安裝

download
![截圖 2025-06-26 22.35.08](https://hackmd.io/_uploads/H1ao50q4xe.png)

下載好的檔案拖曳到 htdocs資料夾解壓縮（裡面先清空）
![截圖 2025-06-26 22.37.57](https://hackmd.io/_uploads/HyrLsC9Vgg.png)

回到 localhost:8081 就會看到
![截圖 2025-06-26 22.40.59](https://hackmd.io/_uploads/Sy2b205Vlg.png)

這時把wordpress資料夾裡面檔案都拖曳到htdocs資料夾，zip檔刪除，回到 localhost:8081 就會自動跳轉到
![截圖 2025-06-26 22.44.59](https://hackmd.io/_uploads/ByxW6C5Nlg.png)

htdocs 資料夾權限更改
![截圖 2025-06-26 23.12.11](https://hackmd.io/_uploads/H1UwQkj4gg.png)

wp-content,themes, plugins 也權限更改
![截圖 2025-06-26 23.13.51](https://hackmd.io/_uploads/SyETXkiVgl.png)
![截圖 2025-06-26 23.16.50](https://hackmd.io/_uploads/HJUuEJiNle.png)

現在到瀏覽器輸入 localhost:8081/phpmyadmin 就會出現
![截圖 2025-06-26 23.18.47](https://hackmd.io/_uploads/ByGbrJiEll.png)

滑到下方，點選新增使用者帳號
![截圖 2025-06-26 23.18.47](https://hackmd.io/_uploads/H1dOBksExl.png)
![截圖 2025-06-26 23.21.14](https://hackmd.io/_uploads/HJQjBkiVee.png)
![截圖 2025-06-26 23.21.57](https://hackmd.io/_uploads/r190rysNee.png)
![截圖 2025-06-26 23.22.53](https://hackmd.io/_uploads/ryuJ81oExg.png)

點選左邊new新增資料庫，取名為wordpress
![截圖 2025-06-26 23.26.31](https://hackmd.io/_uploads/HJmRIyoEeg.png)


回到 localhost:8081 點 Let's go -> Submit -> Run the installation
![截圖 2025-06-26 23.27.37](https://hackmd.io/_uploads/HytGw1iEgx.png)
![截圖 2025-06-26 23.27.47](https://hackmd.io/_uploads/S1u4wyjNxl.png)
![1750952043137](https://hackmd.io/_uploads/Hkx5OJiNle.jpg)
![截圖 2025-06-26 23.35.16](https://hackmd.io/_uploads/HySpdyo4xe.png)
 Log in 
 ![截圖 2025-06-26 23.35.48](https://hackmd.io/_uploads/rJwJY1i4ll.png)
![截圖 2025-06-26 23.37.21](https://hackmd.io/_uploads/Syj8FyiEle.png)
![截圖 2025-06-26 23.37.48](https://hackmd.io/_uploads/H1MwFkoVlx.png)

<br/>

## Wordpress 基礎功能設置

### 更改主題
Ｍac Os 要安裝主題，需要另外搭配編輯器更改php檔案

回到 htdocs，wp-config.php 用vscode打開，增加
```=
define( 'FS_METHOD', 'direct');
```
![截圖 2025-06-26 23.46.03](https://hackmd.io/_uploads/ByXdjyoEeg.png)
![截圖 2025-06-26 23.49.13](https://hackmd.io/_uploads/B1oM31iVxe.png)


<br/>

## Hosting（主機）商選擇

很多企業會把網站放上AWS、GCP之類的雲端，但考量到備份、不需要太多後端技術及成本，可以找主機商，市面上有很多可以選擇
![螢幕擷取畫面 2025-06-27 111201](https://hackmd.io/_uploads/H1GI2YjEge.png)


網上很多中文教學文是用 Bluehost，但職業病總想選CP高的，比較下來選了 Hostinger
PS. 選美版 .com 官網購買，有看到網友用中文版 .com.hk 遇到網站常掉線的災情

![host](https://hackmd.io/_uploads/HkZDaOoEeg.png)


網路上可以找到 10%off Coupon
![截圖 2025-06-29 14.34.08](https://hackmd.io/_uploads/Bk0OCLAVgx.png)

註冊後會有讓你輸入 domain（也就是url）的地方，第一年Ｈostinger免費，輸入你想要的，看是否有被人註冊過

我註冊了 www.datavoyageio.com
![截圖 2025-06-29 14.34.46](https://hackmd.io/_uploads/H1YaAIR4xx.png)

等大約5分鐘，到 domain 確定有 active
![截圖 2025-06-29 14.41.27](https://hackmd.io/_uploads/H1oVevCEgx.png)

網址輸入我們的 domain 
出現這個畫面就成功了
![截圖 2025-06-29 14.44.01](https://hackmd.io/_uploads/BykAlvANlx.png)

點到 domain，只有第一年是免費，之後要記得 renew 付費
![截圖 2025-06-29 15.00.51](https://hackmd.io/_uploads/B1b04DCVlg.png)

Hosting Plan -> Resources Usage 可以看用量
![截圖 2025-06-29 15.04.51](https://hackmd.io/_uploads/Syo6Hv04eg.png)

<br/>

## WordPress 網站託管到伺服器
分成兩步驟，託管網站、託管資料庫

第一步驟：託管網站

進到 Hostinger 的 Website -> Website list -> domain的Dashboard
![截圖 2025-06-29 15.17.11](https://hackmd.io/_uploads/Hk-0uvCVel.png)

File Manager -< Access files of 我的domain
![截圖 2025-06-29 15.18.26](https://hackmd.io/_uploads/HkgfFvA4xx.png)

會進到這個畫面
![截圖 2025-06-29 15.20.16](https://hackmd.io/_uploads/BJdHYPCVxl.png)


點 Public_html
![截圖 2025-06-29 15.21.11](https://hackmd.io/_uploads/HkFttD0Vgg.png)

打開後會看到就是我們網站的預設頁面
![截圖 2025-06-29 15.22.47](https://hackmd.io/_uploads/rJS19DAExl.png)

現在進到本地端的 htdocs 資料夾
![截圖 2025-06-29 15.27.09](https://hackmd.io/_uploads/BytJsDRVgg.png)

把檔案都傳到 public_html 資料夾
![截圖 2025-06-29 15.28.51](https://hackmd.io/_uploads/SJ8vov0Nel.png)

點上方移動，所有檔案移到 public_html 下，再刪除 htdocs 空資料夾
![截圖 2025-06-29 15.38.19](https://hackmd.io/_uploads/SJGpTP0Ege.png)

![截圖 2025-06-29 15.38.33](https://hackmd.io/_uploads/HJjaTvANxl.png)

	
第二步驟：託管資料庫
到後台 Database 創建

![1751183157319](https://hackmd.io/_uploads/ryRuyu0Elx.jpg)

db、user、剛輸入的密碼，都複製貼到 wp-config.php
![1751183260898](https://hackmd.io/_uploads/S1vRyO0Vee.jpg)

![截圖 2025-06-29 15.49.53](https://hackmd.io/_uploads/HkCKgdC4lg.png)

![1751183541665](https://hackmd.io/_uploads/B1NCx_0Vxx.jpg)

現在進到 phpMyAdmin -> 右下角 Enter phpMyAdmin
![截圖 2025-06-29 15.54.32](https://hackmd.io/_uploads/BkIP-OAVgx.png)

現在要做的就是把localhost的db import 進來
![截圖 2025-06-29 15.56.16](https://hackmd.io/_uploads/ByETZOAVgl.png)

	


現在先進到 http://localhost:8081/phpmyadmin
	
點選資料庫後 -> 點上方匯出 -> 匯出 sql 檔案
![截圖 2025-06-29 15.59.27](https://hackmd.io/_uploads/r16KzuAVgx.png)
	
![截圖 2025-06-29 16.00.36](https://hackmd.io/_uploads/SJmhG_RNee.png)

回到 Ｈostinger phpMyAdmin -> 右下角 Enter phpMyAdmin
	
import 剛剛下載的 sql 檔案
![截圖 2025-06-29 16.02.05](https://hackmd.io/_uploads/rJsMmOC4xg.png)

![截圖 2025-06-29 16.02.57](https://hackmd.io/_uploads/ByKBQOCNlg.png)

點 wp_options，把localhost都換成自己的domain
![截圖 2025-06-29 16.04.06](https://hackmd.io/_uploads/BJRgNdCEge.png)
![截圖 2025-06-29 16.05.07](https://hackmd.io/_uploads/HkQWEuCNxg.png)

現在輸入 我的domain/wp-admin 就可以順利進到後台了！
![截圖 2025-06-29 16.10.01](https://hackmd.io/_uploads/B161Sd0Eel.png)

網站頁面
![截圖 2025-06-29 17.14.27](https://hackmd.io/_uploads/HJQWEFA4ge.png)

<br/>
	
## 設置免費 email

跟 domain ㄧ樣，第一年網站 email 也是免費
![截圖 2025-06-29 17.49.48](https://hackmd.io/_uploads/HJANptAVge.png)

![截圖 2025-06-29 17.54.17](https://hackmd.io/_uploads/HylXspKCExx.png)

![截圖 2025-06-29 17.57.30](https://hackmd.io/_uploads/BJ5GCY04le.png)

點進下方會讓我們設置email帳戶，登入後就可以寄信了
![截圖 2025-06-29 17.59.38](https://hackmd.io/_uploads/rkj2RYANxe.png)
![截圖 2025-06-29 18.00.33](https://hackmd.io/_uploads/Syb0CYREll.png)

從 email -> Mailboxes -> Webmail 可以進到信箱

![截圖 2025-06-29 18.04.45](https://hackmd.io/_uploads/ry-1xc0Ngl.png)
![截圖 2025-06-29 18.04.18](https://hackmd.io/_uploads/SJd1gqR4le.png)
![截圖 2025-06-29 18.05.48](https://hackmd.io/_uploads/Bkn-lc0Nex.png)

設置不同使用者
email -> Mailboxes -> Create a mailbox
![截圖 2025-06-29 18.16.35](https://hackmd.io/_uploads/SyniM9R4lx.png)

<br/>

## 設置 SSL

![截圖 2025-06-29 18.30.58](https://hackmd.io/_uploads/B1GlI5RVgl.png)
![截圖 2025-06-29 18.35.42](https://hackmd.io/_uploads/Sy0WwcA4eg.png)


第一個view點進去，上方改成 301.htaccess
![截圖 2025-06-29 18.37.29](https://hackmd.io/_uploads/SkvtwcAElg.png)

More info 的按 x
![截圖 2025-06-29 18.39.22](https://hackmd.io/_uploads/H11e_9REeg.png)

<br/>

## Sub Domain

設置 Website -> Website List -> Dashboard -> Domains -> Subdomains

![截圖 2025-06-29 18.56.59](https://hackmd.io/_uploads/SJDN39C4xg.png)

![截圖 2025-06-29 19.00.55](https://hackmd.io/_uploads/BJaxpq0Vxg.png)

![截圖 2025-06-29 19.01.42](https://hackmd.io/_uploads/SyUQacAVxx.png)

確認一下 SLL 是否有自動出現
![截圖 2025-06-29 19.02.52](https://hackmd.io/_uploads/SknuacA4gl.png)

file manager 會自動出現 Subdomain的資料夾
![截圖 2025-06-29 19.04.50](https://hackmd.io/_uploads/Sk2xRcCEel.png)
![截圖 2025-06-29 19.04.46](https://hackmd.io/_uploads/S1m-0cR4xe.png)

這次我使用 Auto Installer
![截圖 2025-06-29 19.06.47](https://hackmd.io/_uploads/SkvUR9AVee.png)
![截圖 2025-06-29 19.09.19](https://hackmd.io/_uploads/ByFeyj0Nel.png)
[![截圖 2025-06-29 19.12.13](https://hackmd.io/_uploads/rJ_syiAVll.png)
]

輸入 subdomain/wp-admin

會跳到新的網站
![截圖 2025-06-29 19.14.52](https://hackmd.io/_uploads/Sy34xjRVle.png)
![截圖 2025-06-29 19.15.24](https://hackmd.io/_uploads/SkhIxsRNxe.png)

<br/>

## 更改登入入口

最後，為了更安全，不讓他人輸入/wp-admin，就可以進到我們的後台登入入口

可以裝個 Plugin
![截圖 2025-07-15 12.05.00](https://hackmd.io/_uploads/Sknd7ImLxx.png)

紅色輸入想要換掉wp-admin的文字
![1752552337590](https://hackmd.io/_uploads/BJYjQ8QLxg.jpg)

這時候再回到前端，/wp-admin 就會是404
![截圖 2025-07-15 12.08.02](https://hackmd.io/_uploads/HJJU4LmIgx.png)


<br/>

## 綁定子網域到雲端服務商

前面提到 Sub Domain

既然都買網域了，可以來整合一下之前的 side project

這裡用zeabur
到 domain networking，private 輸入想要的子網域，會出現下面這串（Type, Name, Value）
![1762358931752](https://hackmd.io/_uploads/rkvn8lYJ-g.jpg)

hostinger 從 Domains profolio -> domain name 點自己的 url
![截圖 2025-11-05 23.58.51](https://hackmd.io/_uploads/ByGSHgK1bl.png)

DNS/Nameservers，輸入從 zeabur 複製的 Type, Name, Value
![截圖 2025-11-06 00.04.49](https://hackmd.io/_uploads/By-TrxtkWl.png)

過5-10分鐘後到 [dns checker](https://dnschecker.org/) 輸入網址，看下面是否有出現 Value
![1762359118153](https://hackmd.io/_uploads/B1t9PetyWe.jpg)


zeabur 變成 PROVISIONED 就綁定成功了
![截圖 2025-11-06 00.13.33](https://hackmd.io/_uploads/SyapDlKJWl.png)
