如何修復WordPress側邊欄錯位移位問題

修復WordPress側邊欄錯位移位問題

完善WordPress網站的佈局可能需要做很多工作，但這對於使用者體驗（UX），參與度和轉化率也是必不可少的。因此，當看似隨機的錯誤導致站點顯示錯位時，例如側邊欄突然出現在內容下方而不是側面時，這是件讓站長和訪客都煩心的事情。

一般WordPress側邊欄移位錯位主要歸結為超文字標記語言（HTML）或級聯樣式表（CSS）的問題。幸運的是，這些問題相對容易解決，一般可以快速讓站點恢復原來的樣子。

在本教程中，我們將介紹導致此錯誤的常見原因，及如何通過三個簡單步驟解決該錯誤。

WordPress側欄錯位至頁面下方的常見原因

WordPress的側邊欄應顯示在頁面主要部分的左側或右側（或有時同時顯示在這兩個區域）。它們通常包含小部件，登錄檔單，指向相關文章的連結或您想要包含在整個網站中的類似內容。

由於各種錯誤，側邊欄有時可能會顯示在頁面底部，而不是左側或右側。

主要原因一般為網站上的HTML或CSS問題。通常，這是您對網站程式碼（例如主題或外掛檔案）進行了直接更改的結果。

例如，頁面上可能有一個額外的或未閉合<div>標籤。該問題甚至可能歸因於CSS中不正確的寬度和浮動設定。幸運的是，解決此錯誤很容易。

現在我們知道造成這種混亂錯誤的潛在原因，如何修正？我們建議按順序執行以下三個步驟，僅在前一個步驟不起作用時才繼續執行下一個步驟。在開始之前，務必先備份您的站點，以防萬一。

第一步也是最簡單的。如果在更改站點後側邊欄發生了錯位（無論是安裝新外掛，新增自定義程式碼還是其他操作），只需將其撤消即可。撤消操作既可以將佈局恢復為原始，又可以幫助找出問題的原因。

因此，您可以先撤消更改並重新整理網站，以檢視側邊欄是否又回到了正確的位置。如果是這樣，那麼您可以嘗試進行任何更改來尋找潛在的問題。例如，如果您安裝了新外掛，請檢查替代方法。如果您更改或新增了網站程式碼，請檢查是否有任何拼寫錯誤或語法錯誤。

通常，網站程式碼中未封閉或多餘的<div>標記是WordPress側邊欄錯誤的原因。這些HTML標記定義了您網站上各個部分的邊界。如果放置不正確，瀏覽器將無法正確渲染網站。

這是一個格式正確的頁面的示例：

正確div標籤

以下是帶有未閉合的<div>標籤的同一頁面：

未閉合div標籤

您可以看到結束的<div>標記應該缺少正斜槓。結果，瀏覽器不知道它是要關閉的，並且應該位於元素外部的內容現在位於內部。

要解決此問題，請梳理您修改過的所有模板檔案，並尋找缺失或多餘的標籤。通常，這些錯誤可以在WordPress主題的“模板部分”檔案中找到。進入WordPress儀表盤，然後導航到“外觀>主題編輯器”。

WordPress主題編輯器

從頂部的下拉選單中選擇正確的主題，然後在側欄中找到模板部分。

主題編輯器修改程式碼

生成頁面和文章的模板通常在內容部分下。從列表中找到所需的一個，進行檢查，然後進行任何更正。然後，您可以單擊更新檔案以儲存您的更改。

如果您知道編輯了哪個檔案，則可以直接跳到那裡。否則，您需要檢查它們是否存在不一致之處。

導致此錯誤的另一個常見原因是網站的CSS樣式。WordPress定製程式的“其他CSS”部分使您可以將自定義CSS新增到您的網站。

額外CSS錯誤問題

如果您使用了此功能或通過其他方式編輯了CSS，則可能是錯誤地格式化了程式碼。在移動側欄的情況下，最常見的罪魁禍首是“寬度”屬性。

您應該仔細檢查Content和Sidebar元素的寬度總和不超過Wrap元素的寬度。如果是這樣，較小的元素將被向下推以使其適合。

您也可以自行解決問題，而無需使用程式碼。有幾種線上線上工具可以驗證您的程式碼並檢查其錯誤。

您可以使用W3C標記驗證服務來檢查HTML程式碼，使用W3C CSS驗證服務檢查CSS樣式檔案，Online Web Check則可以同時校驗HTML和CSS。

如果您只想再看一遍程式碼，而不論其技術水平如何，這些線上服務也是很棒的。

除了本教程！我們整理了不少文章，以幫助您解決各種WordPress問題：

如果您正在尋找更多的WordPress技巧，請檢視我們的WordPress教程。

在玩WordPress的過程中可能遇到無數的錯誤，側邊欄錯位只是其中的一個。幸運的是，如果問題只是側邊欄跑到頁面下方，則修復相對簡單！

要解決出現在頁面下方的側邊欄錯誤，您可以按照以下三個步驟操作：

WordPress側邊欄 WordPress錯誤側邊欄錯誤