[已解決][WordPress] Neve 主題水平滾動條消失

Last Updated on 2021-10-17 by Clay

自從我將 WordPress 網站的主題更改為 Neve 後，我發現我本來使用『自訂 HTML』區塊嵌入在文章中的程式碼被自動換行了，除此之外，如『程式碼』區塊之類的 block 的水平滾動條（horizontal scroll bar）也都消失了。

這並不是意外，在我過去更換的幾個主題中，本來就有些主題會讓我的自定義 HTML 區塊水平滾動條失效；不過當時一來不夠熟悉 WordPress、二來手邊總有更緊急的事情要做，所以總是乾脆地直接更換主題，直到該主題讓我的自訂 HTML 區塊正常運作。

不過由於這次所更換的 Neve 主題我十分喜歡，於是下定決心要解決這個問題。

解決方法

結論是，即便翻遍了我的網站原始碼，我仍然沒有找到 Neve 主題限制水平滾動條的程式設定，這點只能歸咎於我的程度不足，但我猜測是因為我的自訂 HTML 區塊（或其他區塊）繼承了父物件的屬性，這才導致了全數自動換行，於是我重新寫了個 CSS 的 class 去設定 white-space。

之所以不直接寫在自訂 HTML 區塊中，是因為我怕未來仍然有改動的可能，寫在網站添加的 CSS 樣式中比直接寫在自訂 HTML 區塊中容易更改，以後只需要改一個地方就能改掉所有文章的自訂 HTML 區塊樣式。

當然，你也可以添加進自己自訂 HTML 區塊的 style 中。

前往 wp-admin 後台，從左側選單進入 “Appearance” -> “Customize“。

找到附加的 CSS 欄位後，設定要給自訂 HTML 區塊使用的 class。這裡我取名叫 “ccode“，意思是 colorful code。

/* custom html css style */
.ccode {
	display: block;
	overflow-x: auto;
	white-space: pre;
}

發布儲存。接著，我們來看使用這個 class 與否的差異，直接用我的網站 demo（當然將來某一天可能我換了主題、這個 demo 就失效了）。

下面是一組修改前後的對照的區塊。

<pre>
print("------------------------------------------------------------------------------------------------")
</div>

print("------------------------------------------------------------------------------------------------")

<pre class="ccode">
print("------------------------------------------------------------------------------------------------")
</pre>

print("------------------------------------------------------------------------------------------------")

是否成功讓水平滾動條恢復運作了呢？