當該頁面上的元素太寬而無法顯示并溢出屏幕時,將顯示水平滾動條。大多數WordPress主題不使用水平滾動,因為它會破壞您的網站布局并使用戶感到困惑。在本文中,我們將向您展示一種簡單快捷的方法來禁用WordPress中的溢出并刪除水平滾動條。

是什么導致WordPress中的水平滾動條或溢出?
在設置時,重要的是要使其用戶友好且每個人都可以訪問。
如果元素比您的網站寬,WordPress將顯示水平滾動條。這稱為“溢出”。擁有水平滾動條可能會破壞您的設計并使您的網站不那么用戶友好。
同時具有水平和垂直滾動條的網頁也可能使訪問者迷失方向并變得難以導航。這可能會導致用戶離開您的網站,從而導致轉化率和銷售額下降。
禁用溢出對您有益,因為它將使您的網站更加用戶友好,創建固定寬度的布局并提高網站的整體響應能力。
考慮到這一點,讓我們來看看如何在WordPress中輕松禁用溢出水平滾動條:
方法 1:使用主題定制器添加 CSS 代碼段
您可以通過簡單地在主題定制器的“附加CSS”選項中添加來禁用WordPress中的溢出。
您所要做的就是從WordPress儀表板訪問外觀?自定義頁面。
注意:您可能會看到外觀 ? 編輯器,而不是自定義。這意味著您的主題使用全站點編輯器 (FSE) 而不是主題定制器,您應該查看我們的指南,了解如何或使用下面的。

進入“自定義”頁面后,單擊“其他CSS”選項卡。
然后,只需復制并粘貼以下代碼:
html, body {
max-width: 100%;
overflow-x: hidden;
}
完成此操作后,將刪除任何溢出,您將能夠在網站的實時預覽窗格中看到它的應用。
完成后,不要忘記單擊頁面頂部的“發布”按鈕!

方法 2:使用 WPCode 添加 CSS 代碼段
您還可以使用WPCode插件通過代碼添加CSS代碼。
是市場上最好的WordPress代碼片段插件,被超過1萬個網站使用。
我們推薦這種方法,因為此插件可以輕松地將自定義代碼添加到 WordPress,而無需編輯任何主題文件。
首先,在您的網站上安裝并激活插件。
注意: WPCode也有一個。但是,您需要插件的高級計劃才能解鎖“CSS片段”選項。
激活后,從WordPress儀表板訪問代碼片段? +添加代碼片段頁面。
到達那里后,單擊“添加自定義代碼(新代碼段)”選項下的“使用代碼段”按鈕。

這將帶您進入“創建自定義代碼段”頁面,您可以在其中輸入代碼段的標題。此名稱不會向用戶顯示,僅供您識別。
接下來,從右側的下拉菜單中選擇“CSS 代碼段”作為代碼類型。
注意:如果您使用的是免費的WPCode插件,則必須選擇“通用片段”選項。

之后,將以下CSS代碼片段復制并粘貼到“代碼預覽”框中:
<style type="text/css">
html, body {
max-width: 100%;
overflow-x: hidden;
}
</style>
完成此操作后,向下滾動到“插入”部分,您將在其中找到兩個選項,“自動插入”和“簡碼”。
從這里,選擇“自動插入”模式以在激活時自動執行代碼。

但是,如果您只想禁用某些特定頁面上的水平滾動條,則可以選擇“簡碼”模式。
這樣做后,WPCode 將在代碼片段激活時為您提供一個短代碼,您可以將其粘貼到特定的網站區域或頁面上以消除溢出。
選擇選項后,轉到頁面頂部,然后將右上角的開關從“非活動”切換到“活動”。
然后,只需單擊“保存代碼段”按鈕。

就是這樣!您剛剛刪除了網站上的所有水平溢出滾動條。






