Logo

新人日誌

首頁關於我部落格

新人日誌

Logo

網站會不定期發佈技術筆記、職場心得相關的內容,歡迎關注本站!

網站
首頁關於我部落格
部落格
分類系列文

© 新人日誌. All rights reserved. 2020-present.

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

最後更新:2022年4月18日SEO 技術
WordPress 後台教學|最完整的初學者終極指南

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

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

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

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

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

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

寫第一篇文章

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

WordPress 登入畫面

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

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

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

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

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

WordPress 文章新增畫面

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

WordPress 文章撰寫畫面

文章撰寫區:

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

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

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

Wordpress 文章區塊類型解釋圖

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

Wordprss 文章功能列表圖

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

1. 區塊樣式:

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

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

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

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

Wordpress 標題區塊解釋圖

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

Wordprss 標題區塊等級選擇圖

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

2. 插入連結

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

Wordpress 文章超連結置入示意圖

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

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

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

3. 區塊刪除

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

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

WordPress 區塊刪除功能介紹圖

文章編輯區(設定功能)

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

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

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

Wordprss 文章設定介紹圖

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

1. 「區塊」設定

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

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

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

標題區塊:

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

「錨點」是一種文章內部的連結,使用者可以點擊作者設定的錨點,快速跳轉到指定的文章區域。

對於部落客來說,最常將錨點是用於「文章目錄」的形式。

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

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

目錄製作的圖片

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

Wordpress HTML 錨點示意圖

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

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

Wordpress 目錄錨點置入介紹圖
圖片區塊:

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

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

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

Wordpress ˊ文章增添圖片教學圖

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

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

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

Wordpress 圖片區塊替代文字教學圖

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

2. 「文章」設定

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

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

內容摘要:

一篇文章有沒有人看,最重要兩點就是「標題」、「內容摘要」。

前者影響 Google 的搜尋排名,後者則影響使用者願不願意點擊。

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

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

Wordpress 內容摘要功能介紹

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

文章在搜尋頁面的呈現範例

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

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


文章分類與標籤

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

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

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

分類

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

回到 WordPress 網站後台示意方法圖

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

Wordpress 開啟文章分類編輯畫面方法

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

  • 名稱:中文名稱,呈現在網頁分類表上的名稱。
  • 代稱:英文名稱,呈現在文章網址上的名稱。
Wordprss 文章分類教學圖片

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

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


標籤

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

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

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

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

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

Wordpress 文章標籤使用路徑教學

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

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

Wordpress 文章標籤使用示意圖

永久連結

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

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

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

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

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

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

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

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

而「永久連結」則是該文章最根本的型態,所有經過變形的連結,最後還是會導回該連結。

換言之,「永久連結」就是永久不變的連結。

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

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

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

Wordpress 永久連結設定流程圖

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

Wordprss 永久連結設定選項圖

連結設定選擇

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

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

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

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

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

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

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

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

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

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

自訂結構

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

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

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

%category%

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

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

Wordpress 永久連結選項設定圖

%postname%

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

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

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

Wordprss 文章編輯流程教學圖

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

Wordpress 文章永久連結設定教學圖片

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

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

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

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

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

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

小結論

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

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

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

  • https://realnewbie.com/seo/how-to-choose-wordpress-theme/
  • https://realnewbie.com/front-end/class-name-question/

作者名稱

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

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

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

Wordprss 作者名稱示意圖

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

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

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

Wordprss 使用者名稱編輯教學徒

頁面

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

Wordpress 關於頁面示意圖

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

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

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

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

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

你可能會問:「既然只有名稱不同,幹嘛還分頁面跟文章!?」

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

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

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

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

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

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

以下是兩者的比較列表。

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

網站主題與外掛

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

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

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

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

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

網站主題:Astra

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

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

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

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

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

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

Wordpress 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 Site Kit by Google 外掛安裝教學

網站外觀

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

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

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

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

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

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

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

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

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

網頁架構

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

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

WordPress 頁面組成要素圖

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

頁首

頁面區塊,我們關注兩個重點:標誌(logo)、選單。

一、網站標誌(logo)

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

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

WordPress logo 示意圖

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

WordPress 自訂外觀步驟流程

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

Wordpress logo 編輯流程圖
到達我們的 logo 編輯區塊後,點擊「選取標誌」→「上傳檔案」 → 「選取檔案」。

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

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

Wordpress logo 編輯欄位設定

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

WordPress 後台 LOGO 上傳操作步驟

  1. logo 會需要根據不同裝置(桌機、平板、手機),呈現不同型態嗎?

    通常,我會建議各位預設調成否。

  2. logo 尺寸大小

    我們可以拉動下方滑桿,實際查看右側呈現的樣子,也可以自行填入理想的尺寸,在 px 方形框框裡。

  3. 切換裝置預設模樣

    我們可以點擊電腦螢幕的圖示,切換查看不同裝置間的樣子。

  4. 是否呈現網站標題

    若你的 logo 包含文字,建議關閉此選項;反之若無,則可以開啟此選項

  5. 是否呈現網站描述

    若勾選「是」則會在標題下方,呈現網站描述文字,若勾「否」則不顯示。

  6. 網站圖示

    上傳方法與 logo 相同,點選「選取網站圖示」 →「上傳檔案」 → 「選取檔案」,就能成功上傳。

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

WordPress 網站圖示

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


二、網站選單

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

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

Wordpress 網站選單示意圖

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

WordPress 選單操作流程介紹圖

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

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

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

Wordpress 選單層級示意圖

首先,先在選單名稱輸入:主選單。

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

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

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

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

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

WordPress 文章選單呈現圖片

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

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

WordPress 儲存選單畫面

內容

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

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

WordPress 網站側邊攔示意圖

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

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

WordPRress 側邊欄使用流程圖

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

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

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

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

區塊清空

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

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

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

WordPress 側邊欄區塊移除教學

搜尋

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

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

WordPress 搜尋欄設定流程

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

WordPress 搜尋欄按鈕功能

1. 按鈕位置

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

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

2. 按鈕顯示

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

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

3. 標籤顯示

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

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


最新文章

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

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

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

WordPress 最新文章區塊新增流程圖

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

WordPress 最新文章區塊編輯列

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

WordPress 新增區塊標題示意圖

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

WordPress 前方插入區塊示意圖

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

WordPress 標題區塊教學流程圖
WordPress 標題大小調整流程圖

分類

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

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

WordPress 新增分類功能流程圖

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

WordPress 前方插入區塊示意圖

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

WordPress 標題區塊教學流程圖

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

WordPress 標題大小調整流程圖

頁尾

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

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

WordPress 頁尾示意圖

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

WordPress 頁尾編輯流程圖

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

Copyright [copyright] [current_year] [site_title]

WordPress 頁尾編輯區塊內容撰寫教學

結語

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

WordPress 頁面與文章差在哪?

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

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

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

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

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

什麼是 WordPress 的永久連結?

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

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

如何設定 WordPress 錨點?

「錨點」是一種文章內部的連結,使用者可以點擊作者設定的錨點,快速跳轉到指定的文章區域。

對於部落客來說,最常將錨點是用於「文章目錄」的形式。

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

什麼是 WordPress 外掛?

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

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

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

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

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

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

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

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

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

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

以上,就是這次分享的內容,我們下次見!

目前還沒有留言,成為第一個留言的人吧!

發表留言

留言將在審核後顯示。

SEO 技術

目錄

  • 寫第一篇文章
  • 文章撰寫區:
  • 文章編輯區(設定功能)
  • 文章分類與標籤
  • 分類
  • 標籤
  • 永久連結
  • 連結設定選擇
  • 自訂結構
  • 作者名稱
  • 頁面
  • 網站主題與外掛
  • 網站主題:Astra
  • 網站外掛: Site Kit by Google
  • 網站外觀
  • 網頁架構
  • 頁首
  • 內容
  • 頁尾
  • 結語