WordPress 後台教學｜最完整的初學者終極指南

更新日期： 2022 年 4 月 18 日

身為一位菜鳥站長，我最近花了一周的時間，將網站相關功能摸索一遍。

期間看了很多「5 分鐘打造完美外觀」、「快速套版完成樣式」等文章，也曾親自執行過一輪。

測試到最後，我認為對於網站新手而言，正確的認識網站架構與設定，才能真正幫助到網站主，更了解 WordPress 這個平台的特性。

因此這篇文章，將專注在如何從無到有，打造一個「實用導向」的網站外觀。

不要妄想一步登天，做事總需要一個過程，因為過程能幫助我們，更安全、踏實的達到目標。

如果你認同上述這句話，那就繼續看下去。

寫第一篇文章

當我們設定好虛擬主機、DNS、網址後，登入第一個的畫面通常如此顯示。

這時，我們會看到畫面共有黑色與白色兩部分，左側黑色部分是功能列、右側白色部分是操作頁面。

若想要建立第一個部落格，我認為我們要做的第一件事，就是先寫出第一篇文章再說。

當我們累積至少 10 篇以上的內容，再來談網站外觀才是務實的做法。

部落格的大忌，是空有美麗的外觀，卻沒有實際的內容。

首先，點擊左側「文章」→「新增文章」後，就能開始撰寫我們的第一篇文章。

接著，我們會進入到文章撰寫頁面，這邊可分成左側的文章撰寫區，與右側的文章設定區，兩個分開討論。

---

文章撰寫區：

文章撰寫區非常直觀，我們能直接在此填入文章標題與內文，就可以開始撰寫。

比較特別的一點，WordPress 文章的架構，是以「區塊」的概念去包裝所有圖片、文案等內容。

我們可以想像成，當我們在撰寫文章時，是用一塊塊的文字、圖片磚頭堆砌這篇內容。

此外，我們撰寫文章時，可以發現系統會自己跳出以下功能欄，供我們選擇使用。

通常，新手部落客只需要了解兩個重要功能：

1. 區塊樣式：

區塊樣式是針對文章的區塊進行調整。

通常，我們都只會用到「段落」與「標題」這兩種區塊類型。

在我們撰寫內文的當下，就已預設為「段落」類型，只有需要調整成小標題，才會改變區塊樣式。

其他有的沒的樣式，我認為對於新手來說，可以先忽略不用理會。

當我們設置標題時，可以挑選該標題的等級，最大是 H1 、最小是 H6。

從文章架構來看，一篇文章只能有一個 H1。因此文章撰寫區的標題，預設是從 H2 開始挑選。

2. 插入連結

寫文章時，若想要插入外部網站的連結，可以點選功能列表上的連結圖示。

點擊此連結功能後，上方會有一格輸入網站連結的正方形框框，下方則有三個選項。

• 「選項一」是點擊文章連結後，會以另開分頁方式呈現。
• 「選項二」、「選項三」則與網站的搜尋引擎優化有關。

若沒有特別的需求，按照系統設定的預設是最佳的選擇，也就是三個都是關閉狀態。

3. 區塊刪除

若我們想要刪除區塊，可以點選區塊旁的空白部分，就會跳出功能欄

點選右側點狀線條，再選擇「刪除區塊」，即可將該區塊刪減。

---

文章編輯區（設定功能）

文章編輯區有兩大功能，分別是針對文章各區塊排版方式的「區塊」，以及文章整體狀態的「文章」。

一般我們撰寫文章時，文章編輯區就會預設出現在畫面右手邊。

此外，我們也可以點擊右上角齒輪的圖示，控制文章編輯區顯示與否。

以下，我們先以「區塊」的功能進行解說。

1. 「區塊」設定

「區塊」顧名思義，就是調整文章內各區塊的排版、呈現方式。

當我們點擊左側文章的內文時，右側的「區塊」就會根據內容的樣式，供編輯者執行細部的設定與調整。

對於部落格來說，我們主要會著重「標題區塊」與「圖片區塊」的設定

標題區塊：

在標題區塊設定部分，最重要的功能在進階設定的「HTML 錨點」。

此外，錨點通常會設定在「標題區塊」，而非「段落區塊」，因為畢竟只是要製作目錄，不需要抓到太細項的段落。

我們先在文章開頭處，設置一個未含錨點的目錄。

接著，我們挑選目標的標題，在區塊設定的「HTML 錨點」內，增添自訂的標記符號。

設定好錨點後，我們在將原先撰寫好的目錄，已超連結的方式嵌入錨點。

嵌入連結時，在自訂的符號前加入「#」字號，就能成功製作完成。

圖片區塊：

撰寫文章時，有時會需要插入相關圖片輔助說明，這時就會用到圖片區塊。

我們可以在空白地區輕點左鍵，這時文章右側就會跳出一個「+」號。

點擊「+」號再選擇「圖片」後，就可以點擊「上傳」將電腦圖片到放到文章內。。

成功置入圖片後，我們需要特別注意「圖片設定」內的「替代文字」。

「替代文字」的目的，是為了替圖片增添註解，幫助 Google 判斷圖片的內容。

這樣其他人再搜尋相關圖片時，文章的圖片也更容易出現在搜尋結果內。

以本篇文章為例，文章內所有的圖片，我都有在「替代文字」內增添註解，補足圖片缺乏的文字說明。

2. 「文章」設定

「文章」設定區塊，主要是針對文章的顯示、分類、橫幅圖片進行調整。

若從部落格的視角，我們真正要關注的內容只有一項，就是「內容摘要」

內容摘要：

當我們將內容摘要的內容，填上文章內會引人關注的內容，就會使文章更容易被點擊開來。

我們可以點擊「設定」後，在內容摘要內填入引人關注的文字，就能順利建置完成。

當我們填寫完成後，分享連結時的顯示畫面，就會出現設定的文字。

若我們把整篇文章的撰寫內容完成後，就可以點擊右上角的「發佈」，將文章公開在網站裡。

以上，就是文章撰寫重點的內容，還請大家多加練習。

---

文章分類與標籤

當我們撰寫 7、8 天文章後，就可以使用文章分類與標籤的功能。

若我們能善用分類與標籤，將文章分門別類的區隔開來，不只能讓網站架構更清楚，也能對使用者更友善。

以下我們分別介紹這兩功能。

分類

若我們是在網站前台顯示畫面，可以先點擊左上角的速度表圖示，在點選「控制台」回到網站後台。

回到控制台後，就可以點選「文章」→「分類」，就可以到達分類編輯頁面。

當我們到了分類編輯頁面，我們只需要先關注「名稱」與「代稱」就好。

• 名稱：中文名稱，呈現在網頁分類表上的名稱。
• 代稱：英文名稱，呈現在文章網址上的名稱。

若名稱與代稱接設定完畢，就可以點擊左下「新增分類」按鈕，建立一個文章分類。

注意，建立分類時最好不要超過 5 個分類，不然可能有分類就跟沒分類一樣，完全失去其功能。

---

標籤

「標籤」一詞對許多人來說可能很陌生，但你們一定聽過「#hashtag」這個功能。

標籤的英文就叫「hashtag」，如字面上的意思，它是一種針對文章關鍵字的描述。

使用者可以點擊文章的標籤，看到網站內有相同標籤的文章。

雖然它實用性不如分類高，但也不失為一種更細緻的分類方法。

我們可以點擊控制台的「文章」→「標籤」抵達編輯頁面。

接著在「名稱」輸入中文內容，「代稱」輸入英文內容，再點擊「新增標籤」即可。

操作原理與「分類」幾乎相同。

---

永久連結

「永久連結」白話文來說，就是文章的連結。

我們在部落格寫的每一篇文章，都會有一個獨一無二的連結，將使用者導引到該文章。

例如我的網站其中一篇文章網址，是以下：

https:// realnewbie.com/ life/ perspective/ graduation-anxiety/

上述網址，就是一個特別安排過的「網址」

你可能會好奇：「為什麼不叫網址就好，還要增加永久兩個字」

原因是一篇文章的連結，可以有無數的變化形態。

例如，我們將連結以縮網址壓縮過，就是新的一條連結。

通常 WordPress 會將永久連結的形式，預設為：https://「你的網域」/?p=「文章編號」

我們可以透過手動更改，讓它有更利於分辨的樣式。

首先，回到網站控制台後，點擊「設定」→「永久連結」即可抵達編輯頁面。

進去以後，我們直接選最下面的「自訂結構」，並點選「%category」以及「%postname」，其他都不用裡它們。

連結設定選擇

我們分別解釋這六個設定的差異：

• 預設：單純以文章標號命名
• 日期與文章名稱：如字面意思命名
• 月分與文章名稱：如字面意思命名
• 純數值：跟預設差不多，就是以數值命名

上述四種命名方式，通常不利於建構一個妥善的連結架構。

因為「日期」與「編號」對於使用者與 Google 搜尋引擎來說，都沒有任何意義。

接下來，我們來看看文章名稱

• 文章名稱：以文章的中文標題命名

以我的網站為例，將會變成：「realnewbie.com/我是標題/ 」。

這種命名方式表面上看似淺顯易懂，但若以中文網址分享文章連結時，就會變成一堆亂碼的網址。

因為畢竟只有台灣會使用繁體中文，它並不是一個網路上的通用語言。

由此可知，上述五種都不宜納入考量，我們應該選第六種「自訂架構」才是最佳解。

自訂結構

以我的工作經驗來看，自訂結構不只能提供清楚的連結架構，也能幫助文章流量查看時更直觀。

自訂架構的連結設定，是以「%category%」與「%postname%」組成。

以下，我分別解釋兩個名詞的意涵。

%category%

「%category%」就是我們設定文章分類時，所撰寫的分類代稱。

我們在文章分類設定怎樣的代稱，網址上就會怎樣的呈現。

%postname%

「%postname%」則是文章標題的英文代稱。

讓我們重新回到文章編輯的「設定」區塊，去解說此項目。

點擊「文章」→「全部文章」，並點選目標文章底部的「編輯」，就能回到文章編輯區。

回到文章編輯區後，點擊「設定」→「文章」→「永久連結」，就可以看到「網址代稱」的空格。

我們可以「網址代稱」區塊，將系統預設的文章編號，改成有意義的英文字，並以「-」號連結。

例如，文章中文名稱為「英文教學」，網址代稱就能寫「english-teaching」。

當我們修改好後，就能完成「%postname%」部分。

你可能會反問：「你為什麼不在前面撰寫文章時，就說明永久連結的部分？害我現在每篇文章都要重新修改。」

因為礙於教學設計的內容，永久連結的部分要一次講解成比較清楚。

此外，雞湯文也說：只有痛過才懂堅強，傻過才會成長。

小結論

當我們把「%category%」與「%postname%」都設定好，文章的網址就會變成：

https://「主網域」/「分類代稱」/「文章網址代稱」/

以下文章的連結，就是按照上述邏輯編排。

• https://realnewbie.com/seo/how-to-choose-wordpress-theme/

• https://realnewbie.com/front-end/class-name-question/

---

作者名稱

文章連結整頓好後，我們接著修改文章的「作者名稱」。

若沒有經過特別修改，通常會預設為 wordpress 註冊的信箱名稱。

我們可以透過手動調整，改成自己希望的筆名。

點擊「使用者」→「個人資料」，就可以到達作者名稱的編輯頁。

接著，我們可以在「暱稱」區塊填入希望的筆名，並點選「公開顯示名稱」，將預設的名稱改成暱稱的內容。

如此一來，就能成功將文章作者欄改成理想的名稱。

頁面

若希望讓網站的使用者更了解你，我們不只能改變「作者名稱」，還可以去修改「關於」頁面，撰寫關於自己的更多消息、聯繫方式。

通常 WordPress 會預設一頁「關於」頁面，給網站主編輯內容。

點擊「頁面」→「全部頁面」後，可以看到「關於」這條草稿。我們點選「編輯」後，即可到達頁面編輯區。

到頁面編輯區時，你可能會有一種似曾相識的感覺，發現它跟文章編輯區沒什麼兩樣。

的確，兩者其實整個幾乎操作方式大同小異，若會編輯文章則會編輯頁面。

但我們拉動下圖的滑桿，其實還是可以發現「設定」區塊，顯示的名稱稍微的不同。

你可能會問：「既然只有名稱不同，幹嘛還分頁面跟文章！？」

對網站初學者來說，最容易犯的一個錯誤，是把文章與頁面的編輯方式混淆。

要不以頁面編輯器撰寫所有內容，要不就是以文章編輯器建立所有資訊。

其實，區分「頁面」與「文章」兩者最大的目的，在於使網站的「資訊架構」（簡稱：IA）清楚。

IA 的概念涉及到 UI/UX、SEO 等專業的範圍，不是三言兩語可以解釋。

但簡單來說，就是要讓網站的網頁層次、比重拿捏清楚，讓使用者與搜尋引擎更容易使用。

為了建立完整的資訊架構，文章與頁面分別扮演不同的功能、角色。

以下是兩者的比較列表。

文章	頁面
動態：經常新增、改動	靜態：發佈後，較少更動
可以「分類」、「標籤」	無此選項。
可以發佈留言	無此選項
有「文章列表」	無「頁面列表」

---

網站主題與外掛

WordPress 受到全球眾多使用者喜愛的原因，在於它是一個極具彈性的網站編輯器。

使用者可以透過「主題」與「外掛」兩者互相搭配，創造出各式各樣的網站。

「主題」讓網站主能大規模改變網站外觀，將網站外型塑造自己喜歡模樣。

「外掛」則提供網站主增添希望的功能，讓網站更滿足網站使用者的需求。

以下，將分別推薦適合部落格的主題與外掛。

網站主題：Astra

「Astra」是一種輕量型的網站主題

它最吸引人的一點，在於主題編碼十分優異，讓安裝該主題的網站，都能有很好的網站速度。

對於一個部落格來說，除了「內容」作為第一優先重點，其次「速度」則絕對使用者觀看體驗。

若要選擇網站主題，首推 Astra。

安裝方式如下，點擊「外觀」→「佈景主題」後，接著到搜尋欄輸入「astra」，下方會接著顯示對應主題。

滑鼠游標移到 astra 圖示，點擊「安裝」就成功完成。

網站外掛： Site Kit by Google

對於部落客而言，流量檢視是經營網站的重點。

最普遍的兩個網站流量監測工具，是「Google Analytic」與「Google Search Console」。

• Google Analytic：檢視網站整體流量成效

• Google Search Console：檢視使用者以哪些關鍵字，找到自己寫的文章。

為了幫助 WordPress 網站主能串連這兩項工具，Google 官方團隊開發了「Site Kit by Google」外掛。

網站主能藉由快速安裝外掛，減少自己一個個安裝追蹤碼的工作，快速串接這兩項網站監測工具。

安裝方式與主題相似，點擊「外掛」→「安裝外掛」後，接著到搜尋欄輸入「Site Kit by Google」，下方會接著顯示對應主題。

滑鼠游標移到 astra 圖示，點擊「立即安裝」就成功完成。

---

網站外觀

安裝好網站主題後，就可以開始對網站外觀修改。

接下來，我只會針對網站最基本的外觀去調整，這麼做的原因有兩個。

第一個原因，若新手想打造外觀華麗的主題，很可能因為不熟悉功能，導致網站整體效能被拖寡，反而得不償失。

第二個原因，部落格最重要的核心，是網站內的文章品質。

我們設計網站的目的，只是能提供一個簡單大方的瀏覽頁面，就算是一個好的部落格外觀。

以上兩個原因，是同樣身為新手的我，設計部落格的主要考量。

通常新手設計網站外觀時，是指「首頁」的設計與安排。

「首頁」是一種「頁面」，因此最原始的設計方式，是以「頁面編輯器」去製作首頁。

但由於 WordPress 內建的頁面編輯器功能有限，我們可以借助網站主題的額外功能，幫助我們設計更好看、更多功能的首頁。

網頁架構

開始設計前，我們先解說一下頁面的編排架構。

一般來說，頁面的基礎架構如下圖，是由三個區塊組成：頁首、內容、頁尾。

我們將分別針對這三部分，逐一講解重點內容。

頁首

頁面區塊，我們關注兩個重點：標誌（logo）、選單。

一、網站標誌（logo）

標誌是一種網站的精神象徵，使用者只要看到相關圖示，就會自然而然想起你的網站。

我相信它的重要性，應該不需要多說。

我們回到控制台後，點選「外觀」→「自訂」後，會到達以下外觀編輯頁面。

我們以「Astra 主題」為例，抵達外觀編輯頁後，點選「Header Builder」→「Site Identity & Logo」

再將電腦設計好的圖片，成功上傳至網站頁首。

上傳後，我們將左設編輯欄往下拉，可以發現共有六個操作選項。

以下，我逐一為解釋給你聽。

記得，網站圖示的尺寸建議為 512 x 512 像素，上傳後就會出現在網頁上方。

當設定好後，別外忘記按左上角的「發佈」，才能正常顯示在網頁上歐。

---

二、網站選單

網站選單是一個導覽列表，使用者可以透過選單，快速分類出自己想要查看的內容。

它就像是網站地圖，讓使用者更清楚網站的內容架構。

建立的方式很簡單，回到控制台後點選「外觀」→「選單」，即可到達選單編輯頁面。

當我們到達選單編輯頁後，點選「分類」→「檢視全部」，並勾選想呈現在選單的文章分類。

勾選完成後，點擊「新增至選單」，即可呈現在選單內。

新增完成後，我們可以看到右手邊有個選單的編輯層級區。

首先，先在選單名稱輸入：主選單。

接著，我們可以透過「拖拉」安排每個文章分類的架構。

若將分類靠近紅色線條對齊，代表它將出現在選單最頂層，也就是名稱顯示的地方。

若是將分類拉近藍色線條，則代表該分類將出現在第二層選單。

意味使用者須點擊該頂層選單後，才會出現的次要項目。

實際呈現將會如下圖所示。

圖片上，紅色區塊就是頂層選單，藍色區塊則是第二層選單。

安排好選單架構後，勾選「Primary Menu」再點選「儲存選單」，就能完成選單的設置。

---

內容

內容區塊，我們則關注「側邊攔」區塊。

「側邊攔」意思如其名，是位於網站側邊區塊的欄位，通常用來放置補充資訊。

若想編輯此區域，我們可以到控制台點擊「外觀」→「自訂」後，會先回到外觀編輯頁面。

在點擊「小工具」 →「Main Sidebar」 →，「完全了解」，即可抵達側邊欄編輯區塊。

側欄編輯區的操作流程，其實與「文章」、「頁面」等編輯區的原理相同。

它以「區塊」進行功能的安排，差別在於側欄的功能相較前述兩者，提供更多選項使用。

以部落格來說，我們主要會在此區域設置三種功能，分別是「搜尋」、「最新文章」、「分類」。

以下，將分別介紹三種功能。

區塊清空

提醒一點，若你的主題已經先幫你預設部分功能，可以先點選在旁邊點選移除區塊，將此區域清空。

再重新跟著我的步驟，重新建立三個功能。

刪除的操作方法，與文章編輯區的步驟相同。

搜尋

當區塊清空後，我們可以點選含有「+」符號的方框新增功能，並在搜尋欄內輸入「搜尋」兩字。

接著，點選含有「搜尋」兩字的放大鏡圖示，新增此功能。

新增後，此功能共有三種選項能夠進行設定，我們按照數字流程逐步講解。

1. 按鈕位置

「按鈕」是「搜尋按鈕」的簡稱，系統預設三種樣板讓我們調整，我們可以根據旁邊顯示圖示，決定是否啟用按鈕。

以我的部落格來看，會建議各位選擇「按鈕位於外部」選項，因為它相較於另外兩者，對網站使用者來說看直觀。

2. 按鈕顯示

當我們選擇 「按鈕位於外部」選項後，就可以來調整按鈕的顯示方式

若「使用按鈕圖示」，則會出現一個放大鏡的圖案，若關閉此功能，系統則會以「搜尋」兩字呈現。

3. 標籤顯示

設定完按鈕顯示後，可以來調整搜尋來上方，是否需要呈現「搜尋」兩字標題，讓使用者更清楚此區塊的功能。

詳細設定，可以觀看下方的比對圖。

---

最新文章

接著，我們可以新增「最新消息」功能。

此區塊會將部落格最新撰寫的文章，以標題方式呈現在網站側邊欄，讓有興趣的讀者點閱。

點選「+」並搜尋、點選「 最新消文章」，即可成功新增。

新增完成後，會跳出一系列的調整按鈕，這時我們不需要理會它，只要保持最原始設定即可。

通常我們新增完此功能，會額外替它新增一個標題區塊，讓使用者更清楚它的意涵。

我們可以點擊「最新文章」空白處，呼叫出區塊編輯列，點選右側點狀線條並選擇「於前方插入區塊」

有了空白區塊後，在點擊右側「+」→「標題」，再輸入「最新文章」（建議設成 H3 大小），即可完成。

---

分類

最後，我們再以相同的方法，新增分類區塊，即可完成。

點擊「+」後，搜尋、點選，「分類」。

新增後，點擊空白區塊呼叫編輯列，點選點狀線條、點選「於前方插入區塊」。

插入空白區塊後，點選「+」→「標題」。

於空白處輸入「分類」，並將標題大小調整成「H3」，即可完成新增。

---

頁尾

到這裡，我們已經完成「頁首」、「內容」等頁面區塊，最後來修改一下頁尾部分，即可完成。

頁尾修改的重點，在於底部的版權區域。

我們回到「自訂」畫面，點選「Footer Builder」→「Copyright」，抵達頁尾編輯區。

到達頁尾編輯區後，將下方文字複製，並貼上圖片指定區塊，即可完成編輯。

Copyright [copyright] [current_year] [site_title]

結語

最後，我們統整本文所說的重點，幫助各位讀者重新回顧重要內容。

若你能成功按照步驟，一步步地看到這裡，那代表你的網站已經擁有最基本的雛型，恭喜你。

我相信透過這些設定的操作，不只對於 WordPress 基本的運作原理有一定程度的了解，也對於「網站」的概念更清晰。

你可能會想說：「我花了這麼多的時間，怎麼網站外觀這麼樸素！？跟原本預想的完全不同。」

我想你經過這一輪的操作，應該能理解蘇格拉底那句話：「知道的越多，才知知道的越少。」

若想要建立一個外觀華麗、效能齊全的網站，對於網站新手確實不容易。

但我也相信當你有了以上的基礎知識，一定可以幫助你未來管理網站時，有更深刻的見解與認識。

以上，就是這次分享的內容，我們下次見！