WordPress教學 :24個後台課程(含安裝+主題推薦)

9
4506
wordpress教學
wordpress教學

還在找 WordPress教學 ,後台課程教學 .. 想要一次學會?下載安裝 WordPress 佈景主題+外掛,卻不知道哪個好用?

WordPress 主機推薦,該選擇哪一家才好,你也困惑著。或是,想要購物網站架設,也使用 WordPress 購物車?

我精心準備的 24 篇 WordPress教學 課程,讓你完成 WordPress 網站架設+前後台教學+主題外掛推薦等 ..   icon-arrow-down  icon-arrow-down

在文章尾部,更附上完整網站架設教學,協助你一次完成 WordPress 網站架設 🙂 🙂

很精彩吧!事不宜遲,就快點開始你的 WordPress 教學吧:)


subject-1

1. 網站架設教學

網站架設教學
網站架設教學

首先需要了解,網站架設的 3 個重點,這是網站組成的要素,我們先依序完成:)

架設網站三要素
1. 購買網址
(申請門牌)
2. 申請主機
(租一塊地)
3. 網頁設計
(搭建房子)

詳細全文看這,帶你網址申請+虛擬主機申請+系統操作,快速完成  icon-arrow-down  icon-arrow-down 

網站架設 :18 篇不藏私教學(網頁製作+費用推薦)

在這裡,我也和大夥兒分享,一些網友朋友們常問的問題,如下:

如何挑選好網址?

網址如何挑選的好,你可能有些疑問,但其實 .. 把握這些原則,基本上就是好網址!

1. 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。
例:蘋果 – https://www.apple.com/tw/

2. 去除www:目前大部分新網址都不太會在前面加上www,這是比較舊式的用法。

3. .com優先:.com是大多數人的直覺印象,主要方便好記,增加搜尋率。

4. 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。

有哪家虛擬主機商,對 WordPress 有良好的支援?

SiteGround:WordPress 虛擬主機推薦
SiteGround:WordPress 虛擬主機推薦

SiteGround 除了是間老牌+穩定的公司,也是 WordPress.org(官方)推薦的虛擬主機,除了有速度超快的硬體設備,在軟體服務上,介面使用也超順手!

這邊列出 SiteGround 幾個特色,不管是用哪種費用方案,都擁有下面項目  icon-arrow-down  icon-arrow-down

  • 虛擬主機速度快:所有的 SG 主機,都對速度進行高度優化,他們配備了超快速硬碟 SSD ,確保你網站速度,跟飛的一樣 😎 😎
  • 優質客戶服務:SG 提供超棒的客戶支持服務,24/7 的電話服務,也支持即時聊天,協助解決問題。
  • 免費的 SSL 和 CDN:SSL(安全加密)的重要性,相信不用再多說,連 CDN(快取+分散風險) 也提供免費服務 .. 實在狂 ..
  • 多個服務器位置:SG 在全球有多個數據中心,亞洲地區有新加坡據點,連線起來就是快!
  • WordPress 支持:WP 官方認證的主機,絕對不是蓋的,如:速度、SEO等 .. 都有大幅度的提升,也提供多種實用軟體,方便網站管理。
  • Site Tools 介面:SG 推出了新的後台介面,取代原來舊舊的 Cpanel 畫面,同時也增加了新功能。
  • 還有其他優點 :)

除了這些優點,SiteGround 的使用者,用戶體驗也相當良好,在不同社團、社群,都給予極正面的評價 😀 😀

SiteGround 虛擬主機評價
SiteGround 虛擬主機評價

網站速度的快慢,會影響網站排名嗎?

其實,早在 2010 年時,Google 就把網站速度,列為 搜尋排行的因素之一,若網站速度慢,不但使用者體驗不好,你的轉化率(轉單率) .. 也會往下掉 🙄 🙄

網站速度:Google 排名因素之一
網站速度:Google 排名因素之一

造成 WordPress 網站速度變慢,不外乎 3 種狀況:

  • 虛擬主機速度慢
  • 佈景主題效能不好
  • WordPress 外掛裝太多,或是爛外掛

若是 WordPress 佈景主題+外掛影響效能,移除就好,滿 EASY,也是最多人使用的方式!

但 .. WordPress 虛擬主機對網頁的影響,才是關鍵殺手(也是最多人忽略的)!

所以後來,才決定使用多人推薦的 SiteGround ,開啟我的部落格之旅  😛 😛

SiteGround 良好的虛擬主機效能
使用主機測試網站的數據報表,SiteGround 超快的虛擬主機效能:)

小提醒:虛擬主機的好壞,可讓網站讀取速度,差到 3 ~ 5秒以上,選擇不可不慎。

這章節,如果有照著文章走,應該也順利申請好網址+WordPress 虛擬主機+簡單的網站設計了吧 😀 😀

若還沒完成,請先看下面文章「 快速架設網站 」,完成 WordPress 網頁設計,就可以開始教學課程啦!

詳細全文看這,帶你網址申請+虛擬主機申請+系統操作,快速完成  icon-arrow-down  icon-arrow-down 

網站架設 :18 篇不藏私教學(網頁製作+費用推薦)


subject-2

2. 一般設定

WordPress 後台:一般設定
WordPress 後台:一般設定

WordPress 網站架設完成後,我們直接登入後台,開始我們的教學 🙂 🙂

兩個重要的路徑位置(要記得唷):

  • wordpress 前台: 你的網址.com
  • wordpress 後台: 你的網址.com/wp-admin

首先,我們先到 設定 > 一般 ,更改「 網站標題、網站說明、網站語言 」。

預設 WordPress 語言是英文,先把它調成「 繁體中文 」,方便我們後續操作!

更換標題+語言切換
更換標題+語言切換

設定完成後,點擊頁面下方的「 儲存設定 」就順利更改,網站標題+描述+語言調整囉:)

額外小教學

WordPress 有關文章+頁面標題,在 Google 上呈現的方式,如下:

WordPress教學 網站,你不能錯過的課程(文章標題) – 小犬程式(網站標題)

建議「 網站標題 」字數不要太長,不然會影響到未來文章標題,可取名的長度。

因為太長的字,在 Google 搜尋結果上,都會以省略號符號表示唷  😎 😎


subject-3

3. 佈景主題安裝

WordPress 佈景主題安裝
WordPress 佈景主題安裝

WordPress 有成千上萬的佈景主題,可以供你挑選,有簡單免費版 or 多功能付費版,都應有盡有:)

選擇佈景主題,有幾件事情,可能需要多加留意,才能選到好的主題,方便未來操作:

  • 多人使用+評價推薦良好的。
  • 後台好操作+開放性高的主題。
  • 效能好的主題。
  • 持續維護更新版本的。

這邊先使用 WordPress 官方的免費佈景主題,方便教學。

首先前往 外觀 > 佈景主題,這頁會列出目前已安裝的佈景主題,然後點選 安裝佈景主題,前往主題安裝頁面。

WordPress 佈景主題教學
WordPress 已安裝主題清單

然後使用搜尋框,搜尋 Twenty Fifteen 主題,並點擊 啟用,如下圖:

當然 .. 在這頁,你會看到超多種佈景主題,這些未來都可更換,先照著教學前進吧 😀 😀

WordPress 主題安裝 & 上傳自有主題
WordPress 主題安裝 & 上傳自有主題
上傳佈景主題 」按鈕(上圖橘色區塊),可用來上傳第三方主題。

等待主題安裝+啟用完成,再回到前台看一下,會發現 WordPress教學 的部落格主題,已經更換完成啦 😛 😛

WordPress 部落格主題
WordPress 簡單的部落格主題

subject-4

4. 文章網址設定

文章網址設定

WordPress 預設的文章網址,前面會帶有時間+日期等 .. 字元,但除了增加網址識別難度外,也不利於 SEO 優化。

所以呢,在開始新增文章前,我們先來調整一下預設的「 永久連結設定 」,讓它更人性化一點。

前往 設定 > 永久連結,選擇 文章名稱 的網址類型,然後 儲存設定

文章網址設定
文章網址設定

這樣一來,之後文章的命名就更簡單扼要了,舉個栗子:

網站架設教學https://frankknow.com/website-build-teach/,使用主網址+文章標題呈現,是不是簡單明瞭:)

subject-5

5. 文章管理

WordPress 新增文章
WordPress 新增文章

WordPress 的文章管理,相比其他 CMS 系統,是比較簡單且容易上手:)

這章節,我會帶大夥兒新增+發佈一篇 WordPress教學 文章範例,如果順利完成了,也代表你學得更多了!

首先前往 全部文章 > 新增文章,開始我們的文章編輯。

wordpress 文章列表
wordpress 文章列表

小提醒:所有新增的文章,都會在這裡出現唷,也可以批次操作:)

接下來,我們下一個標題,和隨意寫個內容,最後點擊 發佈,完成這篇文章。

WordPress 新增文章
WordPress 新增文章

然後前往網站前台,就會看到第一篇 WordPress教學 文章,已經出現啦 😛 😛

WordPress 文章發佈成功!
WordPress 文章發佈成功!

我們把文章用的更完整一些,一樣回到文章編輯區,我們來調整 網址連結、文章分類、精選圖片、內容摘要、留言等 ..

網址連結+文章分類:調整
網址連結+文章分類:調整
  • 網址連結:文章網址連結修改,建議英文為主。
  • 文章分類:尚無其他分類,若之後有新分類,這邊就會出現。

若都調整完成,可以點擊 更新 ,文章就會順利更新完畢囉!

精選圖片+文章摘要+留言開放:調整
精選圖片+文章摘要+留言開放:調整
  • 精選圖片:文章封面,可以上傳好看的圖 😛
  • 內容摘要:尚無其他分類,若之後有新分類,這邊就會出現。
  • 留言開放:這篇文章是否開放留言。

最後,我們回到前台看一下,有沒有變化?恩 .. 是不是看起來美多了呢 😆 😆

WordPress 文章更新完成!
WordPress 文章更新完成!

學會如何發表一篇文章後,恭喜已經踏出了重要的一步了!

下一章節,會帶大夥兒學習使用 WordPress 的區塊編輯器,讓你編輯文章的功力,可以更上一層樓 😛 😛


subject-6

6. 區塊編輯器

區塊編輯器教學
區塊編輯器教學

WordPress 官方在 5.0 發佈時,就把區塊編輯器的概念,正式引用進來,其中最有名的是 Gutenberg 古騰堡,來看看如何運作吧:)

新增圖片

我們試著在上一篇教學的文章中,加入張圖片美化一下,首先點擊 左上方加號 > 圖片

小分享:若找不到區塊,可以善用「 搜尋區塊(搜尋框)」,方便找尋唷:)

WordPress 新增圖片
WordPress 新增圖片

再來點擊 上傳,上傳你的圖片(也可以直接用拖拉方式),接著你就會看到圖片出現了:)

小分享:已經上傳過的圖片,可以直接到「 媒體庫 」選擇,就不用重複上傳。

WordPress 新增圖片
WordPress 新增圖片

再來我們可以調整一下圖片的細節,讓它變得更完整,如下圖:

WordPress 新增圖片
WordPress 新增圖片

圖片上傳,功能區塊介紹

  • 功能列表:有置中對齊、加上圖片連結、更多功能等 ..
  • 圖片描述:增加描述文字、粗體、加文字連結。
  • SEO 優化:增加圖片替代文字。
  • 尺寸調整:自訂圖片尺寸大小。

新增列表

依樣畫葫蘆,這次我們新增一個清單列表。

WordPress 新增清單
WordPress 新增清單

會看到一個簡單的清單列表出現囉 😛 😛

WordPress 新增清單+移動區塊
WordPress 新增清單+移動區塊
清單列表功能:圓點列表、數字列表、字體加粗、文字連結等 .. (上圖綠色框)

移動區塊

若是想把區塊上下移動,更換位置,要如何操作呢?

只要在區塊左邊的工具列,點選上下箭頭,或是中間點點,直接上下拖拉,都可以移動區塊唷 😉 😉

區塊上下移動
區塊上下移動

看一下成果,會發現更換位置成功,是不是很 EASY 呢 :)

多種區塊功能,一次展示

WordPress 的區塊功能超級多,有些因為版面限制,還沒擷取完。

超多區塊功能!!
超多區塊功能!!

若是有固定區塊,想要重複使用(不想每次都設計一次),也可以把它做成 可重複使用區塊,並幫他取個名字 ,如下圖:

新增可重複使用區塊
新增可重複使用區塊

像我把剛剛設計的清單列表,取名「 自訂清單列表 」,之後在 可重複使用 的選項裡,就會出現讓我們未來重複使用啦!

使用自訂區塊
使用自訂區塊

閱讀全文設定

有些 WordPress 佈景主題,在文章顯示方式上,對過長的文章並不會自動省略,會導致畫面過長,並不美觀,這時就需要 閱讀全文 這個功能。

來示範一下要如何新增,如下:

在區塊後方,加入新區塊
在區塊後方,加入新區塊
加入閱讀全文功能
加入閱讀全文功能

加入完成後,我們回到 前台首頁 看一下,文章是不是更簡單扼要了呢 😛 😛

WordPress 閱讀更多 ..
WordPress 閱讀更多 ..

學到這裡,有沒有發現區塊編輯器其實很有趣呢!

它比過去傳統編輯器,能做到的事情更多,整體功能元件也美化的更漂亮了 😎 😎

接下來教大夥兒,如何在 WordPress教學 中「 新增分類 」,其實很容易學習唷!


subject-7

7. 分類+選單管理

WordPress 分類+選單管理
WordPress 分類+選單管理

在前幾章教學範例,有教大夥兒如何新增文章。

在這章,我們來學習如何「 新增分類+選單,把文章放置指定分類中,並讓他在選單中顯示 」!

首先前往 文章 > 分類 ,依序輸入名稱、代碼(分類網址名稱)、內容描述,最後點擊 新增分類

WordPress 新增分類
WordPress 新增分類

接著,回到之前新增的文章中,會發現右區塊的分類選項,多了一個 文章內容 選項。

把它打勾(確認放置指定分類下),然後更新文章。

剛新增的分類,出現了
剛新增的分類,出現了

再來,我們希望前台選單,能找到剛新增的分類,所以前往 外觀 > 選單,進行選單調整,如下:

把分類加入至選單裡
把分類加入至選單裡

簡單 4 步驟,完成選單類別:

  1. 前往 外觀 > 選單,進行選單調整。
  2. 新增選單項目 選擇 分類,找到我們剛新增好的分類,打勾後點擊 新增至選單
  3. 選單結構 內的分類,可以上下拖移排序,也可以排父子階層。
  4. 都完成後,點擊 儲存選單 ,更新完成。
  • 新增選單項目:可以把「 頁面、文章、自訂連結、分類 」等 .. 放置選單中。
  • 選單結構:可以拖拉排序 & 排父子階級。

最後,我們回到前台看一下,會發現 .. 一切有變化 😀 😀

新增選單出現溜~
新增選單出現溜~

如此一來,在點擊分類後,我們剛新增好的文章,就會在這分類下順利地出現了,一切都這麼的美妙:)

下一章,除了新增分類+選單,相信你 .. 也應該會想新增一個頁面,如:首頁、關於我們、聯絡我們等 .. ,給我一些時間跟大夥兒分享!


subject-8

8. 頁面管理

WordPress 如何新增頁面
WordPress 如何新增頁面

除了新增文章外,若想做一個形象網站,有如:首頁、關於我們、服務介紹、聯絡我們等 .. 頁面需求,就需要使用到 頁面管理 ,新增頁面啦!

首先前往 頁面 > 全部頁面 ,點擊 新增頁面 ,試著新增一個首頁。

WordPress 新增頁面
WordPress 頁面清單列表,之後有自訂頁面,會在這裡顯示唷:)

這邊先簡單產出一個首頁,來當教學頁面,都設計完成後,按下 發佈。

WordPress 新增頁面流程
WordPress 新增頁面流程

這個時候呢,在前台還是看不到新增的頁面唷!原因在於,還沒把它放置前台選單中,所以把它加入一下,如下:

新增頁面到選單中
新增頁面到選單中

這時 .. 我們來到前台,會發現選單上多了一個選項,就是剛新增的頁面。

前台首頁順利出現
前台首頁順利出現

到了這邊,恭喜大夥兒學會如何新增頁面了,你可以設計很多,如:公司簡介、關於我們、產品介紹、聯絡我們等 .. ,豐富自己的網站 😛 😛

但 .. 剛上面有個不完美的地方,如果我們希望 ..

  • 首頁是「 頁面 」,而非「 文章列表 」。
  • 網站入口頁面,是剛設計好的頁面。
  • 搜尋「 你的網址.com/ 」可直接找到首頁,而非「 你的網址.com/index/ 」。

其實,要完成這些事,只要簡單調整一個東西就好,接下來帶領大夥兒一探究竟 🙂 🙂


subject-9

9. 設定首頁

如何設定 WordPress 首頁
如何設定 WordPress 首頁

WordPress 官方佈景主題,預設的入口首頁,通常都是文章列表 .. 。

延續上一章節說的,若要製作「 形象網站 」而非「 部落格 」,那首頁更換成「 頁面形式 」就有必要了,這邊教大夥兒如何做。

首先前往 設定 > 閱讀,選取 靜態頁面,然後 指定靜態首頁,最後儲存設定,就完成了!

閱讀設定
閱讀設定

接著到前台看一下,會發現首頁已經變成「 頁面模式 」了,然後在網址列輸入「 你的網址.com 」,也是剛設計好的首頁,如下:

首頁設定成功
首頁設定成功

是不是很 EASY 呢!若要把首頁,換成任一靜態頁面,就是用這種方式 😎 😎

下一章節,會帶著大夥兒了解 WordPress教學 中的「 留言管理 」。


subject-10

10. 留言管理

WordPress 留言管理
WordPress 留言管理

WordPress 不同佈景主題,在前台留言板顯示方式,各有所不同,但後台管理方式,就大同小異。

這邊教大夥兒,如何在後台做留言管理,分別是:

  • 開啟頁面留言表單
  • 留言討論設定
  • 留言列表一覽

開啟頁面留言表單

一般來說,在「 文章 」下方的 開放留言 預設是開啟,若在「 頁面 」就需自己手動開啟,就看個人需求是否需要開啟:)

在頁面中,開放留言
在頁面中,開放留言

儲存完畢後,來到剛剛的頁面,會發現 .. 多了可以跟訪客互動的留言版 😆 😆

留言表單出現啦~
留言表單出現啦~

留言討論設定

再來,我們對訪客留言,也需要有控管,以防被大量留言攻擊 .. 影響到網站的運作 😯 😯

首先,前往 設定 > 討論 ,依照下圖框框內,勾選留言條件,建立審核機制。

建議調整 一般控管 即可,嚴格控管 雖然安全性最高,但訪客留言會難度提高,不太建議!
WordPress 留言設定調整
WordPress 留言設定調整

留言列表一覽

若在留言討論設定,有勾選需 手動核准 的選項,這時就需來這頁,審核前台可以顯示的留言 😎 😎

也可以在這頁,進行留言回覆、刪除等 .. 功能。

WordPress 留言管理列表
WordPress 留言管理列表

如此一來,相信大夥兒對 WordPress 留言管理上,是不是又有更進一步認識了呢:)

訪客除了在「 文章 & 頁面 」了解內容,在留言板上與他們的互動,更可以加強對網站的信賴感唷:)

subject-11

11. 自訂工具

WordPress 自訂工具
WordPress 自訂工具

WordPress 的自訂工具,可以協助完成許多事,如:Logo 設定、網站標題、選單設定、小工具設定、首頁設定等 ..,我們來看如何運作。

首先前往 外觀 > 自訂,會看到工具列表,這邊選取一些功能做教學,也有裝置切換,可以預先看平板 & 手機的顯示效果,如下:

WordPress 自訂工具列表
WordPress 自訂工具列表

網站識別功能

前往 網站識別,可以調整網站標題+ Logo +網站圖示,在顯示列可以即時預覽,最後記得發佈。

網站標題 & Logo & 網站圖示
網站標題 & Logo & 網站圖示

選單功能

前往 選單,在「 顯示選單 」是實際顯示的樣子,點選 新增選單項目,就可選擇想新增的選單種類。

選單可以上下拖拉,決定選單順序:)

選單新增+調整
選單新增+調整

小工具功能

前往 小工具,在「 顯示工具 」是實際顯示的樣子,點選 新增小工具,就可選擇想新增的工具種類。

選單可以上下拖拉,決定小工具順序:)

小工具列表
小工具列表

首頁設定

前往 首頁設定,在這裡也可以設定首頁顯示方式,有「 最新文章 」 OR 「 靜態頁面 」兩種方式,最後記得按下 發佈

首頁設定
首頁設定

最後,在 WordPress 自訂工具,我大部分是拿來調整 網站識別功能(標題+Logo+圖示),其他修改多半是在原來後台設定完成。

但這也是一個方便的好工具,習慣用自訂工具修改的,可以常常使用它:)


subject-12

12. 小工具修改

WordPress 小工具設定
WordPress 小工具設定

前往 外觀 > 小工具,會出現 可用的小工具,可把小工具新增到 小工具區域,就會在前台顯示出來囉:)

WordPress 小工具設定
WordPress 小工具設定

不同的佈景主題,小工具顯示位置不一樣,教學示範的主題,是顯示在左邊,如下圖:

小分享:小工具列表,通常會出現在網頁的 SideBar(側邊欄)或 Footer (網頁最底部)上。
前台小工具顯示
前台小工具顯示
若有安裝 WordPress 外掛,在 可用的小工具 那邊,可能會出現新的工具,可以使用唷 😛 😛

subject-13

13. 佈景主題推薦

WordPress 佈景主題推薦
WordPress 佈景主題推薦

WordPress 是一個開源程式,所以有超多開發者,在上面開發佈景主題&外掛,供網站站長使用。

有些是需要付費的,有些是免費的,當然 .. 天下沒有白吃的午餐,想要功能好+速度快+設計美的主題 .. ,一定是需要花點小錢。

其實,怎麼算都比找網頁設計公司,直接製作一個網站動則上萬元,來的便宜好幾倍 .. 沒投資是不會有收穫的:)

這邊只推薦 2 個佈景主題,每個都是人氣超高,且效能好的主題,也有持續維護升級 .. 都是小犬自己用過的,所以大可放心,如下:

Avada

avada 佈景主題
avada 佈景主題

Avada 截至目前,已經狂銷 550,000 以上,在 WordPress 佈景主題上是個絕無僅有的數字 ..

可以用它架設個人或公司網站、部落格、媒體網站、購物網站等 ..

原因是,它有超棒的客製化網頁設計功能,我列出幾個優點:

  • 超多展示網站,可一鍵安裝
  • 有拖拉編輯器,可客製化網頁設計
  • 超多功能元件,可完成需求
  • 與 WordPress 多數熱門外掛相容
  • 很棒的客服體驗

在之前接案的過程 .. 發現,大多數客戶不太曉得,自己想要怎樣的設計,或是 .. 找到很雷的設計師。

與其這樣,不如直接使用 Avada 上的展示網站(超過 60+ 個展示網站,下面只列舉部分),在做部分修改,也可達到客製化設計。

Avada 展示網站
Avada 展示網站(有超過 50 個展示網站,這裡只列舉部分)

它的使用元件,也真的讓人歎為觀止,重點是佈景主題速度,一點也沒被影響。

Avada 超客製化面板
Avada 超客製化面板
Avada 使用元件
Avada 使用元件

所見即所得的線上編輯器,也是新版加上來的特色,整個也很實用,可線上切換電腦、平板、手機方便檢視,如下圖:

Avada 線上編輯器
Avada 線上編輯器

少不了的還是放上它的熱銷數字 .. ,有這麼多人購買,代表它的好口碑,和使用分享教學也比較豐富:)

Avada 超熱門銷售
Avada 超熱門銷售

如此驚人的銷售數字,加上超多可客製化元件 & 超多應用模板 & 超良好的佈景主題速度,難怪這麼熱銷 .. 。

使用起來,果然還是「 爽 」字,可以形容了 😀 😀

Newspaper

WordPress Newspaper 主題
WordPress Newspaper 主題

NewsPaper 主題,也是我滿愛用的一款,它對個人&公司網站、部落格、媒體網站等 .. 都有良好的支持,若是你想架設一個媒體網站,更不能少了它:)

NewsPaper 在 WordPress 主題銷售數量上,也是排行前幾的!

Newspaper 購買數量&留言評價
Newspaper 購買數量&留言評價

當然它也支援超多展示網站,都可以一鍵安裝,如下(僅列出部分):

NewsPaper 佈景主題
NewsPaper 佈景主題

它的靈活度一樣很高,你可以從中調整 Logo、網站佈局、頭尾部樣式、主題顏色、模板設定等 ..

Newspaper 多功能介面
Newspaper 多功能介面

Newspaper 有所見即所得的拖拉編輯器,可線上切換電腦、平板、手機瀏覽,方便製作網頁,也很容易上手。

所見即所得編輯器
所見即所得編輯器

當然,隨著時間演進,版本也已進化到最新的 NewsPaper X,雖然主題功能很多,但佈景主題速度 .. 反而更快 ..

NewsPaper X 網站速度提升
NewsPaper X 網站速度提升

其實 NewsPaper 還有許多功能,等大夥兒細細發掘!

WordPress 佈景主題推薦上,Avada & NewsPaper 是自己很愛用的兩款,使用後也非常滿意,跟大夥兒分享:)


subject-14

14. wordpress購物車

WordPress 購物車
WordPress 購物車

WordPress 在第三方佈景主題大量開發下,不只能當部落格、個人&公司網站等 .. 連購物網站,也都能一起搞定!

先不討論購物車的佈景主題,先分享 WordPress 購物車始祖 WooCommerce 外掛,先安裝玩玩看:

WooCommerce 外掛
WooCommerce 外掛

安裝完成,會發現側邊欄多了「 WooCommerce 選單 」和「 商品選單 」,可以新增商品、訂單、瀏覽銷售報表、新增商品分類等 .. 功能。

WooCommerce 新增商品
WooCommerce 新增商品

當然,架設一個完整的購物網站,不是一件簡單的事,雖然 WooCommerce 外掛,開啟了一個免費的方便之門 .. 但,免費的功能性卻欠缺不少。

所以,許多人會買付費版,有支援購物車的佈景主題,解決這件事,一勞永逸 😉 😉

有關付費版的購物主題,一樣推薦 Avada 主題,裡面含有購物車模板,直接套來用除了美觀,功能也更完整!

Avada 購物車模板
Avada 購物車模板

這章節最後分享,台灣目前主要金流廠商,購物網站架設的重要一步,就是需談妥金流配合,如下:

  • 綠界科技( ECPay )
  • 歐付寶( O’Pay )
  • 紅陽科技
  • 藍新科技
  • 智付寶( Pay2go )

當談妥後,就可以把資料順利串接在網站上囉!使用 WordPress 購物站主題,架設購物網站,也是開啟線上生意的好方式:)


subject-15

15. 新增外掛

WordPress 新增外掛
WordPress 新增外掛

WordPress 的外掛超級多種,其中有幾個,小犬認為是必裝外掛 .. 如:Jetpack,這邊就用它來做範例教學。

Jetpack 是 WordPress.com 官方製作的外掛,已安裝數量有 500w 以上,強化了網站功能性+安全性,它有幾點好處:

  • 自動備份網站
  • 過濾垃圾訊息
  • 停機時間監控
  • 提升網站速度
  • 使用延緩加入圖片
  • 留言功能
  • 相關文章
  • 訂閱網站

這麼多很棒功能,還不安裝嗎?這邊就帶大夥兒,快速上手 Jetpack 外掛。

安裝 Jetpack

首先前往 外掛 > 安裝外掛,搜尋 Jetpack 安裝+啟用它。

JetPack 外掛
JetPack 外掛

啟用後,會發現側邊欄多了 Jetpack 選項,前往然後點擊 設定 Jetpack

Jetpack 外掛安裝
Jetpack 外掛安裝

Jetpack 需使用 WordPress.com 帳號登入(現在有開放 Google & Apple 登入了),若都沒有就點擊 建立新帳號,申請一個新的:)

登入 wordpress.com 帳號或創立新帳號
登入 wordpress.com 帳號或創立新帳號

然後會進行安裝,接著會有 Jetpack 方案計畫,可以搭配選擇,也可以使用免費版,看大夥兒選擇:)

Jetpack 方案計畫
Jetpack 方案計畫

回到網站後台,會發現 Jetpack 被開通了,太棒了 😛 😛

Jetpack 使用

Jetpack 側邊欄有「 儀表板 」、「 設定 」、「 網誌統計 」分頁,可用來看網站流量+網站功能設定,下圖是儀表板,可以在這看到網誌統計,和一些 Jetpack 訊息。

WordPress 統計數據
WordPress 統計數據

前往 Jetpack > 設定,可以在這調整許多功能,有安全性、效能、撰寫、分享等 .. ,可以依照需求開啟。

Jetpack 功能列表
Jetpack 功能列表

主要開啟功能如下(可依個人需求調整) 🙂 🙂

  • 停機時間監控(安全性)
  • 暴力破解密碼攻擊防護(安全性)
  • 效能與速度 > 啟用網站加速器(效能)
  • 分享按鈕(分享)
  • 迴響(討論)
  • 訂閱(討論)
  • 相關文章(流量)
  • 網站地圖(流量)

以上,就是 Jetpack 的簡易教學,算是 WordPress 必裝的外掛之一,可以輔助網站更全面,也支援多種佈景主題。

希望有幫到大家:)


subject-16

16. 外掛推薦

WordPress 外掛推薦
WordPress 外掛推薦

WordPress 外掛非常多,有官方開發也有第三方開發,最廣為人知的就是「 ThemeForest(主題森林) 」,分享幾個常用+實用的外掛 .. 用以下當選擇條件:

  • 啟動安裝次數:使用人數多,比較安全
  • 使用者評價:看評價數量+星等級
  • 最後更新:代表作者有維護

基於此,我挑選了幾款很棒 WordPress 外掛, 和大家分享,開始囉!

1. WPForms(表單外掛)

wpforms 表單外掛
wpforms 表單外掛

WPForms 是一款非常適合初學者的聯絡表單外掛,有獨特的拖拉式介面,可以短時間內建立出一個功能強大的聯絡表單。

你可以用它建立出:電子郵件訂閱表單、付款表單、捐贈表單、在線調查表單等 .. ,基本上你想完成的表單,且無需編寫任何程式代碼。

若想建立一個完整的 WordPress 用戶註冊表單和登陸頁面,WPForms 也能幫助你設計完成!

在使用 wpforms 其實不孤單,因為有高達 300w 的安裝次數,和 5,500 個留言評價。

WordPress 表單外掛
WordPress 表單外掛

你可以拿它免費使用,完成一些基本的表單設計,不過它也有進階版,會更多表單種類可以使用,如:商業的「 詢問表單 」、電商的「 付費資料表單 」等 ..

wpforms 拖拉式表單
wpforms 拖拉式表單

2. Yoast(SEO優化工具)

Yoast SEO優化工具
Yoast SEO優化工具

Yoast 是 WordPress 長期最受歡迎的 SEO 外掛之一,它有多種 SEO 優化方式,頁面直覺且新手也容易入門,可以讓你精準的控制網站關鍵字:)

當然使用一個外掛前,還是要看下載量、使用者評價、最後更新時間 .. 會發現,它擁有 500 w 以上的下載次數 .. 超驚人 😯 😯

Yoast 超多下載量 ..
Yoast 超多下載量 ..

安裝完外掛後,會在側邊欄看到 Yoast 功能,可以點選玩看看,大部分使用原來系統預設即可,有些可自行調整。

Yoast SEO功能列表
Yoast SEO功能列表

Yoast 好玩的地方是,它會對你的每個文章,進行紅綠燈審核(SEO審核工具)。

安裝完外掛後,你將會在每頁文章下方,看到 SEO 的審核條件,若沒達到標準就會顯示紅燈,若是達到標準即顯示綠燈:)

當然,下圖我是示範用的,所以一片紅通通 .. 別太認真 😳 😳

Yoast 文章頁面優化
Yoast 文章頁面優化

Yoast 在關鍵字優化上,是個熱門的 WordPress 外掛,相信會對你的 SEO 有幫助的!


subject-17

17. 角色權限

wordpress 角色權限
wordpress 角色權限

WordPress 有五種角色權限,分別是:訂閱者、寫手、作者、編輯、管理員,每種角色都有不同功能,我們來簡單介紹下:

訂閱者

功能性最低的角色,只有閱讀權限,且只能管理自己帳號的個人資料(如:暱稱、密碼、聯繫訊息等 ..),若是有開放會員註冊功能(如:電子商務網站),新增的會員都是這個權限。

寫手

擁有「 訂閱者 」所有功能,寫手可以新增、編輯、刪除自己的「 未發表 」文章。

但無法上傳媒體(如:圖片、影片),也不能編輯 Or 刪除「 已發表 」文章,所有要發表上線的文章,都需經過審核。

作者

擁有「 寫手 」所有功能,可以自行新增、編輯、刪除「 自己的所有文章 」。

也可以自行上傳媒體(如:圖片、影片)。

編輯

擁有「 作者 」所有功能,是管理員之下第二大的角色,主要可以做:

  • 發佈、新增、編輯、刪除「 所有使用者 」的文章,包含自己。
  • 管理文章分類 & 標籤。
  • 自行新增 & 編輯頁面。
  • 審核訪客留言。

管理員

擁有「 編輯 」所有功能,是網站的最高權限者,所有事情都可以做,可以新增、編輯、刪除整個網站,設定此權限請務必小心,主要可以做:

  • 編輯、刪除整個網站
  • 管理佈景主題
  • 管理外掛
  • 管理其他用戶的權限(也可以刪除其他管理員)

以上就是,WordPress 所有的角色介紹啦~角色權限,可別亂設定唷!


subject-18

18. 新增使用者

新增使用者
新增使用者

WordPress 可以新增多個使用者,共同管理網站後台,上一章節有分享不同的 角色權限,這章節會教大家如何「 新增使用者 」 😛 😛

首先,前往 使用者 > 全部使用者,然後點擊 新增使用者。

新增使用者
新增使用者

接著填寫使用者資料,需留意「 使用者名稱 」或「 電子郵件地址 」是之後登入 WordPress 後台的帳號(二選一),這邊的密碼先亂打也可以,等等可以重設。

然後調整角色權限,都確認後點擊 新增使用者 ,接著在 全部使用者 頁面,新的使用者就出現囉 😎 😎

填寫使用者資料
填寫使用者資料

在新增使用者後,會收到一封 WordPress 寄來的密碼修改信,點擊後可以修改新的密碼。

重設密碼連結
重設密碼連結
修改密碼
修改密碼

新的密碼設定完成後,再重新登入 WordPress 後台,我們剛新增的使用者,就順利進入 WordPress 後台啦:)

新的使用者登入了~
新的使用者登入了~
小提醒:未來想更換暱稱、大頭貼、後台密碼等 .. 個人資料,可以前往 使用者 > 個人資料,進行更改唷:)

subject-19

19. Gravatar 個人照

Gravatar 個人照
Gravatar 個人照

在回覆訪客留言,或後台個人照片,都可以更換上令你滿意的大頭貼,增加好感度。

這章節會教大家範例,如何更換 Garvatar 個人照,我們開始囉 😛 😛

首先前往 Gravatar,先註冊帳號(若已有 wordpress.com 就直接登入即可),再登入。

小提醒:Gravatar 帳號 = WordPress.com 帳號,若已有 WordPress.com 帳號則不需另外申請。

新增 Gravatar 大頭貼
新增 Gravatar 大頭貼

若是原來就有 WordPress.com 帳號,會出現下面的確認框,是詢問是否同意用 WordPress.com 帳號,登入到 Gravatar。

同意使用 wordpress.com 登入
同意使用 wordpress.com 登入

接著檢查一下信件,應該會有一封 WordPress.com 寄來的確認信,點擊確認連結後,再登入 Gravatar ,就可以設定喜愛的大頭貼囉 😆 😆

激活帳號權限
激活帳號權限

Gavatar 的管理面板,開始調整自己的個人簡介+大頭貼~~

Gavatar 大頭貼調整
Gavatar 大頭貼調整

設定完成後,在 WordPress後台的右上角照片,應該會順利更新,在前台留言區照片也會更新:)

大頭貼成品出現!
大頭貼成品出現!

以上,就是 WordPress 個人照+個人簡介的使用教學,用 Gavatar 協助我們完成,都有順利完成了嗎:)


subject-20

20. 網站搬家+備份

WordPress 網站搬家+備份
WordPress 網站搬家+備份

WordPress 的網站搬家&備份,其實很容易,這邊推薦大家 UpdraftPlus ,若遇到網站需搬家,就使用它就對了。

UpdraftPlus 有高達 200w 以上的安裝次數,加上接近 5 星的評價等級,完全不需要擔心有狀況:)

安裝+網站備份

這邊教大家如何使用它,首先前往 外掛 > 安裝外掛,把 UpdraftPlus 安裝好。

安裝 UpdraftPlus (網站搬家工具)
安裝 UpdraftPlus (網站搬家工具)

安裝完成,在側邊欄 設定,會出現 UpdraftPlus 備份,點擊後依照下圖流程操作。

若只單純需要備份(沒有要搬家),到了這步已經完成了,下載的檔案要收好即可 🙂 🙂
檔案備份下載
檔案備份下載

網站搬家+還原

前往 設定 > UpdraftPlus 備份,點擊「 上傳備份資料 」,把剛下載好的網站資料,全部丟上去。

上傳完成後,下方會出現剛丟上去的資料欄,點選「 還原 」。

還原網站資料
還原網站資料

把全部欄位打勾,點選「 Next 」照步驟安裝,接著網站就可以順利的搬家成功啦:)

選取需還原的檔案
選取需還原的檔案

以上就是網站備份+搬家的教學,若未來有網站搬家需求,如:原來的虛擬主機不好用等 .. ,就可以參考這章的教學:)


subject-21

21. 媒體管理

WordPress 媒體管理
WordPress 媒體管理

WordPress 有媒體管理功能,可以直接操作所有的圖片+影片,這章節簡單帶大家認識。

前往 媒體 > 媒體庫,若之前有上傳圖片,這裡就會看到所有圖片的集合。

新增媒體
新增媒體

若要上傳圖片,可點「 新增媒體 」,把照片往上丟就可以囉!

WordPress教學 中的「 媒體庫 」,是提供一個可大量上傳+編輯圖片的地方 😉 😉


subject-22

22. 免費版迷思

常見問題
常見問題

在前幾章節的學習,相信大夥兒對 WordPress 掌握,應該越來越熟悉了!

小犬自己,在經歷了多個網站架設後,有公司委派、個人接案等 .. ,發現客戶想要的,常常是 ..

5 個常聽到的,客戶需求:

  1. 客製化網頁設計
  2. 虛擬主機速度要快+穩定不中斷
  3. 良好的網站速度(虛擬主機+佈景主題+外掛)
  4. 主題有持續維護&更新
  5. 有 SEO 良好優化

換個角度想,當自己在架設網站時,不就也想滿足上面需求嗎?

但 .. 如果只想使用免費虛擬主機 Or 免費佈景主題,那 .. 你一定會吃大虧,因為一分錢一分貨,如果有這麼好的事,也請通知我。

因為,答案一定是 .. 沒有!!

一間沒有盈利的公司,要如何有錢請到好的工程師? 而且公司可能說倒就倒,網站資料將全部不見 …

基於此,我在 WordPress 虛擬主機+佈景主題,都是使用付費版,完成我的網站架設。

因為我知道,這個小投資,對未來的網路事業發展,只是九牛一毛。

先破除一下免費版的迷思,因為相信大夥兒,都想讓自己的網站變得更棒,有更多的瀏覽量:)

接下來,若是想完成更進階一等的網頁設計,就跟著我一起做 🙂 🙂


subject-23

23. 完整網站架設

WordPress 網站架設
WordPress 網站架設

學習完了 WordPress 基本功,當你想更進階一步,如:客製化網站設計 .. ,會發現使用免費版佈景主題,是遠遠不夠的。

若是想完成品牌打造,如:個人品牌、公司形象網站等 .. ,更是如此。

其實,更完整的網站架設,不外乎這幾件事,我把它濃縮一下:

  1. 申請網址+申請 SiteGround 虛擬主機
  2. WordPress 安裝
  3. 安裝 Avada 主題
  4. 啟用主題模板
  5. 網站修改
  6. 網站上線

對於此,我精心寫了這 2 篇文章,協助你更進階一步,完成自己的客製化形象網站,如下:

詳細全文看這,客製化形象網站設計,完整教學  icon-arrow-down  icon-arrow-down 

SiteGround教學 :快速 WordPress 網站製作

Avada教學 :18 個網頁製作課程(WordPress主題)

 

若這 2 篇,都有毅力學習完成,相信你憑一己之力,要架設一個客製化形象網站,會很順利的:)


subject-24

24. 開始起飛

"<yoastmark

若有順利看到最後,恭喜你對 WordPress教學 的掌握度,一定變得更高了!

學習 WordPress 是個漫長的道路(自己也還在學習),因為官方會不斷有新東西出現,都可以讓自己的網站變得更好+更棒!

相信許多新朋友,剛開始在 WordPress 網站架設,可能會遇到許多不會處理的問題,所以呢~

你可以直接在下方留言給我(或給我鼓勵也可以),我都會盡量協助幫忙的:)

希望大家學習路上,一切順利啦!

我是站長小犬,長期關注:WordPress 網站架設、WordPress 後台教學、WordPress 佈景主題、WordPress 外掛、網路行銷等 ..:)

9 COMMENTS

  1. 站長,你好,我是初學新手,依照你的網站教學步驟申請了siteguard,但是有幾個問題,因為一直無法解決,只好發文請教,
    1.輸入~~~自己的網域/wp-admin➤➤➤顯示無法連結
    2.從suitground 內找wordpress kit ➤…選第一個主頁,但網頁連結後一直顯示,congrats! your site is ready的視窗後無法進入wordpress主頁
    3. 我有試著把suitground 我建立的資料刪除,但是從一開始的等待2mins畫面,變成顯示site creation is taking longer than usual

    • Hi Jessica:

      針對你的問題,我們來慢慢解決,沒關係。

      <關於第 1 個問題>

      先確認你的 WordPress 網站,已經在 SiteGround 後台架設完成,且 DNS 已經指向完成(若網址&主機都在SiteGround 申請,則無須理會,已自動指向完成),和你的網址有無輸入正確。

      舉例:如果我申請了一個 aaa.com 網址,且 WordPress 網站已架設成功,我輸入網址後,前台會出現 WordPress 預設樣板(若沒出現則是網站架設沒成功)。

      確認前台正確,再輸入 aaa.com/wp-admin ,即可前往 WordPress 後台。

      <關於第 2 個問題>

      試看看換個瀏覽器登入,如果原來是用 Chome 就換 IE,再重新登入一次,若進入後有教學步驟,就直接按退出,只要成功後,之後的 congrats! your site is ready 就不會再出現。

      <關於第 3 個問題>

      會出現 site creation is taking longer than usual(你的網站架設比平常時間長),代表已經順利完成 WordPress 架設了,只需重新整理頁面,再回到路徑 Websites > Websites,即會出現剛完成的網站資訊。

      以上方式供你參考,希望有幫助到你:)

  2. 想詢問版主
    為何我修改Gavatar
    在別人網頁留言可以看到大頭貼
    自己網頁回覆卻無法顯示?
    謝謝您的幫忙:)

    • Hi yuyunjhan:

      感覺是網站沒和 Gavatar 串起來,可能要檢查一下是否有開啟網站的 wordpress.com ,然後再用此帳號,註冊 Gavatar 試看看。

      這問題是沒遇過,但希望還是有幫助到你:)

      • 不好意思想請問怎麼要確認是否有開啟wordpress.com
        後台的哪裡可以顯示呢?
        謝謝您的耐心回覆與幫忙:)

        • Hi yuyunjhan:

          可以前往「https://wordpress.com/ 」登入你的 wordpress.com 帳號,然後前往我的個人檔案上傳大頭貼。

          若還是沒有出現,就到目前的 wordpress 操作後台 > 使用者 > 個人資料 > 個人資料圖片,更換你的大頭貼。

          看看以上方式是否能幫助到你:)

  3. 版主您好,謝謝您的詳細講解,現在遇到一個問題想請教您:
    我在WP後台的 “設定》一般“ 裡面修改了“Wordpress位址”和”網站位址”,把它從localhost改成我買的網址,然後我的WP就無法登入了…(我的網站尚未發布到server還在本機修改的階段),而且我使用忘記密碼也還是無法登入。網路上有爬過文,但目前還沒有解決登入的問題,想請教您應該怎麼辦,謝謝。

發表迴響