如何編輯 WordPress 網站? (簡單的分步指南)

已發表: 2021-10-03

多年來,WordPress 已經從一個博客平台發展成為一個完整的內容管理系統——現在互聯網上大約 42% 的網站都在使用它

雖然 WordPress 旨在成為一個易於使用的平台,任何人都可以創建和發布,但編輯任何 WordPress 網站仍然需要基本的技術知識

在本文中,我們將向您展示編輯 WordPress 的不同方法以及在 WordPress 網站上添加或更改內容的方法,即使您不知道如何編碼。 我們承諾讓事情變得簡單且對初學者友好。

讓我們開始吧!


學到更多

內容
  1. 編輯 WordPress 網站需要什麼
  2. WordPress 編輯基礎
  3. 如何使用塊編輯器(古騰堡)編輯 WordPress 網站
  4. 如何使用舊的經典編輯器編輯 WordPress 網站
  5. 如何使用頁面構建器編輯 WordPress 網站
  6. 如何編輯 WordPress 代碼
  7. 如何編輯 WordPress 主頁
  8. 如何在 WordPress 中編輯標題
  9. 如何在 WordPress 中編輯頁腳
  10. 如何在 WordPress 中編輯永久鏈接
  11. 如何在 WordPress 中編輯菜單
  12. 如何更改 WordPress 網站標題
  13. 如何編輯 WordPress 網站的移動版本
  14. 有用的 WordPress 快捷方式和技巧
  15. 編輯 WordPress – 摘要
  16. 常問問題

編輯 WordPress 網站需要什麼

在我們開始閱讀本指南之前,請確保您具備以下條件:

  • WordPress 網站管理員 URL(例如: yourwebsite.com/wp-admin/
  • 管理區域的登錄憑據
  • Gutenber(或 WordPress 經典編輯器)已安裝並可用
  • 頁面構建器(例如 Divi 或 Elementor),如果您想在前端編輯無代碼

完成所有這些後,打開管理 URL 並登錄到您的 WordPress 儀表板。

如何登錄WordPress:

  • 轉到您的 WordPress 登錄頁面(通常在 yourwebsite.com/wp-admin/
  • 使用您的用戶名或電子郵件地址和密碼登錄
  • 有時您也可以直接從 WordPress 託管儀表板登錄,而無需使用登錄憑據
WordPress登錄頁面
這就是標準 WordPress 登錄頁面的樣子。

成功登錄後,您將進入 WordPress 儀表板。

如果您不使用前端頁面構建器,WordPress 儀表板是進行 WordPress 編輯的地方。

WordPress儀表板
這就是默認 WordPress 儀表板的外觀。

成功登錄儀表板後,您可以開始編輯 WordPress 網站。

⚠️ 確保在編輯之前備份您的網站。 錯誤的編輯可能會導致意外問題,如果出現任何問題,最好準備好備份以恢復。

大多數優質的網絡託管公司(如 Kinsta)都提供自動備份。 如果您的託管服務提供商不是這種情況,您可以使用像 UpdraftPlus 這樣的備份插件。


立即免費試用

WordPress 編輯基礎

在本節中,我們將討論您在編輯 WordPress 網站時最有可能處理的基本 WordPress 元素。

這些元素是:

  • 帖子和頁面
  • 主題
  • 編輯

📄 帖子和頁面

WordPress上有兩種形式的內容:

  • 帖子
  • 頁面
WordPress 帖子和頁面
WordPress 帖子和頁面

WordPress帖子適用於動態和時間敏感的內容。 這些通常是博客文章。 但是,如果您願意,也可以將它們用於其他對時間敏感的內容,例如事件。

帖子按時間倒序顯示 - 最新的最先顯示。 帖子通常具有連接到它們的 RSS 提要和評論部分。

相比之下,WordPress頁面用於靜態內容。

主頁、聯繫我們、關於我們、隱私政策和其他類型的靜態頁面通常作為 WordPress 頁面上傳。

因此,當您編輯 WordPress 時,您編輯的是這兩件事之一——帖子或頁面。

您也可以在 WordPress 儀表板中進行編輯,但這些編輯通常具有技術性質。

⚡ 還要檢查:如何在 WordPress 中編輯頁腳


🎨 主題

WordPress 主題是一個控制 WP 網站整體設計的框架,在某些情況下會為網站添加額外的功能。

這種附加功能可能從無到令人印象深刻的豐富工具集。

在標準情況下,WordPress 預裝了默認的 WP 主題。

這些主題通常被賦予年份而不是名稱,例如“二十一二十一”:

二十一個 WordPress 主題
WordPress 默認主題二十一二十一

✏️ 編輯

當前默認的 WordPress 編輯器是 Gutenberg(也稱為 WordPress 塊編輯器)。

Gutenberg 於 2018 年推出 WordPress 5.0 版本。 它取代了以前的 WordPress 編輯器,現在稱為“經典”WP 編輯器(又名 TinyMCE)。

默認 WordPress 編輯器 - 古騰堡
這就是使用 Gutenberg 編輯 WordPress 網站的樣子。

一般來說,古騰堡非常直觀。 它基於塊,每個塊都是一個內容。

目前,有以下可用的古騰堡塊:

通用格式化佈局
段落桌子分隔器
標題代碼墊片
列表自定義 HTML 分頁符
引用預格式化鈕扣
圖片
畫廊引文更多的
聲音的經典的媒體和文字
視頻團體
文件可重複使用的塊
覆蓋

這就是其中一些塊的工作方式:

  • 段落塊
在 Gutenberg (WordPress) 中使用段落塊
這是在WordPress中編輯文本的方法
  • 按鈕塊
如何向 WordPress(古騰堡)添加按鈕
這是在 WordPress 中創建按鈕的方法

所以,是的,一切都非常用戶友好和直觀。


如何在 WordPress 中編輯頁面

在 WordPress 中編輯頁面非常簡單。

要使用 Gutenberg 在 WordPress 上添加和開始編輯新內容:

1.轉到 WordPress 儀表板中的帖子/頁面(或將鼠標懸停在上面)

在 WordPress 上添加新帖子

2.點擊“新增”

3.古騰堡編輯器將加載

4.在這裡您可以開始添加新內容

5.完成編輯後,您可以將帖子另存為草稿或發布:


要編輯 WordPress 網站上的現有內容:

1.轉到 WordPress 儀表板中的帖子/頁面

2.點擊帖子名稱或將鼠標懸停在上方並點擊“編輯”

3.古騰堡編輯器將加載

4.單擊您要編輯的任何內容並查找彈出的選項:

5.如果要添加新元素(塊),請單擊加號圖標(或鍵入 /)並選擇要添加的內容:

6.大多數塊在右側邊欄中都有進一步的自定義選項:

7.自定義事物直到你得到你想要的最終輸出

因此,這是在 WordPress 上進行編輯的基本概述。 現在讓我們進入細節。


如何使用塊編輯器(古騰堡)編輯 WordPress 網站

要使用新的 Gutenberg 塊編輯器編輯 WordPress 站點中的任何帖子或頁面,請導航到 WordPress 儀表板中的帖子/頁面>添加新內容。

在 WordPress 上添加新帖子

您還可以從帖子/頁面打開任何現有的帖子/頁面進行編輯。

在 WordPress 上編輯現有帖子

現在在頁面編輯屏幕上,您可以開始添加(或編輯)內容。

WordPress html 編輯器

首先,單擊添加標題欄並輸入您想要的頁面標題。 對於現有內容,您可以通過單擊以完全相同的方式編輯標題。

如何編輯wordpress網站

接下來,單擊回車(將您帶到標題後的第一行)並開始輸入以添加您想要的內容。

如前幾節所述,古騰堡中的每個元素都稱為一個塊(這就是名稱為“塊編輯器”的原因)。 如果要編輯或自定義塊,可以單擊它並從側邊欄中選擇設置。

如何在wordpress中編輯頁面

默認情況下,所有塊都可以使用其他自定義設置(例如字體大小、首字下沉和段落塊的字體顏色等排版設置)。

要將圖像添加到頁面,請單擊加號圖標,然後從彈出窗口中選擇圖像塊。

WordPress塊編輯器

您還可以通過單擊加號圖標並使用左側邊欄的搜索字段來添加其他內容元素。

古騰堡塊

對頁面內容感到滿意後,單擊“發布”按鈕,您的頁面將立即生效。

注意:您可以單擊“預覽”選項(在頂部欄中)以檢查頁面在移動設備、平板電腦和台式機上對網站訪問者的外觀。


如何使用舊的經典編輯器編輯 WordPress 網站

這個經典的 WordPress 編輯器由 TinyMCE JavaScript 軟件提供支持,該軟件支持編輯器的自定義選項。

TinyMCE 是一個基於 Web 的編輯器和一個使用 HTML 和 JavaScript 構建的開源平台。

🔔注意

在介紹 Gutenberg 之後,如果您想使用 Classic 編輯器,您需要將其作為插件啟用。

或者,您可以使用名為 Classic 的 Gutenberg 塊。 它是相同的經典 TinyMCE 編輯器,但採用塊的形式。

現在要使用編輯器,您可以轉到 WordPress 儀表板,並添加新帖子或頁面。

WordPress 所見即所得編輯器

WordPress 編輯器是頁面的主要焦點,您可以從中控制最終發布頁面外觀的幾乎所有方面。

您可以使用經典編輯器自定義一些內容:

  • 標題標籤——H1、H2、H3 等等……
  • 字體樣式——粗體、斜體和刪除線
  • 列表- 項目符號和編號
  • 元素對齊
  • 文本和背景顏色
  • 媒體——圖像、視頻等。

經典編輯器還支持自定義樣式,因此您幾乎可以自定義任何內容,包括頁面及其元素的設計和行為。

經典的 WordPress 編輯器旨在保持一切簡單且僅用於基本內容。 相比之下,Gutenberg 和第三方 WordPress 編輯器(例如 Divi 或 Elementor)將 WordPress 頁面構建體驗提升到了一個全新的水平,您可以使用它們來創建幾乎任何類型的佈局。

此外,借助高級 WordPress 頁面構建器插件,您可以在頁面(這稱為前端)上實時構建,而不是在 WordPress 儀表板(後端)上構建並在編輯器和預覽之間不斷切換。


如何使用頁面構建器編輯 WordPress 網站

較新版本的 WordPress 附帶的新古騰堡塊編輯器非常適合博客文章和基本頁面佈局。 但它並非旨在構建高級和更複雜的頁面,例如具有專業外觀的主頁或開箱即用的複雜登錄頁面。

因此,您可以利用頁面構建器

WordPress 頁面構建器是允許您以您喜歡的方式構建和設計 WordPress 帖子和頁面的工具,而無需任何編碼知識

大多數頁面構建器都提供前端編輯,讓您可以使用拖放內容元素實時構建頁面。

他們稱為所見即所得所見即所得)的建造

所見即所得模式使編輯 WordPress 博客和頁面變得輕而易舉!

兩個最受歡迎的 WYSIWYG WordPress 頁面構建器是ElementorDivi

現在讓我們看看您如何使用這些頁面構建器來編輯您的 WordPress 網站……

元素

Elementor 是一個非常流行的 WordPress 頁面構建器,擁有超過 500 萬用戶。 您可以使用 Elementor 創建頁面、編輯主題並構建具有精美設計的完整網站——所有這些都無需觸及任何一行代碼。

使用 Elementor 編輯 WordPress

要開始使用 Elementor 進行編輯,請轉到 WordPress 儀表板中的插件>添加新內容,然後在搜索欄中搜索 Elementor。 然後單擊立即安裝激活

在 WordPress 中安裝 Elementor

你也可以在這裡免費獲得 Elementor。

然後轉到頁面並添加新頁面或打開現有頁面。

現在單擊使用 Elementor 編輯以開始在頁面構建器中編輯頁面。

使用 Elementor 進行編輯

您可以單擊加號圖標添加一行,然後只需將任何內容小部件從左側邊欄中拖放到右側。

Elementor 內容小部件

要修改或添加任何內容,您可以單擊文本並開始輸入。

要對其進行風格化,您可以在側邊欄樣式選項卡中選擇不同的設置。

Elementor 樣式設置

您可以向頁面添加任意數量的內容小部件。

所有小部件都支持多種自定義選項,例如排版、邊距/填充、顏色、陰影、邊框、背景顏色和動畫。

完成頁面編輯後,您可以發布它或將其保存為草稿以便稍後發布。

元素發布

觀看此視頻以了解有關 Elementor 的更多信息以及您可以使用這個強大的頁面構建器做什麼……


立即獲取

迪維生成器

Divi 是另一個超級流行的 WordPress 構建器,擁有超過 700,000 多個用戶的社區。 它是一個頁面構建器,具有無窮無盡的自定義選項、高級功能和數百種漂亮的預建佈局

Divi-WordPress

與 Elementor 不同,Divi 是一個高級頁面構建器。 Divi Builder 沒有免費版本。 但是 Divi 提供了一個免費的瀏覽器內現場演示,可以在這裡訪問。

要使用 Divi Builder 編輯您的網站,請訪問 Elegant Themes 網站並下載 Divi 主題文件(其中也包括 Divi Builder)。

現在在您的 WordPress 儀表板中,導航到插件>添加新插件,然後單擊頂部的上傳插件。 選擇下載的 Divi zip 文件,然後單擊立即安裝

之後,您可以進入任何頁面並單擊使用 Divi Builder按鈕進入編輯屏幕。

在下一個屏幕中,您可以選擇從頭開始構建頁面的選項,也可以選擇 Divi Builder 免費提供的任何預構建模板。

之後,您可以單擊加號圖標添加所需的任何行、列或內容元素並開始編輯。

分區編輯器

要編輯任何小部件的內容,您可以選擇它,然後在設置彈出窗口中編輯所有內容。

Divi頁面生成器

Divi 包括鏈接、顏色、間距、陰影、過濾器、動畫和滾動效果的多個選項。

完成所有更改後,您可以單擊右側的保存按鈕。

觀看此視頻,了解使用 Divi Builder 編輯 WordPress 頁面的難易程度……


立即獲取

如何編輯 WordPress 代碼

要在您的 WordPress 網站中編輯代碼,請按照以下步驟操作……

在 Gutenberg(塊編輯器)中編輯 WordPress HTML

在 Gutenberg 編輯器中,您可以添加一個專用的 HTML 塊,您可以在其中編寫頁面內的所有 HTML 代碼,或者編輯整個頁面的 HTML(如果您不熟悉 HTML 的基本語法,這可能會稍微複雜一些)。

首先,單擊加號圖標並查找自定義 HTML 塊。 然後在框中寫入所有的 HTML,這些 HTML 將應用到頁面的前端。

WordPress HTML塊

要編輯整個頁面的 HTML,請單擊右側邊欄上的菜單圖標,然後選擇代碼編輯器。

如何在wordpress中編輯代碼

這是在 WordPress 中編輯代碼的方法。 在這裡您可以編寫或修改頁面的所有 HTML。

請記住,您必須在代碼編輯器中使用正確的塊標記編寫所有內容。 否則,頁面將遇到問題。

使用 WordPress HTML 編輯器編輯源代碼

如果您想直接編輯主題代碼,您可以訪問主題編輯器並在主題文件中進行所有修改。

要訪問主題編輯器,請轉到外觀>主題編輯器

在這裡,WordPress 會給你警告,以確保你沒有編輯任何關鍵的主題文件。

WordPress如何編輯主頁

只需單擊我了解,然後從右側選擇要編輯的文件。

🔔注意:

在主題編輯器中進行任何更改並在 WordPress 中編輯代碼之前,請先備份完整的網站。 如果您不確定如何編輯代碼,最好聘請 WordPress 專家,因為這裡的任何錯誤都可以輕鬆破壞您的 WordPress 網站。


如何編輯 WordPress 主頁

主頁是網站的首頁。 這是當有人訪問網站 URL 時打開的第一個頁面。

默認情況下,所有博客文章都按時間倒序顯示在每個 WordPress 網站的主頁上

但是您可以更改此設置並將任何自定義頁面設置為主頁以顯示您需要的內容。

如何在 WordPress 上設置首頁:

  1. 轉到 WordPress 儀表板中的設置>閱讀
  2. 然後單擊“靜態頁面”選項並從下拉列表中選擇要設置為主頁的頁面。
  3. 單擊“保存更改”,您就完成了!
WordPress 自定義頁面

現在要編輯主頁,導航到外觀>自定義

如何編輯 WordPress 網站

在定制器中,您可以單擊鉛筆圖標來編輯您想要的任何元素,並且所有 WordPress 主頁編輯都將在實時預覽中,在這種情況下,您可以在發布頁面之前查看所有內容。

主頁完成後,單擊側邊欄中的發布,新主頁將上線。

編輯 wordpress 主題

🔔重要提示

在 WordPress 主題定制器中編輯主頁的能力取決於您使用的主題。 一些高級主題(例如 Divi)提供了無窮無盡的自定義選項,而免費主題中您不會獲得很多功能。

換句話說,使用基本的 WordPress 主題/編輯器並且沒有編碼技能,很難使您的頁面看起來完全符合您的要求。

要了解有關如何在 WordPress 上編輯主頁的更多信息,請在此處查看我們的文章。 (是的,我們有整篇文章 😎)。


如何在 WordPress 中編輯標題

編輯 WordPress 標題主要取決於您的主題(或頁面構建器)提供的自定義選項。

高級主題通常提供一種用戶友好的方式,使您的標題看起來完全符合您的要求。

因此,第一個選項是檢查您當前的主題是否具有編輯 WordPress 標題的內置方式。

例如,Divi 主題提供了一個名為 Theme Builder 的工具,它允許以無代碼方式構建大量不同的東西,包括定制設計的 WordPress 標題:

Elementor 提供了一個主題生成器,也可以自定義 WordPress 標題:

因此,使用主題構建器可能是目前編輯 WordPress 標題的最適合初學者(和用戶友好)的方式。

如果沒有主題構建器(或替代的內置功能)之類的東西,您很可能不得不處理代碼。

編輯 WordPress 標頭的其他方法是:

  • 使用獨立插件(可能需要編碼)
  • 在 WordPress 主題編輯器中編輯主題的header.php文件(需要編碼)

⚡ 還要檢查:如何在 WordPress 中更改鏈接顏色


如何在 WordPress 中編輯頁腳

編輯 WordPress 頁腳比編輯頁眉要容易一些。 這主要是因為頁腳是 WordPress 網站上的標準小部件,並且有一些易於使用的內置工具來編輯 WordPress 中的頁腳。

以下是自定義 WordPress 頁腳的方法:

  • 通過轉到外觀 > 自定義 > 小部件
WordPress 定制器菜單
  • 通過直接轉到Widgets
小部件 WordPress
  • 使用主題生成器(Divi、Elementor、Beaver Builder)
  • 編輯footer.php文件(需要編碼)

查看我們關於編輯 WordPress 頁腳的文章以獲取更多信息。


如何在 WordPress 中編輯永久鏈接

永久鏈接只是您的 WordPress 帖子和頁面的永久 URL。

示例: https ://siteefy.com/how-to-edit-wordpress-site/

這是這篇文章的永久鏈接。

默認的 WordPress 永久鏈接結構基於頁面/帖子的名稱和頁面/帖子的發布日期。

但這很容易改變。

以下是如何更改 WordPress 上的默認永久鏈接結構:

  • 轉到設置>永久鏈接
如何在 WordPress 中編輯永久鏈接
  • 選擇您想要的永久鏈接結構,然後單擊Save Changes
永久鏈接設置 WordPress

要更改單個帖子/頁面的永久鏈接,請查看 Gutenberg 的右側邊欄選項:

在 WordPress 上編輯 URL Slug

在 WordPress 經典編輯器中,此選項位於頁面/帖子標題下方


如何在 WordPress 中編輯菜單

在 WordPress 中編輯菜單很簡單:

  • 轉到外觀 > 菜單
如何在 WordPress 中編輯菜單
  • 進行所需的所有更改,然後單擊Save Changes
編輯 WordPress 菜單

如何更改 WordPress 網站標題

您可以在兩個地方更改您的 WordPress 網站標題:

  • 定制器
  • 設置

讓我們看看每個選項。

如何在定制器中更改您的 WordPress 網站標題:

  • 轉到外觀 > 自定義
主題定制器
  • 接下來單擊站點標識
如何在定制器中更改您的 WordPress 網站標題
  • 進行編輯並單擊發布
更改 WordPress 網站標題

如何在設置中更改您的 WordPress 網站標題:

  • 轉到設置 > 常規
如何在設置中更改您的 WordPress 網站標題
  • 更改您的站點標題,然後單擊Save Changes

如何編輯 WordPress 網站的移動版本

有兩種適合初學者的方式來編輯 WordPress 網站的移動版本:

  • 在 WordPress 定制器中
  • 使用頁面構建器

讓我們看看這兩個選項。

如何使用定制器編輯 WordPress 網站的移動版本:

  • 轉到外觀 > 自定義
主題定制器
  • 查看側邊欄底部的選項:
如何使用 Customizer 編輯移動版 WordPress 網站
  • 在台式機、平板電腦和智能手機選項之間切換,以查看您的網站在不同設備上的外觀並進行編輯。

如何使用頁面構建器編輯 WordPress 網站的移動版本:

  • 使用 Divi 響應式編輯:
  • Elementor 響應式編輯:
  • 大多數其他 WordPress 頁面構建器也提供響應式編輯。

有用的 WordPress 快捷方式和技巧

捷徑視窗蘋果電腦
查看所有快捷方式的完整列表Shift + Alt + H Ctrl + 選項 + H
保存更改Ctrl + S Cmd + S
複製一個塊Ctrl + Shift + D Cmd + Shift + D
刪除塊Alt + Shift + Z Ctrl + 選項 + Z
插入鏈接Ctrl + K Cmd + K
複製塊/文本Ctrl + C Cmd + C
粘貼塊/文本Ctrl + V Cmd + V
下移不換行Shift + Enter Shift + Enter
切換到代碼編輯器(古騰堡) Ctrl + Shift + Alt + M

⚡ 還要檢查:如何在 WordPress 中證明文本的合理性

其他有用的 WordPress 編輯技巧:

  • 要插入圖像,您只需將它們從 PC 拖放到 Gutenberg,而無需使用媒體庫。 複製和粘貼也可以。
  • 要無干擾地工作,請查看 Gutenberg 的 Spotlight 和 Fullscreen 模式(要查看這些選項,您需要單擊右上角的三個點):
古騰堡聚光燈和全屏模式
  • Gutenberg 中的文檔大綱功能非常有用。 它顯示了文章中使用的單詞、字符、標題、段落和塊的數量以及整個文檔大綱。
古騰堡的文件大綱
  • 從 Google Docs 複製到 Gutenberg 是一件輕而易舉的事 - 只需複制和粘貼,一切看起來都非常整潔乾淨。

編輯 WordPress – 摘要

正如我們在這篇文章中所討論的,您可以使用新的 Gutenberg 塊編輯器來編輯您的 WordPress 網站,或者嘗試功能強大但非常易於使用的 WordPress 頁面構建器。 您甚至可以使用 Gutenberg 塊編輯任何頁面的 HTML。

總體而言,WordPress 是一個強大的內容管理系統,對如何編輯頁面和代碼沒有特別限制,從而可以更好地控製網站。

按照上面列出的步驟,您應該能夠非常快速地開始學習 WordPress,並且還能夠對您的新 WordPress 網站進行所需的所有初始編輯。

如果您對本指南有任何疑問(或者如果您希望我們對其進行擴展並涵蓋有關編輯 WordPress 網站的更多問題),請在下面的評論中告訴我們。


常問問題


🔔還檢查:

  • 如何在 WordPress 中對齊文本
  • 如何在 WordPress 中更改鏈接顏色
  • 如何在 WordPress 頁面中添加博客文章
  • WordPress:如何刪除“留下回复”
  • 如何製作網絡漫畫網站
  • 如何在 WordPress 中編輯頁腳
  • 如何編輯 WordPress 主頁
  • 為什麼 WordPress 這麼難用?
  • WordPress 可視化編輯器不工作