• 主頁
  • 文章
  • 指導
  • 您如何編輯 WordPress 的終極指南——HTML、CSS、PHP、JavaScript

您如何編輯 WordPress 的終極指南——HTML、CSS、PHP、JavaScript

已發表: 2021-04-05

WordPress 作為最常用和用戶友好的平台之一，在上一年的 CMS 市場份額接近 61.8%，並且持續增長。 這導致非常需要學習如何編輯 WordPress HTML 和更改功能齊全的 WordPress 網站中的其他技術。

編輯您的 WordPress 網站的需要可能由於不同的原因而出現，包括任何惡意軟件、更新任何插件或 WordPress 版本，或簡單的網站崩潰。 在某些情況下，輕微的網站定制可能會對您有所幫助； 但是，在大多數情況下，您需要編輯 WordPress HTML 或 WordPress 中的源代碼。

本文為您解答如何在 WordPress 網站中編輯源代碼以及如何在 WordPress 中編輯 HTML 等問題。 在繼續之前，讓我們弄清楚為什麼編輯 WordPress HTML 和源代碼很重要。

相關：如何輕鬆地將 jQuery 腳本添加到 WordPress

WordPress 編輯 – 為什麼

開發網站的主要目的是改善您的在線形象和與客戶的互動。 此外，擁有 WordPress 網站使日常功能、管理和性能變得容易。 但是，在某些情況下，您可能需要通過編輯 WordPress HTML 或編輯 WordPress 源代碼來改進 WordPress 功能。

學習如何通過編輯 HTML 和其他源代碼來編輯 WordPress，有助於確保正常運行、足夠的安全性和持續的連接性。 更新 WordPress 網站可幫助企業實現更好的控制並在網站上執行高級自定義。

從 WordPress 的微小變化到編輯 HTML 和升級主題，再到檢查和維護安全和託管服務，WordPress 編輯包括所有這些。 深入了解為什麼 WordPress 網站維護至關重要。

現在，事不宜遲，讓我們開始討論如何編輯 WordPress 網站。 首先，我們將詳細了解如何在 WordPress 網站中編輯 HTML。

在 WordPress 網站中編輯源代碼的步驟

更新 WordPress 網站主要包括編輯網站的源代碼，而不僅僅是編輯 HTML。 當使用不同的功能和編程語言來設計、構建和維護一個 WordPress 網站時，它就會組合在一起。

這也強調了對 WordPress 進行順序監控和管理以確保更新的重要性，因為它最終會提高網站的性能和功能。 讓我們繼續學習如何在 WordPress 網站中編輯源代碼。

WordPress 網站的源代碼包括用 CSS、PHP 和 JavaScript 編寫的代碼，分別滿足設計功能和性能。 不能說在開發 WordPress 網站時哪個不那麼重要。 但是，我們可以告訴您如何編輯它們以改善您的 WordPress 網站的整體外觀。

可以通過訪問您網站的主題編輯器中的文件來編輯 WordPress 網站中的源代碼。 但是，您可以通過兩種方式訪問這些文件。 第一，使用 WordPress 主題編輯器，或者第二，使用文件傳輸協議 (FTP)

使用 WordPress 主題編輯器編輯 WordPress 源代碼

WordPress 網站中的主題編輯器用作內置網站編輯器，可讓您修改主題文件。 編輯器允許訪問所有 CSS、PHP、JavaScript 和所有其他與主題相關的文件。

專業提示：在開始在 WordPress 中編輯您的主題和源代碼之前，請確保為您的網站創建備份，以免您遇到任何麻煩。

在對您的主題進行編輯時，我們建議您創建一個子主題並在其中進行所需的更改。 它使您免於更新 WordPress 網站後通常出現的主題覆蓋問題。 現在讓我們開始了解如何訪問主題編輯器

如何訪問主題編輯器

首先，您永遠不能編輯您的主題文件，除非您不知道它們的位置。 如果您知道如何訪問主題編輯器，請向下滾動到下一個標題，但如果您不知道，請繼續閱讀。

訪問主題編輯器需要訪問您網站的後端。 瀏覽網站的構建站點後，單擊 WordPress 網站側邊欄中的“外觀”選項卡，您將看到一個下拉菜單，最後顯示主題編輯器選項。

單擊選項卡會打開當前運行主題的 CSS 文件。 在這裡，您可以在 WordPress 網站的外觀中進行所有設計編輯。 如果您使用多個主題或父子主題的組合，您可以從顯示主題名稱的右上角下拉選項中切換它們。

專業提示：更新完 WordPress 網站後，請按底部的“更新文件”按鈕以保存更改。 但是，如果您無法保存更改，則您添加的代碼中可能存在一些錯誤。

WordPress 使其成為更新 WordPress 源代碼的更好選擇的突出功能之一是，如果更改包含錯誤，它不允許您保存更改。 此功能使編輯 WordPress 比使用 FTP 更安全。

注意：在某些情況下，您可能無法訪問主題編輯器。 如果發生這種情況，您必須這樣做；

  • 在您的文件中查找特定於主題的代碼編輯器。 WordPress 中的幾個主題對主題編輯器的使用不同，這也會影響可見性和功能。
  • 搜索您可能正在使用的任何安全插件和檢查，這些插件和檢查導致“隱藏”主題編輯器選項，以更好地抵禦入侵者。

使用主題編輯器編輯 WordPress JavaScript 文件

JavaScript 有助於提高網站的響應能力和性能。 懸停在按鈕上時改變大小或顏色，單擊按鈕時打開下拉菜單，都是因為 JavaScript 在後面。

在大多數情況下，WordPress 主題與託管在不同服務器中的 JavaScript 文件很好地結合在一起，並使用“調用”功能​​包含在主題中。 這些稱為外部 JS 文件，有時也使用您網站中的第三方插件添加。

但是，您可以編寫自己的 JavaScript 文件並將其添加到主題中，並通過主題編輯器訪問它們。 一般來說，使用 JavaScript 文件，無論是第三方的還是自己編寫的，都需要你在想使用的地方使用調用函數，想用多少次就用多少次。 以下調用函數用於將 JavaScript 文件合併到代碼中。

<script type=”text/javascript” src=”path-to-javascript-file.js”></script>

使用 <script> 標記將 JavaScript 文件添加到源代碼文件中。

專業提示：確保在 html 文件中的 <head> 和 </head> 標記之間包含 <script> 標記，否則文件會導致錯誤。

手動使用 JavaScript 編輯 WordPress 網站

您可以在相應文件中使用相同的調用函數來編輯 WordPress 網站頁眉和頁腳的源代碼。 這些文件通常以 .php 擴展名保存，並且可能位於主題編輯器中的主題文件中。

一些第三方工具或功能通常需要網站開發人員在 WordPress 網站頁眉和/或頁腳中添加 JS 源代碼。 為此，添加代碼與上面提到的完全相同。 在 <head> 標記之間使用 <script> 調用 JS 文件。

獎勵：如果找不到開始 <head> 標記，只需按 Control + F 並在搜索欄中輸入“head”。

在某些情況下，您可能需要編輯單個頁面或帖子的 JavaScript，而不是整個頁眉或頁腳。 為此，您首先需要創建或使用預先開發的 Javascript 文件並將其添加到您的 WordPress 主題文件中。 其次，從要編輯的頁面或帖子中調用文件。

在WordPress的post/page中Incorporate JS的調用功能略有不同，需要一系列步驟。 因此，要通過自定義字段調用 WordPress 頁面/帖子中的 JavaScript 文件，您可以按照以下步驟操作；

  1. 打開您的塊編輯器，然後單擊右上角的三個垂直對齊的點。 這將打開一個下拉菜單。
  2. 從下拉菜單中，單擊末尾的“選項選項卡”，這將打開一個包含多個選項的小部件。
  3. 選項小部件打開後，向下滾動到“高級面板”並選中“自定義字段”框。
  4. 現在您會看到一個可以在帖子編輯器下方添加自定義字段的空間。
  5. 在值字段中添加您的 JS 片段，為您添加的 JS 代碼提供自定義名稱，完成編輯後，單擊“添加自定義字段”進行保存。

使用插件編輯 WordPress

更新或編輯 WordPress 網站的源代碼有時會非常費勁。 為此，您可以使用自動更新頁眉和頁腳功能的插件。 此外，使用插件更有效，因為即使在每次 WordPress 更新後它也會保留您所做的更新。

WordPress 提供各種免費和付費插件來編輯您的頁眉和頁腳文件，從而提供更好的網站支持和整體性能。

另一種有效的方法是聘請 WordPress 維護服務提供商。 服務提供商不僅可以幫助您輕鬆進行編輯和更新，還可以提高您網站的整體性能、安全性等。

在 WordPress 網站中編輯 CSS 源代碼

CSS 是 Cascading Style Sheet 的縮寫，基本上負責 WordPress 網站的所有樣式和設計。 在您的網站中編輯 CSS 文件是指更改您網站中的小部件、按鈕和文本字段的顯示方式。

在 WordPress 文件中編輯 CSS 文件或多或少類似於在 JavaScript 文件中進行更新。 儘管有三種基本方法可以更改 CSS 文件； 但是，它們的可用性會根據您所做的更改以及更改的頻率而有所不同。

使用主題編輯器編輯 WordPress CSS

在您的 WordPress 網站中編輯 CSS 文件的一種常用且簡單的方法是以上述相同的方式使用主題編輯器。 您可以在所有主題文件所在的最右側訪問所有 CSS 文件。

使用 WordPress 定制器編輯 WordPress CSS

外觀小部件中的主題編輯器選項稍上方是另一個選項，上面寫著“自定義”。 WordPress 還允許您使用此 WordPress 定制器修改您的 WordPress 網站。

單擊“自定義”選項後，在導航面板上向下滾動，然後單擊左下角的“附加 CSS”選項卡。 這將打開一個小型 CSS 編輯器，支持對 CSS 代碼進行輕微或微小的更改。 完成後，單擊保存並繼續使用您的網站。

使用插件編輯 WordPress CSS

如果您打算避免手動更改 WordPress 網站的 CSS，下載一些有用的插件可以為您解決問題。 如果您是 CSS 知識有限或優先考慮定期更新的人之一，那麼使用插件是您的最佳選擇。

有一系列 CSS 編輯插件可用於對 WordPress 網站進行所需的更改。 安裝網站後，您需要做的就是將插件安裝到您的 WordPress 網站，輸入您的許可證密鑰，然後開始編輯。

使用 FTP 在 WordPress 網站中編輯源代碼

如前所述，使用文件傳輸協議 (FTP) 是除主題編輯器之外的另一種編輯 WordPress 網站的方法。 此方法實際上可以通過使用任何 FTP 客戶端（例如 WinSCP）來工作。 使用這些第三方工具的主要原因是能夠訪問 WordPress 網站的服務器和存儲在那裡的文件。

當您無法訪問主題編輯器是您的 WordPress 網站或對 WordPress 進行 PSD 工作時，使用 FTP 客戶端編輯源代碼會派上用場。 使用這種編輯方法有助於在本地更新文件，然後將這些文件重新上傳到您網站的託管環境。

聽起來可能很可怕，但整個過程只需要四個步驟，讓我們開始了解該做什麼以及如何做。

第 1 步：登錄或創建您的 FTP 帳戶

第一步，要通過 FTP 客戶端連接到您的 WordPress 網站服務器，您需要使用您的帳戶憑據（包括主機名、用戶名和密碼）登錄到您的 FTP 帳戶。 您可以從您的託管帳戶中找到憑據信息。

如果您找不到您的登錄信息，您可以在您網站的 cPanel 中創建一個新的用戶名和密碼。 要訪問您的 cPanel，請單擊“文件”選項卡中的“FTP 帳戶”。

單擊此圖標後，選擇添加 FTP 帳戶以添加新的用戶名和密碼。

創建新的登錄憑據需要您完成所有提到的字段。

  • 確保為您的 FTP 帳戶添加一個唯一但相關的用戶名。
  • 在字段中輸入您的用戶生成或自動密碼。 確保您的密碼強度高。
  • 確保在您的目錄擴展中使用 public_html。
  • 並且，從兩個給定選項中為您的配額選擇無限制。

專業提示：確保複製/粘貼您的 FTP 憑據並將其保存在安全的地方。 此外，我們建議使用自動密碼生成器來生成強密碼和自定義密碼。

單擊“創建 FTP 帳戶”，您就完成了。 如果您無法創建 FTP 帳戶，聯繫您的託管服務提供商可能會有所幫助。

第 2 步：下載您的 FTP 客戶端

完成登錄 FTP 憑據或創建新憑據後，下一步是下載 FTP 客戶端，如 WinSCP。

WinSCP 是適用於 Windows 的頂級免費 FTP 解決方案之一，支持在您的設備和託管服務器之間輕鬆快速地傳輸文件。 根據您的業務需求和網站，除了 WinSCP 之外，還有許多 FTP 客戶端可供選擇。

第 3 步：登錄網站託管環境

現在，使用您下載的 FTP 客戶端（在本例中為 WinSCP），通過輸入步驟 1 中的 FTP 主機名、用戶名和密碼登錄到您的 WordPress 網站的託管環境。

為此，按下啟動 WinSCP，您將在前面看到一個對話框。 選擇您的文件協議並分別在字段中添加您的 FTP 主機名、用戶名和密碼。 完成後，單擊登錄，您終於進入了託管環境。

專業提示：如果您使用的是 FTPS 協議，請選擇 FTP，然後選擇一種 FTPS 調用方法。

第 4 步：編輯源代碼文件

登錄後，您可以訪問您的 WordPress 源文件，並可以根據需要進行 HTML、CSS、PHP 和 JS 編輯。 只需右鍵單擊任何文件並選擇查看/編輯。

進行更改後（再次注意不要對您的網站進行白屏），您可以保存文件。 WinSCP 會自動重新上傳您編輯的所有文件並用新文件替換它們。

恭喜，您已完成 WordPress 網站上的源代碼文件編輯。

如何在 WordPress 網站中編輯 HTML 的基礎知識

雖然更新 WordPress 網站可能包括從小到大的更改，但升級網站的外觀和結構需要在 WordPress HTML 中進行編輯。 儘管更改 HTML 比 WordPress 中的其他技術更改相對容易，如下所述，但學習如何訪問 WordPress 網站中的 HTML 代碼仍然很重要。

有幾種方法可以訪問 HTML 文件並編輯 WordPress HTML 以升級網站的佈局。 讓我們詳細看看每一個。

通過 WordPress 經典編輯器編輯 HTML

在 WordPress 中編輯 HTML 的最簡單和最易於訪問的方法之一是訪問 WordPress 文件中的經典編輯器並單擊一個按鈕。 打開右上角的 WordPress 頁面，您會看到兩個標籤，分別是視覺標籤和文本標籤。 要在 WordPress 中編輯 HTML ，您只需從可視化編輯器轉到文本編輯器。

切換選項卡後，您將看到頁面的詳細 WordPress HTML 文件，您可以在其中對 WordPress 頁面進行所需的更改。 此外，您始終可以切換到可視化編輯器來查看您所做的 WordPress HTML 編輯。

專業提示：確保在您完成編輯所需頁面或帖子上的 WordPress HTML 文件後單擊保存按鈕。

如何使用塊編輯器在 WordPress 中編輯 HTML

使用塊編輯器在 WordPress 中編輯 HTML 與經典編輯器略有不同； 從可視化編輯器切換到文本編輯器需要更多步驟。 在 WordPress 的塊編輯器中，編輯 HTML 首先需要您單擊編輯器右上角的三個垂直點。

這會產生一個下拉菜單，您可以在其中選擇“代碼編輯器”選項。 單擊此選項卡後，該站點將打開 WordPress HTML 編輯器。 現在，要從可視化編輯器切換到給定塊的文本編輯器，請單擊塊菜單欄中的三個垂直點。

從下拉列表中，選擇“編輯為 HTML”以對您指定的塊進行相關更改。

在 WordPress 網站中編輯 HTML 的另一種方法是使用自定義 HTML 塊。

自定義 HTML 塊允許編輯器直接在指定塊中添加您選擇的 HTML 代碼。 通過右側的“預覽”按鈕，用戶還可以查看已編輯的 WordPress HTML。

專業提示：請記住在 WordPress 網站中完成 HTML 編輯後保存您的工作。

人們經常遇到的一個非常常見的查詢涉及在 WordPress 主頁上編輯 HTML。 讓我們學習如何做到這一點

編輯 WordPress 網站主頁的 HTML

在您的網站主頁上編輯 HTML 代碼有兩種方便的方式。 如果您的 WordPress 網站是建立在主頁作為單獨頁面的主題上，則編輯其 HTML 的過程與上述兩種方法相同。

只需從您網站的儀表板中選擇主頁，然後開始在您的 WordPress 網站中編輯 HTML。

其次，您還可以單擊主頁頂部菜單塊上的“編輯頁面”選項卡以訪問經典或塊編輯器。

獎勵：如果這些 WordPress HTML 編輯選項都不適合您，那麼就您的主頁而言。 您可以為您的 WordPress 網站使用帶有內置主頁編輯選項的頁面構建器或主題。

如何在 WordPress 網站小部件中編輯 HTML

當談到使用 HTML 進行 WordPress 編輯時，他們的肯定要多得多。 除了頁面和帖子之外，在 WordPress 網站的小部件中編輯 HTML 也是一個經常被問到的“如何在 WordPress 中編輯 HTML”的問題。

WordPress 網站中的多個主題使用小部件（包括側邊欄、頁眉和頁腳）來自定義和編輯 WordPress。 自定義 HTML 小部件支持在 WordPress 網站的頁眉、頁腳和側邊欄中編輯 HTML。

要訪問此小部件，只需導航到您網站側邊欄上的“外觀”選項卡，然後選擇您希望在其中編輯 HTML 的小部件。在那裡添加自定義 HTML 小部件並開始在您的 WordPress 小部件中編輯 HTML 代碼。

總體上

您可以通過多種方式更新或編輯 WordPress 網站的 HTML、CSS、PHP 和 JavaScript。 但是，您選擇哪一個完全取決於您網站的需求、您更新的頻率、您需要更新的原因等等。

如果您希望在 WordPress 網站上編輯源代碼，使用主題編輯器是一種可以讓您訪問所有源文件的選項。 另一種更具技術性的方法是通過 FTP 客戶端訪問 WordPress 網站託管服務器中的文件並直接對其進行更改。

而在您的 WordPress 網站上編輯 HTML 可以通過經典編輯器或新的塊編輯器完成。 無論您希望在小部件、主頁還是任何單獨的帖子中編輯 WordPress HTML，您只需要打開編輯器即可。

無論您選擇哪種方法，它們都會附帶一系列您必須研究的步驟，以避免任何錯誤和麻煩。 為此，更安全、更便捷的方式是聘請WordPress維護團隊或WordPress服務商。

他們是專業人士，知道自己在做什麼，並且總是提供合適的套餐來滿足您的業務需求。 我們 WP Pals 是一支由 WordPress 開發人員組成的高技能、經驗豐富且專業的團隊，隨時準備為您提供最合適的服務包和最合適的服務。

在下面發表評論，讓我們知道這篇文章對您有多大用處。 如果您了解有關編輯 WordPress 的更多信息，我們一定很想听聽您的意見。