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文章 :新增清單功能
新增清單功能

接著用全選文字(反白),然後點設定錨點連結,使用 # 號加上英文,輸入完成後確認,或是按下 Enter 也可。

重複此動作,將其餘文字都設定獨特的網址連結。

WordPress文章 :新增錨點連結
新增錨點連結

設定完成應該會發現,清單上的文字都被加上連結了,如下圖。

WordPress文章 :清單連結設定完畢
清單連結設定完畢

接下來,新增幾個標題區塊和段落區塊,點選其中一個標題。

在側邊欄 區塊 分頁的 Html 錨點功能,輸入剛設定的連結(不加 # 號),讓彼此對應起來。

WordPress文章 :設定標題連結
設定標題連結

如此一來,就完成文章錨點設定囉,讓文章的閱讀力又上升了。


5. 文章設定

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

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

WordPress文章 :切換成內容分頁
切換成內容分頁

狀態和可見度

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

WordPress文章 :設定狀態和可見度
設定狀態和可見度

永久連結

設定文章的永久連結,有點像是幫文章取名字一樣(建議用英文命名,有助於網站 SEO ),如果沒看到網址設定欄位,可先點擊 儲存草稿 就可設定網址了

如果你的網址型式跟我不同,可能是你沒有更改 WordPress 預設值。

請前往 WordPress 設定 > 永久連結,更改為用「 文章名稱 」型式命名網址,這樣有助於 SEO 排名。可參考 永久連結設定 有詳細比較差異。

WordPress文章 :設定文章連結
設定文章連結

設定分類和標籤

將文章放置在指定分類下,可在這新增+設定分類,或是前往 WordPress 文章 > 分類,也能新增分類。

還有文章標籤功能,看自己需不需要使用。

WordPress文章 :新增文章分類和標籤
新增文章分類和標籤

設定精選圖片、內容摘要

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

內容摘要,這是在文章列表用來簡略顯示文章內容的,需搭配文章顯示方式是 內容摘要(WordPress 設定 > 閱讀,進行設定)。

或是用區塊編輯器的 閱讀更多 功能,都可以解決文章列表的文字過長問題。

設定封面圖片、內容摘要
設定封面圖片、內容摘要

文章討論

可調整是否開放留言,網站文章會建議開啟,可以增加與讀者的互動。

設定文章討論
設定文章討論

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


6. 設定 WordPress Seo

wordpress seo 網站優化

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

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

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

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

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


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

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

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

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

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

如果都確認沒問題,點擊 發佈 按鈕,就可順利發出「 WordPress文章 」囉。

由於我們剛把文章放置在指定分類下,所以需要把該分類放置在網站主選單上,這樣前台才能看得到。

接下來,我們繼續教學:)


8. 設定網站選單

剛剛我們已經將文章放置在某個分類中,現在需做的就是把該分類,放置在網站主選單中,如此一來才能在前台網站上看到。

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

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

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

WordPress文章 :將分類新增至選單中
將分類新增至選單中
  • 選單內容可用拖放排序位置,也可排父子層級。

回到前台網站,會發現主選單出現了剛新增的分類,點選前往也確實出現了剛新增的文章。

分類在網站上顯示成功
分類在網站上顯示成功

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


9. 設定網站首頁

WordPress文章 :設定網站首頁

WordPress 是個強大的網站管理系統,許多 WordPress 佈景主題預設的網站首頁,是採用部落格形式。

如果你剛照著上面教學,可能會發現目前的網站首頁和選單分類,重複出現了文章列表,我們需要做一些調整。

首先,我們需要設計一個網站首頁,請參考 WordPress 頁面教學 有示範如何製作頁面。

網站首頁製作完成後,只需進行一個設定,就能讓訪客搜尋主網域,直接看到首頁頁面。

設定網站首頁

前往 WordPress 設定 > 閱讀,切換成靜態頁面,然後選取你想設定的首頁頁面,完成後儲存設定。

設定網站首頁
設定網站首頁

如此一來,網站首頁就切換成你設計的首頁頁面囉,恭喜你。


10. 文章管理面板

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

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

WordPress文章 :管理全部網站文章
管理全部網站文章

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


WordPress 學習資源

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

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

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

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

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

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

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

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

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

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

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

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

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

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

關於作者

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

犬哥網站

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

在〈WordPress文章 :如何新增+編輯文章?(詳解+分類摘要)〉中有 20 則留言

  1. 小犬你好,在網站架設摸索初期很高興能夠遇見你的部落格,講解很詳細也易上手
    我目前遇到一個問題,編輯新文章的時候,發現背景出現:「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功能無法正常使用,頁首頁尾調整那些功能都沒有跑出來,期待您的解惑,謝謝

    1. 犬哥網站

      嗨,這似乎是 Astra 跟 Elementor(或你正在使用的頁面編輯器)有衝突

      可能需要聯絡這裡邊的客服來處理。

      或是停用其中一款,來觀察是哪一邊出現問題。

      相關參考文章

      可以試著還原網站看看: 還原外掛教學

      若無法還原,在詢問看看兩邊客服。

  2. 您好,不好意思
    我發現我的文章字體是偏黑粗體
    想改成跟貴站一樣的自型
    就透過檢查發現好像是 notosanstc-regular,Arial,sans-serif
    我就透過css去做更改
    然後好像沒有動靜….
    想請問有解嗎??

    1. 犬哥網站

      嗨,ANT,

      建議盡量不要動到 WordPress CSS ,

      現在更改字體已經有很多外掛可以幫助你,

      我們的網站使用的是 GooGle 思源黑體,在 Google 的字體外掛即可找尋到並且下載。

      Google Fonts 字體外掛

      希望有幫助到你唷!

    1. 犬哥網站

      嗨,roger,

      可以的,我們可以使用:頁面切換文章外掛 來幫助我們,將頁面轉換為文章。

      轉換完成後,停用 / 刪除外掛,並不會將文章轉換回頁面,所以可以依據需要,轉換完成後,停用 / 刪除外掛。

      也可以參考 內建的 WordPress 導出 / 導入功能 來轉換頁面和文章類型。

      最後,將頁面轉換為文章後,可以檢查一下永久連結的設定唷:)

  3. 犬哥站長您好
    想請教您2個問題哦~

    我看了這篇文章,將部落格做好分類了,我取名為 BLOG*

    問題1 .
    我希望可以點進「BLOG*」就出現一篇一篇有圖片的文章,幾行內文摘要,然後頁面有5篇以上文章,有側邊欄、留言等等的畫面

    現在的狀況是:

    我按下「BLOG*」也確實會出現我發佈的文章列表們,網名 name/category/blog/
    (但僅是列表,文章的名字和幾行內文文字)

    我需按下「read more…」之後,才會出現側邊欄, 日期, 留言區等等,
    但文章的頁面也只呈現一篇有圖片的完整文章
    (我希望是幾行內文文字即可,然後頁面有5篇以上的文章)

    這時候網名是 name/文章的名字

    請問我可以如何設定呢~
    我有想過是不是把「靜態首頁」指定為「BLOG*」
    不過我無法在「設定」、「閱讀」的地方找到「BLOG*」這個選項~

    呈上一個您回覆的

    問題2. 「頁面」可以用外掛將頁面改成文章列表的模式,
    那如果使用外掛後,之後陸續發文也可以如同「文章」的模式,保持外觀的樣子不變嗎?

    謝謝您耐心看完 ; )

    1. 犬哥網站

      嗨,antiquegirl,

      若是想要自定義 Blog 頁面樣式,你可以使用頁面編輯器,自行新增+設計一個頁面,再前往 WordPress > 閱讀,指派為文章頁面即可。

      相關教學,可以參考:使用 Astra 建立 Blog 教學

      關於第二個問題,不太明白你希望呈現什麼效果呢?

      如果之後都希望是文章的形式,那就直接新增文章就好囉:)

  4. 您好!請問該如何改變錨點的文字顏色呢?
    嘗試過改變文字顏色,但改變顏色的只有前面的標號,內文並沒有跟著改變!

  5. 想問說wordpress 後台本身就有頁面編輯器
    那我也有安裝Element,那到底是要用哪個編輯呢
    如果都儲存發佈的話兩邊會同步嗎
    還是說可能會變成有的文章用到後台的編輯、有的文章又用到E的編輯
    有的地方還是搞的很不清楚,似乎找不到合適的答案

    1. 犬哥團隊

      嗨,新手cat,

      WordPress 內建的頁面編輯器和 Elementor 的頁面編輯器並不衝突,

      你可以在同一個頁面上同時使用這兩個頁面編輯器進行設計,但在彼此編輯中新增的區塊,並不能在另一邊進行編輯,

      比如說,在 Elementor 新增的區塊,就無法在 WordPress 進行設計。

      但這兩個是可在同一個頁面上使用的,你可以自行新增一個頁面測試看看唷!

  6. 站長您好,
    我目前所遇到問題是文章新增後,到前台觀看呈現方式會依分類秀出,而非全部文章在同一頁面.
    請問這是哪邊需要做調整嗎?
    謝謝您

    1. 犬哥團隊

      嗨,欣微,

      請問你有前往 WordPress > 設定 > 閱讀中,指派全部文章頁面嗎?

      如果確定有指派頁面,可前往該頁面檢查,若還是有疑問,你可前往 FB 社團,貼上你的頁面截圖和告知我們你使用的主題,讓我們跟廣大網友更好幫助你唷!

      1. 站長您好!
        感謝您的回覆,我後續的做法為在分類中增加母項ALL,把其他分類調為子項.
        現階段的文章皆重新勾選為ALL>X CATEGORY,呈現畫面皆為ALL也有另外的子分類了~ 謝謝您! 🙂

        1. 犬哥團隊

          嗨,不用客氣,也謝謝你分享你的解法,希望這能夠幫助到日後有同樣困擾的站長唷:)

  7. 站長您好:
    我發布文章後,想用訪客的方式查看文章,點進網站卻沒有看見文章,請問該怎麼解決?謝謝🙏🏻

    1. 犬哥網站

      嗨,郭詠佳

      請問你有發布文章,或是有透過正確的連結,進入閱讀前台文章嗎?

      建議你可再多多檢查看看~

發佈留言

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

返回頂端