首页 > WordPress教學:12個課程(安裝主題外掛+搬家備份)

電動麻將桌尺寸,WordPress教學:12個課程(安裝主題外掛+搬家備份)

互联网 2021-04-11 07:07:52
WordPress教學:12個課程(安裝主題外掛+搬家備份)

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

WordPress教學

你搜尋了很多「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軟體 - 免費CMS

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

WordPress.org 官網

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

WordPress.com 架站平台

本教學是前兩者!

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

下載MAMPmacOS、Windows都能用 👍

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

三、點擊 MAMP > Preferences

MAMPPreferencesMac螢幕左上角

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

PortsSet Web & MySQL ports to 80 & 3306

五、Web Server > Select > OK

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

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

MAMP本機伺服器 - Start Servers建立資料庫

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

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

一、點擊MAMP的「Open WebStart page」

Open WebStart page

二、TOOLS > PHPMYADMIN

TOOLSPHPMYADMIN

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

點擊「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 變更個人資料圖片」

使用者可以在 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 or Installable WordPress file only

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. GeneratePressAstra 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 為例…

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的官方主題 👇

Woo官方主題:StoreFront

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

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

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

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

… 幾乎無所不包。

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

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

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

客製化WooCommerce在客製化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-content 資料夾(假設新家已安裝WP)↓

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

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

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

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

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

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

DatabaseExportCustomSave output to a file

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

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

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

Atom - Find in Buffer

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

網域 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 (資料表前置詞) 是否和安裝時輸入的一樣?

資料表前置詞 (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個留言

  
免责声明:非本网注明原创的信息,皆为程序自动获取自互联网,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给站长发送邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),站长将在收到邮件24小时内删除。