WordPress頁面 :如何新增+編輯頁面?(功能詳解+頁面設計)

WordPress頁面 :如何新增+編輯頁面?(詳解+頁面設計)

這是一篇完整的「 WordPress頁面 」新增+編輯教學。

新手剛完成 WordPress 安裝,正在學習 WordPress 後台操作,可能想新增網站頁面,像是關於我們、服務項目等 .. ,卻不知道從哪裡著手?

還是想新增「 WordPress頁面 」,卻發現是新增成文章內容,跟你想的不一樣?

這篇文章我會教你如何新增+設計自訂的 WordPress頁面 ,這是豐富網站的要點,如下。

準備好了嗎?我們開始吧:)


1. WordPress 文章和 WordPress 頁面,哪裡不同?

WordPress 文章和 WordPress 頁面,有什麼不同?

WordPress 文字和圖片的呈現,主要由 文章頁面,這兩者所組合而成。也可參考 文章和頁面差別

「 WordPress文章 」,指的是一系列的網站文章,因為數量通常比較多,所以可將這些文章分類排序,例如運動用品店會分享運動相關的文章內容。

「 WordPress頁面 」,通常指的是品牌官網首頁、關於我們、服務內容、聯絡我們等 .. ,有特定功能的頁面。

簡單來說,文章和頁面是不同的種類,所以在新增或編輯之前,記得要選對唷:)


2. 新增標題和區塊功能

前往 WordPress 後台 > 頁面 > 新增頁面,會看到 WordPress 預設的 Gutenberg 古騰堡 文章編輯器,可以用它編寫內容。

首先,填入想命名的頁面主題。

新增區塊功能

然後點選左上角新增區塊,裡面有多種功能可選取,這裡先選擇 段落 功能。

WordPress頁面 :新增文字編輯功能
新增文字編輯功能

接著,點選剛新增的區塊,就可以自由編輯文字。

在側邊欄的 區塊 分頁也可調整字體大小、顏色等功能,如下圖。

WordPress頁面 :編輯文字區塊
編輯文字區塊
  • 新增任一個功能區塊後,在側邊欄選取 區塊 分頁,這裡會顯示可調整的細節項目,可以善加使用唷。

每個區塊都有額外功能,像是在前後方插入區塊、編輯 html 程式碼、新增至可重複使用區塊、移除區塊等 .. ,如下圖。

WordPress頁面 :區塊功能
區塊功能

WordPress 編輯器支援一般常用快捷鍵,像是 Ctrl+C(複製)、Ctrl+V(貼上)等 ..,然後按下 Delete 即可刪除區塊。

新增版面配置

WordPress 編輯器也有版面配置功能,內建有幾種樣式設計,可依照自己需求選取使用。

WordPress頁面 :新增版面配置
新增版面配置

這就是簡單的區塊編輯器操作教學,可以試著玩玩看,很方便的:)


3. 新增圖片 / 影片

網頁圖片和影片也是常見的文章內容,這邊簡單示範教學。

新增圖片

首先,點選左上角新增區塊,可利用搜尋欄位或是往下滾動尋找,找到 圖片 功能。

WordPress頁面 :新增圖片
WordPres頁面 :新增圖片

有不同的插入圖片方法,像是上傳媒體庫從網址插入媒體,這幾種顯示方法。

WordPress頁面 :新增圖片

這邊用 媒體庫 當教學示範,可以用它來上傳檔案,直接選取圖片或把圖片直接拖放到區塊中,皆可以完成上傳。

WordPress頁面 :使用媒體庫功能,上傳圖片
使用媒體庫功能,上傳圖片

當圖片上傳完成,可填寫相關資訊,這會有助於圖片的 SEO 優化,填寫完成後就選取送出。

WordPress頁面 :編輯媒體庫圖片資訊
編輯媒體庫圖片資訊

接著,可以變更圖片對齊方式、新增圖片連結、圖片尺寸等多種設定。

WordPress頁面 :編輯網站圖片樣式+資訊
編輯網站圖片樣式+資訊

這樣就完成圖片新增囉。

新增影片

WordPress 區塊編輯器,同樣支援多種影片格式,像是 Youtube、Vimeo .. 。

複製想要新增 Youtube 的網址貼至下圖欄位,確認後嵌入,就可以新增 Youtube 影片囉!

WordPress頁面 :新增 Youtube 影片
新增 Youtube 影片

也可以使用視訊功能上傳影片檔案,或是用連結方式嵌入影片。

WordPress頁面 :新增視訊
新增視訊
  • 視訊檔案通常比較大,建議把檔案放置在 Youtube 等影片串流平台,然後用連結方式嵌入至網站上,會比較省空間唷:)
  • 複製影片連結,直接貼至 WordPress 編輯器上,系統會自動新增影片功能。

4. 頁面設定

當編輯好了網站頁面,我們需要做一些頁面設定,這樣可更進入狀況。

點選右手邊的側邊欄 內容 分頁,這裡可設定整個頁面的相關資訊,這個和 區塊 分頁不同,區塊分頁是編輯單一區塊。

WordPress頁面 :狀態及可見度
狀態及可見度

狀態和可見度

「 可見度 」有公開、私密、受密碼保護這幾種,「 發佈 」可自由指定文章發佈日期,可當排程使用。

WordPress頁面 :狀態和可見度
狀態和可見度

永久連結、精選圖片

設定頁面的永久連結,有點像是幫頁面取名字一樣,建議都用英文命名對 SEO 排名比較好。

如果沒看到網址設定欄位,可先點擊 儲存草稿,就可設定網址了。

設定精選圖片,這是頁面的封面圖片,有些 WordPress 佈景主題 會顯示,而有些不會顯示,這依照你的佈景主題規劃而定。

WordPress頁面 :永久連結+精選圖片
永久連結+精選圖片

討論和頁面屬性

設定討論,可以設定是否開放給訪客在頁面下留言,通常在「 WordPress頁面 」形式不太會開啟,「 WordPress文章 」形式比較會開放留言。

頁面屬性功能,我個人是比較少用,這有點像是設定頁面選單層級,建議直接到 WordPress 外掛 > 選單功能,在這裡設定比較方便。

WordPress頁面 :討論和頁面屬性
討論和頁面屬性

以上就是簡單的頁面設定,幫助你打好基礎。


5. 設定 WordPress Seo

wordpress seo 網站優化

辛苦設計的網站頁面,我們希望能被 Google、Bing 等瀏覽器搜尋,然後進行網站排名。

此時可以安裝 WordPress Seo 外掛,像是 YoastRank Math 都是知名的 WordPress Seo 外掛,請參考 WordPress 外掛安裝 可協助你安裝。

這邊用 Yoast 當簡單範例,當外掛安裝完成後,在頁面編輯的下方,會出現 Yoast 相關功能。

WordPress Seo:Yoast Seo 優化工具
Yoast Seo 優化工具

你可以設定焦點關鍵字,然後對此進行頁面優化,只要讓 Yoast 盡量都保持在綠燈的情況下,就是一個好的 SEO 頁面唷:)


6. 儲存草稿 / 預覽 / 發佈頁面

編寫頁面過程中,可善用 儲存草稿,能幫助你保存辛苦作業的成果。

預覽功能,可讓你針對不同裝置設備,進行調整和觀看。

最右邊的點點符號,可調整工作區塊內容,也可調整成自己喜歡的版型。

WordPress頁面 :儲存草稿、預覽、發佈、額外功能
儲存草稿、預覽、發佈、額外功能

如果都確認沒問題,點擊 發佈 按鈕,就可順利發出頁面囉。

但此時,我們前台網站沒有看到剛發佈的頁面,原因是還沒將此頁面加入至選單中,下一章節進行介紹。


7. 將頁面新增至網站選單

這章節示範如何將頁面,新增至選單中。

前往 WordPress 外觀 > 選單,新增一個選單名稱,然後放置在 Primary Menu 主選單中,然後點擊建立選單。

新增選單
新增選單
  • 不同佈景主題的預設選單位置,可能放置在網站的不同地方,所以需指定你的選單要出現的地方,通常 Primary Menu 指的是網站主選單。

然後,選取剛新增的頁面 > 新增至選單中,最後儲存選單。

編輯選單
編輯選單
  • 選單內容可用拖放排序位置,也可排父子層級。

回到前台網站,會發現主選單出現了剛新增的頁面,點選前往也確實呈現。

網站選單+頁面,順利出現
網站選單+頁面,順利出現

恭喜,到這步驟你已經順利新增了第一個 WordPress 網站頁面,請參考 WordPress 後台教學,能掌握更多功能。

接下來,你可能想製作不同類型的網站,像是 部落格建立官網形象網站購物網站架設 .. ,參考連結可幫助你完成。


8. 頁面管理面板

當新增了多個網站頁面,你需要一個地方能讓一次性管理。

前往, WordPress 頁面 > 全部頁面,可批次管理全部頁面,也可個別管理頁面。

WordPres頁面 :管理多個網站頁面
管理多個網站頁面

這可以讓你一目瞭然整個網站頁面狀況,幫助網站主掌握自己的網站。


9. WordPress 頁面編輯器

WordPress 頁面編輯器外掛

WordPress 頁面編輯器,是個可讓你客製化網站頁面的強大外掛,適合設計個人形象或公司品牌網站,請參考 WordPress 最佳頁面編輯器,可協助你選擇。

優良的 WordPress 頁面編輯器有更多種區塊功能,比 WordPress 預設編輯器 Gutenberg 能力更加強大。

還有多種現成網站樣板和區塊版型,可一鍵快速套用,如果你的網站是開店平台,想設計購物網站頁面,也能幫助你完成。

WordPress 頁面編輯器,對長期經營的網站主,算是基本配備。

除非你的佈景主題原來就有內建頁面編輯器(請參考 WordPress 最佳佈景主題,有完整介紹),就不需額外添購此功能。

不然的話,假如你有多的預算,WordPress 最佳頁面編輯器 應該會對你有所幫助。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

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

返回頂端