WordPress後台教學:新手使用WordPress的完整攻略

0 5

在先前WordPress是什麼?的教學文中,我們提到使用Wordpress自己架設網站的優勢、使用Wordpress可以架設出哪些類型的網站、各大架站平台的比較、優缺點分析。

如果最後你也跟我一樣選擇使用「Wordpress」來架設網站,那接下來最重要的任務就是,了解怎麼使用Wordpress後台,來管理網站大大小小的設定。

相信Wordpress新手在進入後台時,腦中不是問號就是恐懼:「這麼多功能選項,我要從哪裡開始???」

這個過程我也經歷過,所以在這篇「Wordpress後台教學」中,我將介紹Wordpress後台重要的功能並且一一操作示範。

與其一邊使用一邊摸索,找一個功能花大把時間,不如在一開始就對Wordpress後台有全面的了解更來得省事!

那我們開始吧!

WordPress的架站流程

在使用Wordpress架站之前,有很重要的2件事必須先完成,才有辦法繼續接下來的教學。

  1. 註冊網域
  2. 租賃主機

若你已經完成這兩個步驟,可以直接跳到下一個章節喔!

如果這2個步驟你還沒有完成,可以參考我寫的2文章,註冊完網域也租好Wordpress主機後,再回來看這片文章。

延伸閱讀:

「註冊網域」
Namecheap完整教學:只要5分鐘,你也能擁有專屬的網域!註冊網域就是這麼便宜又簡單!
「租賃主機」
Cloudways完整教學:架設WordPress網站的No.1主機!

登入Wordpress後台教學

登入Wordpress後台主要有兩種方法

  • 直接輸入網址
  • 從主機商頁面登入

在網站的網域後出入「wp-admin」

在瀏覽器輸入網站的網域+「 /wp-admin」

「MONICA WEBS」為例

輸入「https://monicawebs.com/wp-admin」

Wordpress後台教學-登入後台

就會進入登入網站後台的畫面

「保持登入」勾選起來之後就不用一直重複登入了

Wordpress後台教學-登入後台

從主機商頁面登入

你也可以從主機商的頁面登入

因為我是使用Cloudwys的主機,這邊就以Cloudways為例

前往 Cloudways > Application > Access Details

「ADMIN PANEL」的欄位,點擊網址旁邊的「箭頭icon」,就會進入到Wordpress後台的登入畫面囉!

Wordpress後台教學-登入後台

Admin Bar

當你是在「登入」的情況下,不論你是在網站的前台還是後台

都會看到最上方有一個「Admin Bar」

上面有一些外掛的捷徑,讓你可以快速做一些設定

「Admin Bar」上會出現哪些捷徑會因為你使用的外掛而有所不同

網站前台呈現的畫面

Wordpress後台教學-Admin Bar

網站後台呈現的畫面

Wordpress後台教學-Admin Bar

點擊網站名稱的按鈕,就可以在網站的「前台&後台」穿梭自如

在前台點擊「控制台」就可以切換到網站後台

Wordpress後台教學-Admin Bar

在後台點擊「造訪網站」就可以切換到網站的前台

Wordpress後台教學-Admin Bar

設定

進入到網站的後台,我們先來做一些基本的設定

一般

WordPress後台 > 設定 > 一般

這邊可以修改網站的基本資訊

  • 網站標題
    輸入自己的網站標題,建議字數不要太長,簡單扼要即可
  • 網站說明
    輸入自己的網站說明,可以是網站的主題或企業的Slogan…等
  • 網站管理員電子郵件地址
    有關任何Wordpress的最新消息,Wordpress都會寄到這個信箱,建議可以使用網域信箱
  • 網站界面語言
    設定成自己習慣的語言
  • 時區
    選擇自己所在的時區,在台灣就選擇台北
Wordpress後台教學-一般設定
  • 日期格式
  • 時間格式

選擇自己習慣的日期、時間格式

都更改完成後,記得要點擊最下方的「儲存設定」

Wordpress後台教學-一般設定

閱讀

WordPress後台 > 設定 > 閱讀

這邊總共有6個選項

  • 網站首頁顯示內容
    這邊你可以設定網站的「首頁」要顯示「最新文章」還是「靜態頁面」

    如果你是要架設一個部落格網站,一開始文章不多時,可以先顯示最新文章就好,等之後文章豐富了,再設計一個靜態首頁,來引導網站的瀏覽者

    如果你是要設計一個形象網站,直接選擇靜態頁面就可以了
  • 網站文章頁面每頁顯示數量
    這邊可以設定一個文章列表的頁面,要顯示幾篇文章
  • 近期文章顯示數量
    如果你的側邊欄有放「近期文章」的小工具,這邊可以設定要顯示幾篇文章
  • 文章顯示方式
    這邊建議選擇「內容摘要」,整個網站的版面才不會都是文章內容,瀏覽者可以點擊「繼續閱讀」進入整篇文章
  • 搜尋引擎可見度
    這邊不建議勾選,如果將這個選項勾選起來,搜尋引擎就找不到你的網站了!這樣網站做得再好,都不會有人看得到!

    不過,如果你的網站是開發到一半,還沒架設完全,可以先勾選起來,等到網站架設好,一定要記得回來取消勾選喔!
Wordpress後台教學-一般設定

外觀

WordPress後台 > 外觀

這邊我們要先來看

  • 佈景主題
  • 小工具

佈景主題

佈景主題可以說是Wordpress相當重要的一個特色,直接套用精心設計過的佈景主題在網站上,可以大幅縮短設計網站外觀的時間。

而在Wordpress後台,有1萬多種佈景主題讓你挑選,每個主題都有它的特色及功能,但要怎麼知道挑到的主題是否優質呢?

以下提供幾個優質主題的共同特色給你參考

  • 檔案輕量:
    不佔用太多主機資源,才不會拖慢網頁的載入速度
  • RWD響應式設計:
    現在大多數的人都是使用手機瀏覽網頁,有響應式的主題變得相當重要,這樣網站才能良好的顯示在不同的裝置上,不會有嚴重跑版的問題。
  • 可高度客製化:
    有些佈景主題架構是固定的,導致使用者沒有辦法把網站調成自己像要的樣子,所以要選擇一個架構簡單、可任意調整、設定的佈景主題
  • 與頁面編輯器相容性高:
    使用Wordpress架站的優點就是可以搭配頁面編輯器使用,就算你不懂程式語言,也可以設計出一個美感與功能兼具的網站。
  • 版本持續更新:
    WordPress的系統也會不斷地更新,若主題沒有更新會導致版本過舊的問題
  • 擁有大量的使用者:
    使用人數多不但表示主題本身受歡迎的程度,更重要的是,遇到問題時,比較容易透過網上搜尋找到解決辦法

WordPress 後台 > 外觀 > 佈景主題 > 安裝佈景主題

Wordpress後台教學-佈景主題

接著就會進入到這個畫面

可以依照Wordpress的分類去挑選主題

也可以直接用「搜尋」的方式找自己喜歡的主題

Wordpress後台教學-佈景主題

使用「特色篩選條件」幫助你更快找到符合自己網站需求的主題

Wordpress後台教學-佈景主題

如果逛了後台老半天,還是不知道要選哪一個主題,可以參考我寫的文章

Astra主題適合用來架設各式各樣的網站,也是本站使用的佈景主題,是Monica很推薦的一款Wordpress佈景主題

延伸閱讀:
Astra主題教學-1款幫你搞定各類型網站的WordPress佈景主題

安裝佈景主題

WordPress 後台 > 外觀 > 佈景主題 > 安裝佈景主題

將滑鼠一到自己想到的佈景主題上方,就會看到「安裝」的按鈕

安裝完成記得點擊「啟用」

這樣就完成囉!

Wordpress後台教學-佈景主題

Wordpress後台教學-佈景主題

小工具

WordPress後台 > 外觀 > 小工具

這邊你可以選擇網站的頁首、頁尾、側邊欄想要放入哪些小工具

不過會因為主題的不同,可以調整的欄位也會有所不同

Astra Pro主題為例,它可以讓你調整主側邊欄(Main Sidebar)、頁首(Header)、頁尾(Footer)

只要將左側的Wordpress小工具,用滑鼠拖曳到欄位裡,修改完成後點擊「儲存」,前台的側邊欄就會自動更新囉!

Wordpress後台教學-小工具
Wordpress後台教學-小工具
Wordpress後台教學-側邊欄

頁面

一個網站其實就是由多個頁面所組成的,可以依照網站的主題主軸,去規劃整個網站需要有哪些頁面。

以企業的形象網站為例,或許會有首頁、關於、產品介紹、品牌精神、合作案例、聯繫我們…等。

那要怎麼在Wordpress後台新增網站的頁面呢?

新增頁面

前往 WordPress後台 > 頁面 > 新增頁面

Wordpress後台教學-頁面

接著就會進入到這個畫面

通常我輸入完頁面標題後,就會直接用Elementor頁面編輯器,用套版的方式快速設計好一個頁面

Wordpress後台教學-頁面

但在發佈頁面之前,還有幾個地方要設定一下

  • 頁面的永久連結
    永久連結這個部分很重要,使用英文比較不容易產生亂碼,也有利網站頁面的SEO排名。
    要特別注意的是在「網址代稱」的欄位,只要填入網址的slug就好,不用填入整個網站網域喔! (如下圖所示)
  • 頁面的精選圖片
    是否要放精選圖片,要依網站需求決定,若要增加精選圖片就是在右側這邊新增

都設定完成後,就可以點擊上面的「更新」按鈕囉!

Wordpress後台教學-頁面永久連結

當你更新完頁面,到網站前台時,你會發現:「咦!怎麼好像什麼事都沒發生!剛剛新增的頁面勒?」

那是因為我們還沒有將頁面新增到選單,趕快來看要怎麼操作唄~

新增選單

前往WordPress後台 > 外觀 > 選單

Step 1

建立一個選單

Wordpress後台教學-主選單

這邊就以網站的主選單為例

  1. 輸入選單名稱
  2. 勾選「Primary Menu」
  3. 點擊「建立選單」
Wordpress後台教學-主選單

Step 2

「頁面」新增至「選單」

  1. 選擇「檢視全部」
  2. 勾選要加入主選單的頁面
  3. 點擊「新增至選單」

右邊「選單結構」的欄位就會出現剛剛所新增的頁面,記得點擊右下方的「儲存選單」

回到網站前台,就可以看到主選單囉!

Wordpress後台教學-主選單

如果你有規劃系列相關文章,只需要將文章做好「分類」,再將「分類」新增至「選單」,這樣同系列的所有文章,就會出現在同一個頁面,方便讀者瀏覽(如下圖)。

MONICA WEBS為例,我將WordPress教學的文章都分成一個類別,再將這個分類放到主選單上,這樣讀者只要點進去,就可以看到一系列的Wordpress教學文囉!

Wordpress後台教學-主選單
Wordpress後台教學-分類

文章

如果你要架設的是部落格網站,或是在企業的形象網站加上部落格做內容行銷,那麼就要完整了解Wordpress的文章功能,接下來的章節會告訴你,在發佈新文章前,有哪些細節需要注意。

新增文章

若要新增文章

前往WordPress後台 > 文章 > 新增文章

接著就會看到右邊那張圖的畫面,便可以開始撰寫文章內容

Wordpress後台教學-分類
Wordpress後台教學-分類

誤刪文章如何還原?

如果不小心誤刪了一篇辛辛苦苦寫的文章,不用慌張也不用緊張(我當時可慌張了XD)

只要前往 WordPress 後台 > 文章 > 全部文章 > 回收桶

就會看到誤刪的文章,將滑鼠移到該文章上,點擊「還原」

再回到「全部文章」,就會看到文章還原成功囉!

Wordpress後台教學-分類

區塊編輯器

2018年Wordpress已經更新到5.0的版本,而古騰堡(Gutenberg編輯器),也已經內建到Wordpress裡取代傳統編輯器了!

區塊編輯器是什麼?顧名思義,一個段落都是一個區塊,可以獨立編輯。

Wordpress後台教學-區塊編輯器

更改區塊類型

每個區塊的類型都可以讓你隨意更改,類型有:清單、標題、欄位、引文、群組、未格式化文字、重要引述、詩句…等

Wordpress後台教學-區塊編輯器

區塊文字的對齊方式

你可以任意選擇每個區塊文字的對齊方式

例如:副標題要用置中、內文靠左對齊…等

Wordpress後台教學-區塊編輯器

加入其他文字元素

將要編輯的文字反選,就可以將文字改成上標、下標、加入內嵌圖片、程式碼、刪除線、更改文字顏色…等。

Wordpress後台教學-區塊編輯器

其他區塊設定

這邊有一個特別功能:「新增至可重複使用區塊」

若你有一些熱門文章、精選文章就可以附上連結,並將這些連結加入「可重複使用區塊」,每新增一篇文章,就可以在該文章最下方直接插入「可重複使用區塊」,這樣就不用一個連結一個連結慢慢複製貼上,省去許多重複性動作。

Wordpress後台教學-區塊編輯器

古騰堡(Gutenberg)區塊編輯器的種類

新增區塊只要點擊上方的「+」,就會看到左側出現所有區塊類型供你使用

Wordpress後台教學-區塊編輯器

WordPress將所有的區塊分成5大種類 :

  • 內容
  • 媒體
  • 設計
  • 小工具
  • 嵌入內容

這邊就不一一介紹,稍微瀏覽過一遍,就會大概知道有哪些區塊可以使用囉!

Wordpress後台教學-區塊編輯器
Wordpress後台教學-區塊編輯器
Wordpress後台教學-區塊編輯器
Wordpress後台教學-區塊編輯器
Wordpress後台教學-區塊編輯器

自動儲存

在編輯器的上方你會看到「儲存草稿」

這個是我覺得Wordpress很貼心的一個功能,只要你編輯完一個區塊,它就會「自動儲存」你所做的變更,這樣就不用當心電腦當機、誤關視窗導致內容一系之間消失了!

Wordpress後台教學-自動儲存草稿

文章基本設定

當你寫完一篇文章,千萬不要馬上點擊「發佈」

在發佈之前,還有許多細節需要設定,這樣會讓你的文章更完整。

永久連結

在文章編輯區的右側,你會看到一個「永久連結」的選項

設定文章的永久連結有2個重點

  1. 使用英文撰寫
    文章的永久連結用英文呈現,才不會出現亂碼,也有利文章的SEO排名
  2. 永久連結要精簡易懂
    可以直接將文章標題翻譯成簡易英文,讓讀者看到連結,就能大概知道這篇文章的主題

例如:「MONICA WEBS」有一篇WordPress是什麼?全世界有4億5000萬個網站都是用WordPress架設的!,它的永久連結是「https://monicawebs.com/what-is-wordpress/」

Wordpress後台教學-文章永久連結

另外,我們要更改Wordpress預設的永久連結設定

前往 Wordpress後台 > 設定 > 永久連結

將預設的「純數值」改成「文章名稱」,這樣比較有利文章的SEO排名

記得點擊下方的「儲存設定」

Wordpress後台教學-文章永久連結

文章分類

寫完文章後,如果沒有將該篇文章做分類,Wordpress會自動將你的文章放到「未分類」

文章分類是垂直性的,一個分類底下可以也很多不同的子分類

例如:「Wordpress教學」這個分類底下又可以有「主機」、「主題」、「外掛」…等子分類

這樣可以讓有相關性的文章集中管理,不但能讓讀者快速找到需要的資訊,之後文章變多後,也不會讓整個網站看起來雜亂無章。

新增文章分類有2種方式

  1. 直接在文章編輯區的右側新增分類
    點擊「新增分類」
    輸入分類名稱
    選擇上層分類
  2. 在Wordpress後台新增分類
    前往WordPress後台 > 文章 > 分類
    輸入分類名稱
    輸入代稱 (代稱會是分類頁面的網址,建議用英文、簡單扼要即可)
    選擇上層分類

完成後,點擊「新增分類」

Wordpress後台教學-文章分類
Wordpress後台教學-文章分類

文章標籤

文章標籤是平面式的,一個文章可以置入許多相關性高的標籤,也可以用文章的關鍵字及其他相關的關鍵字,讓讀者看到標籤就能大略知道該篇文章的重點是什麼。

新增文章分類有2種方式

  1. 直接在文章編輯區的右側新增標籤
  2. 在Wordpress後台新增標籤
    前往WordPress後台 > 文章 > 標籤
    輸入標籤名稱
    輸入代稱 (代稱會是分類頁面的網址,建議用英文、簡單扼要即可)

完成後,點擊「新增標籤」

Wordpress後台教學-文章標籤
Wordpress後台教學-文章標籤

精選圖片

文章的精選圖片就是會顯示在文章列表文章開頭的圖片

若要新增精選圖片一樣是在文章編輯區的右側

點擊「設定精選圖片」,就可以在媒體庫選擇圖片囉!

Wordpress後台教學-文章精選圖片
Wordpress後台教學-文章精選圖片

內容摘要

內容摘要就是在搜尋結果頁,文章標題下方會顯示的一小段文字,通常可以描述這篇文章的重點綱要,以及讀者可以在讀完這篇文章後有哪些收穫,建議字數為65~80個中文字。

Wordpress後台教學-內容摘要

在文章編輯區的右側可以直接輸入內容摘要

Wordpress後台教學-內容摘要

討論

這個區塊可以設定該篇文章是否要開放給讀者留言

建議勾選「開放留言」,這樣讀者在閱讀文章時,有任何疑問都可以在底下留言,也可以增加站長與讀者的互動機會。

Wordpress後台教學-討論

媒體

媒體庫就是存放圖片的地方

若要新增圖片,前往WordPress後台 > 媒體 > 媒體庫 > 新增媒體

點擊「選取檔案」,就可以將電腦中的圖片上傳到Wordpress囉!

每張圖片的檔案大小建議不要超過100 kb,長久下來,才不會拖慢網站的載入速度

上傳圖片前,先到 Image Resizer 壓縮檔案大小

Wordpress後台教學-媒體庫

也可以選擇用清單列表的方式管理媒體庫

將滑鼠移到圖片上方,就可以編輯、永久刪除、檢視圖片

Wordpress後台教學-媒體庫

當你點開媒體庫的圖片

就可以編輯更多圖片的細項設定

建議替代文字(Alt Tag)&標題都要填寫(填入後系統會自動儲存)

這樣當圖片無法顯示時,讀者也可以看到圖片的替代文字

可以填上該篇文章的關鍵字,或是依照每張圖片想表達的意思填寫

此外,若你有放上文章的關鍵字,當瀏覽者在搜尋圖片時,他也可以透過圖片造訪你的網頁。

Wordpress後台教學-alt tag 替代文字

外掛

WordPress的外掛就好像手機裡的App程式,可以替網站加裝各種不同的功能

近幾年Wordpress的使用人數逐年增長,自成了一個龐大完整的生態系

現在已經有上萬種外掛可以選擇,滿足網站各式功能需求

那要怎麼下載外掛呢?

前往 WordPress後台 > 外掛 > 點擊安裝外掛

Wordpress後台教學-外掛

接著就會進入這個畫面

  1. 上傳外掛
    付費外掛通常會用上傳的方式新增到網站中 當你跟廠商購買完外掛後,他會給你一個檔案,你只要將它上傳到Wordpress後台,點擊「立即安裝」就可以囉!
  2. 直接在後台搜尋
    免費的外掛在Wordpress後台直接搜尋就可以了,如果你知道外掛的名稱可以直接輸入在搜尋框(有時後需要用英文搜尋),點擊「立即安裝」「啟用」
Wordpress後台教學-外掛

再回到 WordPress後台 > 外掛 > 已安裝外掛

就可以看到剛剛下載的外掛已經啟用囉!

Wordpress後台教學-外掛

延伸閱讀:

頁面編輯器外掛首選」
Elementor教學-不會寫程式也能架出精美網站,1款讓500萬人愛上的頁面編輯器

SEO外掛首選」
Rank Math教學全攻略,1款讓你網站排名飆升的終極SEO外掛

前台自訂-上傳Logo、網站圖示

現在我們要來上傳網站的Logo&網站圖示

回到網站的前台,Admin Bar 有一個「自訂」按鈕

Wordpress後台教學-前台自訂

點擊「自訂」會顯示如下圖的畫面

欄位顯示的選項,會因為佈景主題的不同而有些許差異

這邊是以Astra佈景主題為例

點擊「Header Builder」> 「Logo」

Wordpress後台教學-網站logo
Wordpress後台教學-網站logo

到這邊就可以上傳自己的Logo&網站圖示囉!

網站圖示就是在瀏覽器分頁上顯示的小圖示(建議大小為512×512 pixel,以正方形為主)

Wordpress後台教學-網站logo
Wordpress後台教學-網站圖示

到這裡,Wordpress後台教學的重點功能大致上都介紹完囉!

結語

很多人不敢使用Wordpress這套開源性內容管理系統架站,主要有兩個原因

  1. 要自行購買網域+主機(要自行設定)
  2. 後台功能那麼多,看了就怕

而透過這篇「Wordpress後台教學」,涵蓋了新手必須知道的幾個WordPress後台重點功能,如果有一邊看文章、一邊學習操作Wordpress後台,相信你對Wordpress後台已經有較全面的了解,有些功能只要多使用幾次,一定可以熟能生巧,很快就能上手的!

若想要有人帶你一步一步從購買網域+主機開始學習使用Wordpress架站

可以參考我寫的這兩篇文章:

  1. Namecheap完整教學:只要5分鐘,你也能擁有專屬的網域!註冊網域就是這麼便宜又簡單!
  2. Cloudways完整教學:架設WordPress網站的No.1主機!

最後,感謝你閱讀這篇文章,希望這篇「Wordpress後台教學」有幫助到你,如果有任何問題,歡迎在底下留言告訴我或是使用Messenger與我聯繫,我會盡我所能的幫助你 🙂

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端