如何在WordPress中更改側邊欄


最近,一位讀者問我們如何在WordPress主題中更改側邊欄。 在用戶要從左到右或從右到左更改邊欄的地方,我們會遇到很多問題。 在本文中,我們將向您展示如何在WordPress中更改側邊欄。

在WordPress中更改側邊欄

為什麼要在WordPress中更改側邊欄

可用性專家認為,人們從左到右掃描頁面。 他們建議將重要內容放在左側,以便用戶首先看到內容。 但是,如果您的網站使用的是從右到左方向書寫的語言,則可能會相反。

許多WordPress網站使用兩列的典型博客佈局。 一個用於內容,另一列用於邊欄。

左側有側邊欄的WordPress網站

如果您只是剛開始一個網站,那麼您應該選擇一個WordPress主題,該主題的側邊欄位於您的首選位置。

許多主題都有從主題設置切換側邊欄選項的選項。 但是,如果主題沒有此選項,則必須手動更改側邊欄。

話雖如此,讓我們看一下如何使用一點CSS輕鬆更改WordPress中的側邊欄。

使用CSS在WordPress中更改側邊欄

在對主題進行任何更改之前,您應該首先考慮創建一個子主題。 通過使用子主題,您將能夠更新父主題而不會丟失更改。

其次,當您直接更改活動的WordPress主題時,應始終創建WordPress網站的備份。

您將需要FTP客戶端來編輯主題文件。 請參閱我們的初學者指南,了解如何使用FTP將文件上傳到WordPress。

使用FTP客戶端連接到WordPress站點,然後轉到主題文件夾。 它通常位於:

/yourwebsite/wp-content/themes/your-theme-folder/

現在,您需要在純文本編輯器(如記事本)中下載並打開主題的主樣式表文件。 該文件稱為 style.css,它位於主題的根目錄中。

在此文件中,找到側邊欄的CSS類。 通常是 .sidebar。 在此示例中,我們使用默認的WordPress主題二十一十五,具有此CSS定義邊欄:

.sidebar {
		float: left;
		margin-right: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}

如您所見,它在側邊欄浮動在左邊,右邊距為-100%。 我們將其更改為左右浮動,如下所示:

.sidebar {
		float: right;
		margin-left: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}

保存更改,並使用FTP客戶端將style.css文件上傳回您的網站。 現在,如果您訪問您的網站,它將如下所示:

側邊欄已移動,但內容側仍然相同

那是因為我們已經移動了側邊欄,但是沒有移動內容區域。 二十五分之一使用此CSS來定義內容區域的位置。

.site-content {
		display: block;
		float: left;
		margin-left: 29.4118%;
		width: 70.5882%;
	}

我們將對其進行更改以將內容向右移動。 像這樣:

.site-content {
		display: block;
		float: left;
		margin-right: 29.4118%;
		width: 70.5882%;
	}

這是我們的網站在應用此CSS後的外觀。

CSS衝突顯示空白區域

如您所見,我們在內容和側邊欄區域都進行了切換。 但是,左側仍然有一個白色塊。

使用CSS時,您會遇到這樣的事情。 需要進行一些偵探性工作才能弄清楚是什麼原因以及如何調整它。

使用瀏覽器的“檢查”工具查看源代碼。 將鼠標指向瀏覽器中的受影響區域,右鍵單擊並從瀏覽器菜單中選擇“檢查”。

檢查工具

在源代碼視圖中移動鼠標時,您會注意到實時預覽中突出顯示的區域。 在右窗格中,您將能夠看到用於所選元素的CSS。

我們發現樣式表中的此CSS需要調整。

@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}

此CSS代碼在左上方添加了一個29.4118%寬度和100%寬度的空白內容塊。 這是我們將其向右移動的方法。

@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}

保存樣式表並將其上傳回服務器後,這就是我們網站的外觀。

側邊欄移到另一側

使用CSS可能會使初學者感到困惑。 如果您不想完成所有手動代碼工作,那麼您可能想嘗試CSS Hero。 它允許您編輯CSS而無需編寫任何代碼,並且適用於每個WordPress主題。

我們希望本文能幫助您更改WordPress中的側邊欄。 您可能還希望查看我們的12個WordPress側邊欄技巧列表,以獲取最大的效果。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。