電動麻將桌尺寸,WordPress教學：12個課程（安裝主題外掛＋搬家備份）

WordPress教學：12個課程（安裝主題外掛＋搬家備份）

作者張阿道2021-02-04更新

你搜尋了很多「WordPress教學」，但總得到些零碎資訊？

「如何安裝WordPress？有哪些主題和外掛？」你問。

對此，我在以下12個課程，示範如何架設WP網站。從核心設定到使用者管理、從網頁設計到WooCommerce購物車… 文末更有「搬家備份」教學。

跟隨以下流程，你也能從入門者變身進階用戶！

快速導航

1. WordPress.org vs WordPress.com2. 虛擬主機安裝WordPress3. 本機安裝WordPress4. 核心設定5. 使用者管理6. 新增文章 & 頁面7. WordPress Theme (主題)8. 修改版型9. 網頁設計教學10. WordPress Plugin (外掛)11. WooCommerce購物車12. WordPress搬家 / 備份還原1. WordPress.org vs WordPress.com

WP有三種（務必分清楚！）

WordPressWordPress.orgWordPress.com

WordPress 是一個開源、免費的網頁製作軟體 (CMS) 。在任一伺服器安裝WordPress = 架設網站

WordPress.org 是WordPress開源計劃的官網。你可以在 .org 下載WordPress軟體、版型、外掛，及閱讀官方文件、參與討論… 等。

WordPress.com 是一個SaaS架站平台 – 有免費及付費版。平台架站優缺點

本教學是前兩者！

2. 虛擬主機安裝WordPress

虛擬主機又稱「主機代管」、「網頁空間」，是存放網站檔案的雲端伺服器。網站上線就要靠它～

WordPress是主流架站軟體，因此虛擬主機都有「一鍵安裝WP」設計。以Hostinger為例：

電商網站選 WordPress + WooCommerce。注意：WooCommerce購物車、金流串接很複雜，新手可能不宜。若須架設網路商店，推薦聘請WP工程師。

Hostinger自動幫你建立MySQL資料庫（使用隨機的名稱、密碼）✅基本上不用管它，有需要再登入phpMyAdmin管理。

3. 本機安裝WordPress

本機 = 本地主機 (localhost)

在自己電腦安裝WordPress有兩大優點：

沒有網路延遲網站沒上線，可以自由開發（開發完再搬家至虛擬主機）

本機安裝 = 在PC / Mac架設伺服器。Windows用戶可用WAMP、Bitnami或XAMPP軟體。macOS用戶可用MAMP。它們的免費版已經夠用。

MAMP教學

一、下載MAMP

macOS、Windows都能用 👍

二、安裝完成後，打開它。

三、點擊 MAMP > Preferences

Mac螢幕左上角

四、Ports > Set Web & MySQL ports to 80 & 3306 > OK

五、Web Server > Select > OK

Select = 選擇要放置網站檔案的伺服器資料夾macOS 10.15 (含Catalina) 以上注意：伺服器不要放在系統預設的資料夾（如桌面、文件、下載項目…）內！自行在 使用者 > 你登入的帳戶 下新增資料夾！例如選擇「dev」做為放置WordPress檔案的資料夾（可隨意命名，但不要用中文、空格）

六、點擊「Start Servers」，你的本機伺服器就架好了。✅

建立資料庫

WordPress用MySQL資料庫儲存文字內容、使用者設定、登入帳號密碼… （而非網站架構如前台版型、後台介面…）

所以要創建至少一個資料庫。步驟如下：

一、點擊MAMP的「Open WebStart page」

二、TOOLS > PHPMYADMIN

三、點擊「Databases」 > 輸入名稱 (限英文、數字、底線) > Create

… 就建立好一個Database。✅

安裝WordPress

以下是傳統 / 手動安裝流程，不同於虛擬主機的一鍵安裝。

一、下載WordPress軟體

二、把解壓縮的檔案，拖曳進之前選擇的伺服器資料夾 ↓

複製貼上、或拖曳「wordpress」資料夾內的檔案！

三、在瀏覽器輸入 localhost ，並點擊「開始安裝吧！」

MAMP預設的「資料庫使用者名稱」、「資料庫密碼」都是 root輸入在phpMyAdmin創建的「資料庫名稱」。root、localhost照填。「資料表前置詞」改成其他英文、數字，就是不要wp

WordPress是市佔率最高的架站軟體，常遭駭客大規模 SQL Injection 攻擊。若把「資料表前置詞」改成 wp 之外的其他英數，能避免這類攻擊。

點擊「執行安裝程式」

四、輸入網站資訊 ↓

使用者名稱、密碼、電子郵件地址務必牢記！你將用它們登入WordPress後台

接著看到「大功告成」頁面 = 安裝完成。✅

登入WP後台

你的網域後面接 /wp-admin ，就是後台登入網址。以本站為例：

daotw.com/wp-admin

安裝在MAMP (本機) 的WP登錄網址 👇

localhost/wp-admin

若已經登入WordPress， /wp-admin 會直接進入後台！

瀏覽WP前台

在瀏覽器輸入網域。以本站為例：

daotw.com

本機網域 👇

localhost

4. 核心設定

以下是WordPress核心設定，不受主題 (Theme) 、外掛影響。

一般記得點擊「儲存設定」

修改 WordPress 位址 (網址) 、網站位址 (網址) 會讓網站無法使用！除非你是WP專家，否則不要碰。

閱讀

網站開發過程中，你會常調整「閱讀設定」👇

網站首頁顯示內容：

最新文章 = 部落格呈現（依時間排序的文章列表）靜態頁面 = 指定某個已存在頁面

搜尋引擎可見度：

不要勾選「阻擋搜尋引擎索引這個網站」——除非你正在線上開發。討論

建議取消勾選「嘗試通知網站內容中所連結的任何網站」：

我推薦用email通知被連結的網站。模板如下…

Hi [對方稱呼] ，

你的 [網頁標題] 這篇寫得很讚！

我在這個網頁已連結給你：[網址]（連結在第7項）

就讓你知道一下。🙂👍

[你的稱呼]

↑ 有助 Off-page SEO 增加反向連結

建議取消勾選「留言者必須曾發佈留言且留言已通過審核」：

若勾選，首次留言的訪客不會看到自己剛留的言，導致他可能重試 / 重複留言

別忘了儲存。

永久連結

短網址好記、好打。「文章名稱」網址結構最短、最合理 👇

「永久連結設定」只是預設URL結構。你可以在文章、頁面更改！

5. 使用者管理

以下是使用者 / 會員管理 👇

新增使用者

新增使用者時，務必慎選角色：

各角色權限如下～

訂閱者：權限最低，只能管理自己的帳號。購物網站會員帳戶，通常就是這種。

投稿者：可以編輯、刪除自己未發佈的文章。不能上傳媒體（含圖片）、不能直接發佈文章（要先送交審閱）。投稿者是尷尬 / 沒啥用的角色…

作者：能編輯、發佈文章＆上傳多媒體。能刪除自己已發佈的文章。

編輯：擁有作者的權限，外加

編輯、刪除所有人的文章編輯、刪除所有人的頁面審核留言管理文章分類

網站管理員：能控制整個網站！

假設你有一個內容團隊，成員可擔任作者、內容長 (CCO) 可擔任編輯。

個人資料

每位使用者都有「個人資料」，基本設定如下

不同角色，有不同的個人資料欄位（以網站管理員為例）

向下滑，會看到「使用者可以在 Gravatar 變更個人資料圖片」

WordPress用戶必註冊 ↓

雖然Gravatar還沒完全中文化，但 total 只有兩個步驟：1. 創建帳戶， 2. 上傳正方形圖片

完成後，你就有全球認可的大頭貼 👇

… 讓你在其他網站留言（使用登入Gravatar的email）也能顯示頭像，因為主流留言系統（如Disqus）都支援。

文章 vs. 頁面文章頁面前台顯示作者、發佈日期、留言數、分類、標籤前台不顯示作者、發佈日期、留言數預設開放留言預設不開放留言範例：所謂的部落格文章（連結通常不置於選單）範例：關於、聯絡方式、隱私權政策… 等頁面（連結置於選單 & 頁尾）

網頁內容行銷 (Content marketing) 主要是透過文章。文案課程 →

6. 新增文章 & 頁面

點擊「新增文章」，會進入WordPress好用的區塊編輯器 (Block Editor) :

記得設定「精選圖片」。它會顯示於Blog頁面 (文章列表) 、社群媒體分享… 等

分類：建議少用標籤：建議不用

過多標籤 = 過多URL = 增加SEO負擔

寫文章時，要善用不同類型區塊 👇

點擊每個區塊，左邊會出現拖曳把手 👇

… 右邊資訊欄也會隨選取區塊而變。

創作利器：可重複使用區塊

將編輯好的常用區塊「新增至可重複使用區塊」👇

每個區塊這裡，都有重要選項！

就可以全站重複使用 👇

（使用時，通常先轉換成一般區塊）

點擊「儲存草稿」，就能編輯永久連結：

「預覽」全文OK後，就「發佈」吧！

新增頁面

… 和新增文章差不多（右邊資訊欄稍有差異）。

7. WordPress Theme (主題)

佈景主題 (Theme) 又稱”版型”。它控制前台外觀如

背景、文字顏色網站寬度頁首 (Header) 、頁尾 (Footer) 設計文章、頁面的「版面配置」部落格頁面的「內容類型」小工具位置導覽選單位置

WordPress有上千個免費＆付費主題——如購物網站、作品集、餐廳、咖啡店、攝影、企業形象、雜誌、個人Blog… 等（都是RWD響應式網頁設計）。

你可以安裝多個主題，但只能啟用其中一個。切換主題不改變文章、頁面內容！（可能須重新設定導覽選單、小工具位置）

安裝免費 Theme

一、佈景主題 > 安裝佈景主題（資料來自 wordpress.org/themes/ ）

二、篩選或搜尋主題 👇

三、可先預覽再安裝、或直接安裝。

四、安裝完成後，點擊「啟用」即可 ✅

安裝付費 Theme

ThemeForest / Envato Market 是知名的WP付費主題、外掛 (Plugin) 和設計素材市集：

這一頁能看到最暢銷的Themes（每週更新）

購買主題＆外掛後，可在帳戶的 Downloads 下載 ↓

購買的主題＆外掛，通常是免費無限更新 + 選擇性的續約Support (技術支援客服)

點擊 Download 按鈕時，要注意以下 ↓

All files & documentation: 總文件包（含可安裝於WordPress的 .zip 壓縮檔）Installable WordPress file only: 可直接安裝於WordPress的 .zip 壓縮檔

在這上傳 Theme 的可安裝ZIP檔這裡上傳 Plugin 的可安裝ZIP檔

以上是安裝第三方 (不是來自 WordPress.org ) 主題＆外掛流程。

無論在哪裡買Theme或Plugin，要確認兩件事：

文件 (Documentation) 👈🏽類似使用手冊技術支援客服 (Support)

建議聯絡 Support 前，先詳閱 Documentation 。

主題推薦

來自 WordPress.org 的Theme，很多是 Freemium (免費增值) = 使用進階功能須付費升級。

我推薦兩個Freemium主題： Astra 和 GeneratePress 。安裝並啟用後，減肥美眉的部落格頁面比較如下

Astra vs. GeneratePress

在部落格（依時間排序的文章列表）能看到每篇文章的發佈日期、作者、留言數，以及精選圖片。

綠色箭頭處的 Read More / 閱讀更多 連結，來自編輯器的「閱讀全文」區塊…

點擊「Read More / 閱讀更多」進入文章，能看到完整內容 👇

我在 外觀 > 自訂 上傳了Logo、隱藏了網站標題＆說明、調整了選單色彩，所以頁首有變。猜猜這是Astra還是GeneratePress主題？😉

再次提醒：換主題不改變文章、頁面內容！（可能要重設小工具、導覽選單位置）

8. 修改版型

在後台點擊 外觀 > 自訂

… 就能修改佈景主題選項。👇

不同主題，會有不同選項（以GeneratePress為例）

例如「網站識別」：

這個Logo隨便弄的😝！ 如何設計LOGO

和「選單」

選單 = 網站導航菜單

…「色彩」

免費版的色彩選項不多

以及「小工具」👇

小工具 (Widget) = 在網頁插入客製化內容。「可插入位置」視主題而定！

外觀 > 自訂 是前台的即時預覽模式。按下「發佈」後，新設定才會生效。（建議使用桌機、或大螢幕筆電）

9. 網頁設計教學

若熟悉 HTML 和 CSS ，我推薦用WordPress區塊編輯器設計內容。

編輯HTML程式碼 = 進一步客製化善用群組區塊、「HTML錨點」和「附加的CSS類別」。例如製作目錄 ↑編輯目錄的CSS（檔案路徑： wp-content > themes > [主題資料夾] > style.css ）網頁設計軟體推薦

若不熟悉HTML & CSS，你可以用內容設計外掛如 elementor、Thrive Architect… 這些WYSIWYG編輯器能快速上手——即使不懂程式語言。

本站曾使用 Thrive Architect

內容設計外掛優點、缺點：

WYSIWYG編輯器，不用寫程式可能會綁定內容，不方便遷移產生複雜的程式碼 = 降低網頁加載速度、不便維護

以上是WP網頁內容 (entry-content) 設計——這比較簡單，可以DIY。

若要修改頁首、頁尾、側邊欄小工具（要寫PHP、JavaScript等高難度語言）… 推薦外包網頁設計公司。

建議先計畫行銷4P、寫文案… 再設計網站，因為內容決定架構＆功能。

10. WordPress Plugin (外掛)

如同Theme，WordPress有上千個免費和付費Plugins（中文叫外掛 / 插件）。

Plugin目的是增加WordPress功能，例如：

搜尋引擎最佳化 🔥電子商務（購物車系統、金流串接…）社群分享按鈕垃圾留言過濾系統連絡表單安裝免費 Plugin

一、在「安裝外掛」篩選或搜尋外掛（資料來自 wordpress.org/plugins/ ）

二、立即安裝 > 啟用

以連絡表單外掛 Contact Form 7 為例

三、啟用後，在「已安裝的外掛」或左側欄設定它 👇

啟用後的外掛，可能會顯示於左側欄、或在「工具」下、或在「設定」下… 位置不一定

每個外掛的使用方式不一樣。Google它的教學或文件 (Documentation) 吧！

安裝付費 Plugin

購買外掛的方式有3…

一、瀏覽 CodeCanyon / Envato Market 的暢銷Plugins頁 ↓

購買後的安裝流程這裡已介紹。

二、來自 WordPress.org 的免費Plugin，很多其實是 Freemium (免費增值) = 使用進階功能要付費升級。

以網站備份外掛 Duplicator 為例，點擊「獲取專業版」能看到免費 vs. 付費功能比較：

向下滑會看到購買按鈕（連結至Duplicator官網）

三、英文Google外掛類別。例如會員外掛可搜尋「membership plugin wordpress」

必裝外掛推薦

外掛安裝愈少愈好。以下是外掛的缺點：

一旦開發者停止維護，你的網站總有一天會「更新後故障」Plugin太多 = 拖慢加載速度很多Plugin來路不明，有安全隱患

建議在WordPress.org瀏覽熱門外掛，檢視最後更新時間、啟用安裝數、評分 (使用者評論) 。以 Yoast SEO 為例…

若點擊「進階檢視」，會看到啟用安裝成長率 👇

世界上沒有適合每個人 / 公司的必備外掛清單，因為網站的目的不同，功能需求就會不同。

若某功能真是必備，可能早就整合進WordPress核心。

以下是主要外掛類型 & 推薦。請檢視你的情況，決定要不要安裝…

SEO優化：推薦Yoast SEO 🔥表單：推薦Contact Form 7、WPForms301轉址：英文URL建議用主機商提供的轉址工具。中文URL可用Redirection、301 Redirects（一定要測試！）社群分享按鈕：推薦Sassy Social Share，或Google「social share plugin wordpress」RWD內容設計 / 排版：若熟悉HTML、CSS，我推薦WP自帶的區塊編輯器。網頁設計教學作品集：Essential Grid Gallery、Imagely文章列表：Content Views多媒體大型選單：Max Mega Menu、UberMenu

純付費或 Freemium 外掛比較理想！完全免費 = 開發者隨時可能停止更新。

11. WooCommerce購物車

架設購物網站的主流方式有

使用電商架站平台 – 如SHOPLINE、Cyberbiz…WordPress + WooCommerce (購物車系統 / 電子商務外掛)

以下介紹第2種。

電商外掛已經複雜到自成體系。以WooCommerce為例，它有專用的Themes：

ThemeForest / Envato Market 的暢銷WooCommerce主題（每週更新）

StoreFront 是Woo的官方主題 👇

若在「安裝外掛」搜尋woocommerce，會看到超過7,000個相關外掛 ↓

Woo的擴充外掛超過7千個！

WooCommerce有中文化，但官方教學文件是英文。Woo有完整的Documentation – 例如

Shortcode 短代碼Payment gateway 金流串接Memberships 會員註冊 & 分級管理系統Social Login 社群網站帳號登入Bookings 預訂Coupon 優惠券

… 幾乎無所不包。

物流、金流的本地串接案例：WooCommerce綠界超商取貨付款、API/SDK金流串接教學與下載

第三方支付、行動支付、電子支付比較

WooCommerce商品頁面可自己修改，但要設計程式的快速結帳、物流、金流系統… 應該請WordPress工程師開發。

在客製化WooCommerce，你可以聘請官網推薦的設計公司、或 Codeable 平台的自由職業者 (Freelancer)12. WordPress搬家 / 備份還原

以下WP搬家教學適用於

轉移虛擬主機從本機 (Windows / macOS) 移植到虛擬主機，反之亦然備份＆還原網站手動搬家流程

一、在虛擬主機建立 FTP Account（若你的主機商不是Hostinger，或許可用cPanel創建FTP帳戶）

二、下載＆安裝FTP軟體 – 例如FileZilla、Transmit、Cyberduck。

三、打開軟體 > 新增連線 > 貼上FTP帳戶資訊 (Hostname, Username, Password & Port) > 連線

綠色箭頭處：視你的虛擬主機 / VPS而定。若找不到資訊，請詢問供應商客服

四、全選舊家 wp-content 內的檔案 ↓

… 然後拖曳進新家的 wp-content 資料夾（假設新家已安裝WP）↓

拖曳進 wp-content 資料夾裡面喔！

FTP軟體會跳出對話框，選擇 Overwrite 後，就會開始傳輸。

若新家還沒安裝WP（網站資料夾是空的），你可以拖曳舊家的所有檔案至新家！這個方法適合全站備份＆還原，但不適合用於虛擬主機。

全選舊家所有檔案 > 拖曳到新家（假設新家資料夾是空的）

五、進入本機伺服器的phpMyAdmin。步驟回顧

六、選擇你建立的Database (資料庫) > Export > Custom > Save output to a file

向下滑會看到 Object creation options 和 Data creation options 。如何設定要詢問主機商（可能已經有教學… Google一下吧！）

設定好後，點擊「Go」，就匯出了 .sql 檔 ✅

七、用寫程式專用的文字編輯器 (我推薦Atom) 打開 .sql 檔 > 開啟 Find in Buffer

用新家網域取代舊家網域 (Replace All) ↓

移除前面的 http 或 https ，再 Replace All 一次 👇

有些主題＆外掛會縮寫URL。為保險起見，移除前面的 http 或 https，再 Replace All 一次

八、在新家的phpMyAdmin，清空即將要使用的資料庫 ↓

Drop = 永久刪除

根據你的情況，可選擇不刪除留言：

_comments 、 _commentmeta 資料表屬於WP留言系統。若你採用 Facebook 或 Disqus 留言系統，就與這兩個Table無關

若新家還沒有資料庫，就建立一個。

九、匯入 .sql 檔，就手動搬家成功！👍

在新家的 phpMyAdmin 匯入 .sql

十、在瀏覽器輸入新家網域。若顯示錯誤，檢查新家 wp-config.php 裡的 $table_prefix (資料表前置詞) 是否和安裝時輸入的一樣？

wp-config.php 檔案裡的資料表前置詞

十一、確保 $table_prefix 無誤後，登入新站後台，重新確認這些設定＆資料 ↓

自訂、小工具、Yoast SEO… 的設定 & 資料可能在搬家過程「跑掉」，造成前台顯示不正確。要檢查！搬家外掛推薦

能「一鍵打包WordPress」的外掛有…

All-in-One WP MigrationDuplicatorUpdraftPlus WordPress Backup Plugin

免費版：使用OK～付費版：可能含自動備份網站功能

這類外掛因為會複製、弄亂檔案，可能會被虛擬主機禁用，所以要學手動搬家！

輪到你了

以上是WordPress教學：12個課程…

你學會了在虛擬主機、本機安裝WP、管理使用者、購買主題＆外掛、WooCommerce入門、修改版型… 及備份還原WordPress（搬家）。

WP有龐大社群，不擔心找不到幫手～

開始自架網站吧！我歡迎你在下方留言區，分享你的心得。👍

139個留言