這是一篇完整的「 WordPress文章 」教學,教你如何新增和編輯。
新手剛完成 WordPress 安裝,正在學習 WordPress 後台操作,可能想新增文章豐富網站內容,卻不知道從哪裡著手?
還是想新增「 WordPress文章 」,卻發現是新增成網站頁面,跟你想的不一樣?
這篇文章我會教你如何新增+設計自訂的 WordPress文章 ,這是豐富網站的要點,如下。
- 1. WordPress 頁面和 WordPress 文章,哪裡不同?
- 2. 新增標題和區塊功能
- 3. 新增圖片 / 影片
- 4. 設定文章錨點
- 5. 文章設定
- 6. 設定 WordPress Seo
- 7. 儲存草稿 / 預覽 / 發佈頁面
- 8. 設定網站選單
- 9. 設定網站首頁
- 10. 文章管理面板
- WordPress 學習資源
1. WordPress 頁面和 WordPress 文章,哪裡不同?
WordPress 文字和圖片的呈現,主要由 文章 和 頁面,這兩者所組合而成。也可參考 文章和頁面差別。
「 WordPress文章 」,指的是一系列的網站文章,因為數量通常比較多,所以可將這些文章分類排序,例如運動用品店會分享運動相關的文章內容。
「 WordPress頁面 」,通常指的是品牌官網首頁、關於我們、服務內容、聯絡我們等 .. ,有特定功能的頁面。
簡單來說,文章和頁面是不同的種類,所以在新增或編輯之前,記得要選對唷:)
2. 新增標題和區塊功能
前往 WordPress 後台 > 文章 > 新增文章,會看到 WordPress 預設的 Gutenberg 古騰堡 文章編輯器,可以用它編寫內容。
首先,填入想命名的文章主題。
新增區塊功能
然後點選左上角新增區塊,裡面有多種功能可選取,這裡先選擇 段落 功能。
接著,點選剛新增的區塊,就可以自由編輯文字。
在側邊欄的 區塊 分頁也可調整字體大小、顏色等功能,如下圖。
小提醒:新增任一個功能區塊後,在側邊欄選取 區塊 分頁,這裡會顯示可調整的細節項目,可以善加使用唷。
每個區塊都有額外功能,像是在前後方插入區塊、編輯 html 程式碼、新增至可重複使用區塊、移除區塊等 .. ,如下圖。
WordPress 編輯器支援一般常用快捷鍵,像是 Ctrl+C(複製)、Ctrl+V(貼上)等 ..,然後按下 Delete 即可刪除區塊。
新增版面配置
WordPress 編輯器也有版面配置功能,內建有幾種樣式設計,可依照自己需求選取使用。
這就是簡單的區塊編輯器操作教學,可以試著玩玩看,很方便的:)
3. 新增圖片 / 影片
網頁圖片和影片也是常見的文章內容,這邊簡單示範教學。
新增圖片
首先,點選左上角新增區塊,可利用搜尋欄位或是往下滾動尋找,找到 圖片 功能。
有不同的插入圖片方法,像是上傳、媒體庫、從網址插入媒體,這幾種顯示方法。
這邊用 媒體庫 當教學示範,可以用它來上傳檔案,直接選取圖片或把圖片直接拖放到區塊中,皆可以完成上傳。
當圖片上傳完成,可填寫相關資訊,這會有助於圖片的 SEO 優化,填寫完成後就選取送出。
接著,可以變更圖片對齊方式、新增圖片連結、圖片尺寸等多種設定。
這樣就完成圖片新增囉。
新增影片
WordPress 區塊編輯器,同樣支援多種影片格式,像是 Youtube、Vimeo .. 。
複製想要新增 Youtube 的網址貼至下圖欄位,確認後嵌入,就可以新增 Youtube 影片囉!
也可以使用視訊功能上傳影片檔案,或是用連結方式嵌入影片。
- 視訊檔案通常比較大,建議把檔案放置在 Youtube 等影片串流平台,然後用連結方式嵌入至網站上,會比較省空間唷:)
- 複製影片連結,直接貼至 WordPress 編輯器上,系統會自動新增影片功能。
4. 設定文章錨點
如果文章篇幅比較長,可能會需要使用文章錨點,就是點擊文章的某個文字,會自動位移到指定位置,方便讀者閱讀。
WordPress 是有類似的外掛,但其實使用預設編輯器就做的出來,這邊來示範教學。
首先,新增一個 清單 區塊,輸入幾個章節段落文字,如下圖。
接著用全選文字(反白),然後點設定錨點連結,使用 # 號加上英文,輸入完成後確認,或是按下 Enter 也可。
重複此動作,將其餘文字都設定獨特的網址連結。
設定完成應該會發現,清單上的文字都被加上連結了,如下圖。
接下來,新增幾個標題區塊和段落區塊,點選其中一個標題。
在側邊欄 區塊 分頁的 Html 錨點功能,輸入剛設定的連結(不加 # 號),讓彼此對應起來。
如此一來,就完成文章錨點設定囉,讓文章的閱讀力又上升了。
5. 文章設定
當編輯好了網站頁面,我們需要做一些頁面設定,這樣可更進入狀況。
點選右手邊的側邊欄 文章 分頁,這裡可設定整個頁面的相關資訊,這個和 區塊 分頁不同,區塊分頁是編輯單一區塊。
狀態和發佈
「 狀態 」有公開、私密、受密碼保護這幾種,「 發佈 」可自由指定文章發佈日期,可當排程使用。
永久連結
設定文章的永久連結,有點像是幫文章取名字一樣(建議用英文命名,有助於網站 SEO ),如果沒看到網址設定欄位,可先點擊 儲存草稿 就可設定網址了。
如果你的網址型式跟我不同,可能是你沒有更改 WordPress 預設值。
請前往 WordPress 設定 > 永久連結,更改為用「 文章名稱 」型式命名網址,這樣有助於 SEO 排名。可參考 永久連結設定 有詳細比較差異。
設定分類和標籤
將文章放置在指定分類下,可在這新增+設定分類,或是前往 WordPress 文章 > 分類,也能新增分類。
還有文章標籤功能,看自己需不需要使用。
設定精選圖片、內容摘要
設定精選圖片,這是頁面的封面圖片,有些 WordPress 佈景主題 會顯示,而有些不會顯示,這依照你的佈景主題規劃而定。
內容摘要,這是在文章列表用來簡略顯示文章內容的,需搭配文章顯示方式是 內容摘要(WordPress 設定 > 閱讀,進行設定)。
或是用區塊編輯器的 閱讀更多 功能,都可以解決文章列表的文字過長問題。
文章討論
可調整是否開放留言,網站文章會建議開啟,可以增加與讀者的互動。
以上就是簡單的文章設定,幫助你打好基礎。
6. 設定 WordPress Seo
辛苦設計的網站頁面,我們希望能被 Google、Bing 等瀏覽器搜尋,然後進行網站排名。
此時可以安裝 WordPress Seo 外掛,像是 Yoast、Rank Math 都是知名的 WordPress Seo 外掛,請參考 WordPress 外掛安裝 可協助你安裝。
這邊用 Yoast 當簡單範例,當外掛安裝完成後,在頁面編輯的下方,會出現 Yoast 相關功能。
你可以設定焦點關鍵字,然後對此進行頁面優化,只要讓 Yoast 盡量都保持在綠燈的情況下,就是一個好的 SEO 頁面唷:)
7. 儲存草稿 / 預覽 / 發佈頁面
編寫頁面過程中,可善用 儲存草稿,能幫助你保存辛苦作業的成果。
草稿旁邊的小圖示是預覽功能,可讓你針對不同裝置設備,進行調整和觀看。
最右邊的點點符號,可將工作區塊內容調整成自己喜歡的版型。
如果都確認沒問題,點擊 發佈 或 排程 按鈕,就可順利發出「 WordPress文章 」囉。
由於我們剛把文章放置在指定分類下,所以需要把該分類放置在網站主選單上,這樣前台才能看得到。
接下來,我們繼續教學:)
8. 設定網站選單
剛剛我們已經將文章放置在某個分類中,現在需做的就是把該分類,放置在網站主選單中,如此一來才能在前台網站上看到。
首先,前往 WordPress 外觀 > 選單,新增一個選單名稱,然後放置在 Primary Menu 主選單中,然後點擊建立選單。
- 不同的佈景主題可能有多個選單位置,所以需指定你的選單要出現的地方,通常 Primary Menu 指的是網站主選單位置。
然後,選取剛新增的分類 > 新增至選單中,最後儲存選單。
- 選單內容可用拖放排序位置,也可排父子層級。
回到前台網站,會發現主選單出現了剛新增的分類,點選前往也確實出現了剛新增的文章。
恭喜,到這步驟你已經順利新增了第一個「 WordPress文章 」,請參考 WordPress 後台教學,能掌握更多功能。
9. 設定網站首頁
WordPress 是個強大的網站管理系統,許多 WordPress 佈景主題預設的網站首頁,是採用部落格形式。
如果你剛照著上面教學,可能會發現目前的網站首頁和選單分類,重複出現了文章列表,我們需要做一些調整。
首先,我們需要設計一個網站首頁,請參考 WordPress 頁面教學 有示範如何製作頁面。
網站首頁製作完成後,只需進行一個設定,就能讓訪客搜尋主網域,直接看到首頁頁面。
設定網站首頁
前往 WordPress 設定 > 閱讀,切換成靜態頁面,然後選取你想設定的首頁頁面,完成後儲存設定。
如此一來,網站首頁就切換成你設計的首頁頁面囉,恭喜你。
10. 文章管理面板
當新增了多個網站文章,你需要一個地方能讓一次性管理。
前往, WordPress 文章 > 全部文章,可批次管理全部文章,也可個別管理文章。
這可以讓你一目瞭然整個網站文章狀況,幫助網站主掌握自己的網站。
WordPress 學習資源
學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 3 項實用資源,可有效幫助大家做學習。
資源一:WP 高手架站課(線上課程)
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!
資源二:SEO 排名飆升課(線上課程)
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。
點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!
資源三:犬哥數位(專業 WordPress 網頁設計公司)
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!
資源四:更多犬哥教學資源
如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。
如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG。
小犬你好,在網站架設摸索初期很高興能夠遇見你的部落格,講解很詳細也易上手
我目前遇到一個問題,編輯新文章的時候,發現背景出現:「Notice:Undefined index:astra-sites-tag in/home1/eaterfoo/public_html/wp-content/plugins/astra-pro-sites/inc/lib/Gutenberg-templates/classes/class-ast-block-templates.pho on line 470」請問這要怎麼疑難排解呢?好像也連帶影響到我的astra options功能無法正常使用,頁首頁尾調整那些功能都沒有跑出來,期待您的解惑,謝謝
嗨,這似乎是 Astra 跟 Elementor(或你正在使用的頁面編輯器)有衝突
可能需要聯絡這裡邊的客服來處理。
或是停用其中一款,來觀察是哪一邊出現問題。
相關參考文章
可以試著還原網站看看: 還原外掛教學 。
若無法還原,在詢問看看兩邊客服。
您好,不好意思
我發現我的文章字體是偏黑粗體
想改成跟貴站一樣的自型
就透過檢查發現好像是 notosanstc-regular,Arial,sans-serif
我就透過css去做更改
然後好像沒有動靜….
想請問有解嗎??
嗨,ANT,
建議盡量不要動到 WordPress CSS ,
現在更改字體已經有很多外掛可以幫助你,
我們的網站使用的是 GooGle 思源黑體,在 Google 的字體外掛即可找尋到並且下載。
Google Fonts 字體外掛
希望有幫助到你唷!
您好,
請問辦法把已經發佈到頁面的內容改成文章嗎?謝謝
嗨,roger,
可以的,我們可以使用:頁面切換文章外掛 來幫助我們,將頁面轉換為文章。
轉換完成後,停用 / 刪除外掛,並不會將文章轉換回頁面,所以可以依據需要,轉換完成後,停用 / 刪除外掛。
也可以參考 內建的 WordPress 導出 / 導入功能 來轉換頁面和文章類型。
最後,將頁面轉換為文章後,可以檢查一下永久連結的設定唷:)
犬哥站長您好
想請教您2個問題哦~
我看了這篇文章,將部落格做好分類了,我取名為 BLOG*
問題1 .
我希望可以點進「BLOG*」就出現一篇一篇有圖片的文章,幾行內文摘要,然後頁面有5篇以上文章,有側邊欄、留言等等的畫面
現在的狀況是:
我按下「BLOG*」也確實會出現我發佈的文章列表們,網名 name/category/blog/
(但僅是列表,文章的名字和幾行內文文字)
我需按下「read more…」之後,才會出現側邊欄, 日期, 留言區等等,
但文章的頁面也只呈現一篇有圖片的完整文章
(我希望是幾行內文文字即可,然後頁面有5篇以上的文章)
這時候網名是 name/文章的名字
請問我可以如何設定呢~
我有想過是不是把「靜態首頁」指定為「BLOG*」
不過我無法在「設定」、「閱讀」的地方找到「BLOG*」這個選項~
呈上一個您回覆的
問題2. 「頁面」可以用外掛將頁面改成文章列表的模式,
那如果使用外掛後,之後陸續發文也可以如同「文章」的模式,保持外觀的樣子不變嗎?
謝謝您耐心看完 ; )
嗨,antiquegirl,
若是想要自定義 Blog 頁面樣式,你可以使用頁面編輯器,自行新增+設計一個頁面,再前往 WordPress > 閱讀,指派為文章頁面即可。
相關教學,可以參考:使用 Astra 建立 Blog 教學
關於第二個問題,不太明白你希望呈現什麼效果呢?
如果之後都希望是文章的形式,那就直接新增文章就好囉:)
您好!請問該如何改變錨點的文字顏色呢?
嘗試過改變文字顏色,但改變顏色的只有前面的標號,內文並沒有跟著改變!
嗨,c,
錨點文本顏色是你的網站所設定的連結顏色,
建議若要修改,可嘗試使用 CSS 幫助你:)
CSS 修改錨點文本顏色相關教學
想問說wordpress 後台本身就有頁面編輯器
那我也有安裝Element,那到底是要用哪個編輯呢
如果都儲存發佈的話兩邊會同步嗎
還是說可能會變成有的文章用到後台的編輯、有的文章又用到E的編輯
有的地方還是搞的很不清楚,似乎找不到合適的答案
嗨,新手cat,
WordPress 內建的頁面編輯器和 Elementor 的頁面編輯器並不衝突,
你可以在同一個頁面上同時使用這兩個頁面編輯器進行設計,但在彼此編輯中新增的區塊,並不能在另一邊進行編輯,
比如說,在 Elementor 新增的區塊,就無法在 WordPress 進行設計。
但這兩個是可在同一個頁面上使用的,你可以自行新增一個頁面測試看看唷!
謝謝犬哥回覆
不用客氣唷!
站長您好,
我目前所遇到問題是文章新增後,到前台觀看呈現方式會依分類秀出,而非全部文章在同一頁面.
請問這是哪邊需要做調整嗎?
謝謝您
嗨,欣微,
請問你有前往 WordPress > 設定 > 閱讀中,指派全部文章頁面嗎?
如果確定有指派頁面,可前往該頁面檢查,若還是有疑問,你可前往 FB 社團,貼上你的頁面截圖和告知我們你使用的主題,讓我們跟廣大網友更好幫助你唷!
站長您好!
感謝您的回覆,我後續的做法為在分類中增加母項ALL,把其他分類調為子項.
現階段的文章皆重新勾選為ALL>X CATEGORY,呈現畫面皆為ALL也有另外的子分類了~ 謝謝您! 🙂
嗨,不用客氣,也謝謝你分享你的解法,希望這能夠幫助到日後有同樣困擾的站長唷:)
站長您好:
我發布文章後,想用訪客的方式查看文章,點進網站卻沒有看見文章,請問該怎麼解決?謝謝🙏🏻
嗨,郭詠佳
請問你有發布文章,或是有透過正確的連結,進入閱讀前台文章嗎?
建議你可再多多檢查看看~