WordPress背景顏色設置：新增文章、分區區塊、分類文章及整站背景

撰稿日期：2024/09/04

一、如何在WordPress.com新增文章時設置背景顏色：步驟詳解

在WordPress.com中，設置文章的背景顏色通常需要使用一些額外的自訂功能，因為標準的文章編輯器並不提供直接修改背景顏色的選項，不過，你可以通過以下方法來實現這一功能。透過這些方法，你可以更靈活地自訂WordPress.com上文章的背景顏色，提升文章的視覺效果。

(一)使用自訂CSS

如果你使用的是高級方案（Premium 或更高方案），可以使用自訂CSS來設置文章的背景顏色。

步驟如下：

1.  進入自訂CSS設定

在WordPress.com儀表板左側選單中，點擊「外觀」>「自訂」。

接著選擇「額外CSS」選項。

2.  添加CSS代碼

在CSS編輯框中輸入以下代碼來設定文章的背景顏色：

```css

.postid-12345 {

background-color: #f0f0f0;

}

```

將 `12345` 替換為你文章的實際 ID，`#f0f0f0`是你希望設定的背景顏色，可以修改為其他色碼。

3.  保存並預覽

添加代碼後，點擊「發布」或「保存」按鈕，然後預覽文章來檢查效果。

 

(二)使用區塊編輯器(Block Editor)

如果你使用的是Gutenberg區塊編輯器，可以通過設置區塊的背景顏色來間接達成類似效果。

步驟如下

1.  選擇一個區塊

在文章編輯器中，選擇要添加背景顏色的區塊。

2.  設置背景顏色

在右側設定面板中，選擇「背景顏色」選項，然後從顏色選擇器中挑選你想要的背景顏色。

3.  應用於整篇文章

如果希望整篇文章都使用相同的背景顏色，可以將內容全部放在同一個「分區區塊」（Group Block），並設置這個區塊的背景顏色。

 

(三)使用外掛程式

1.  有些WordPress外掛程式可以為你的文章背景設置更多的自訂選項，這些外掛通常可以在你使用的方案中，找到或通過升級方案來獲取。

2.  搜索和安裝能夠提供更多設計控制的外掛程式，像是「Advanced Editor Tools(formerly TinyMCE Advanced)」等，然後根據外掛提供的功能設置文章背景顏色。

 

二、如何使用「分區區塊」統一設置文章內容的背景顏色

要將文章內容全部放在同一個「分區區塊」（Group Block）中，並設置背景顏色，可以按照以下步驟進行。通過這種方法，你可以輕鬆地將整篇文章包裝在同一個「分區區塊」中，並設置統一的背景顏色，使文章的視覺效果更加一致。

步驟一：新增「分區區塊」(Group Block)

1.  新增文章或編輯現有文章

在WordPress.com儀表板中，選擇「文章」>「新增文章」，或編輯已經存在的文章。

2.  新增「分區區塊」

在文章編輯器中，點擊左上角的「+」號來新增區塊。

在搜索框中輸入「Group」或「分區」，選擇「分區區塊」(Group Block) 並將其新增到文章中。

 

步驟二：將內容移入「分區區塊」

1.  選取所有內容：

使用滑鼠選取文章中的所有區塊內容，或者一個一個選取。

2.  拖放到「分區區塊」中：

將選取的內容拖放到新增的「分區區塊」內，你會看到一個藍色的框，這表示你正在將內容移入該區塊中。

或者你也可以使用下方的「向上移動」或「向下移動」箭頭來將區塊移動到「分區區塊」中。

 

步驟三：設置「分區區塊」的背景顏色

1.  選擇「分區區塊」

點擊選中整個「分區區塊」，然後在右側設定面板中會顯示出「分區區塊」的選項。

2.  設置背景顏色

在右側的設定面板中，找到「背景顏色」選項，點擊後選擇你想要的背景顏色。你可以使用調色盤、輸入色碼，或選擇預設的顏色。

3.  保存和預覽

設置完成後，點擊右上角的「保存草稿」或「預覽」按鈕來檢查效果。如果滿意，點擊「發布」來發布文章。

 

三、如何為分類中的所有文章設置背景顏色：提升分類視覺一致性

要為整個 WordPress 網站內的所有文章設置背景顏色，以下是幾種不同的方式，取決於你的WordPress.com計畫和技術熟練程度。

(一)使用自訂 CSS（適用於高級方案）

如果你使用的是WordPress.com的高級或更高方案，可以使用自訂 CSS 來為所有文章設置背景顏色。

1.  進入自訂 CSS 設定：

在WordPress.com儀表板左側選單中，點擊「外觀」>「自訂」。

接著選擇「額外 CSS」選項。

添加 CSS 代碼：

在 CSS 編輯框中輸入以下代碼：

```css

.single .entry-content {

background-color: #f0f0f0;

padding: 20px;

}

```

2.  這段代碼將為所有單篇文章內容設置背景顏色為`#f0f0f0`，並添加20px的內邊距。如果需要不同的顏色或邊距，可以自行調整色碼和數值。

3.  保存變更

添加代碼後，點擊「發布」或「保存」按鈕應用更改。

 

(二)使用區塊編輯器的全站編輯（適用於支持全站編輯的主題）

如果你使用的是支持全站編輯（Full Site Editing, FSE）的主題，可以通過編輯網站的範本來設置文章背景顏色。

1.  進入全站編輯器：

在WordPress.com儀表板中，點擊「外觀」>「編輯器」或「全站編輯器」。

2.  選擇文章範本：

在全站編輯器中，選擇「範本」，然後找到並編輯「單篇文章」的範本（通常稱為「單篇」或「文章」）。

3.  設置背景顏色：

在範本編輯中，選中包含文章內容的區塊，並在右側的設定面板中，「單篇文章」，最重要的步驟，請記得要點選「色彩」，才可以設置背景顏色。

4.  保存變更：

設置完成後，點擊「保存」以應用到所有文章。

 

(三)使用外掛程式（適用於有插件安裝權限的情況）

如果你的計畫允許安裝外掛程式，則可以考慮安裝一個外掛來簡化這一過程。

1.  安裝自訂CSS外掛

搜尋並安裝一個自訂CSS外掛，比如「Simple Custom CSS」或「Additional CSS and JS」。

2.  添加全站自訂CSS

使用外掛提供的介面添加類似於上述的自訂CSS代碼，這樣你可以更方便地管理和修改全站範圍內的樣式。

 

(四)注意事項

1.  不同的主題可能會有不同的結構，背景顏色的設置方式也可能略有不同。如果你使用的是自訂主題或特定主題，可能需要根據具體情況進行調整。

2.  如果不確定如何進行，你也可以嘗試尋求該主題的支援或相關社群的幫助。

 

四、在WordPress.com文章區塊中，如何使用右側設定面板設置背景顏色

要在WordPress.com的全站編輯器中，設置包含文章內容的區塊背景顏色，可以按照以下步驟進行。通過這些步驟，你可以成功為整個網站的文章設置統一的背景顏色，從而提升網站的視覺一致性和專業感。

1.  步驟一：進入全站編輯器

進入 WordPress 儀表板：在WordPress.com儀表板中，點擊「外觀」>「編輯器」（或者「全站編輯器」）。

2.  步驟二：選擇文章範本

選擇範本：在全站編輯器中，選擇「範本」(Templates)，找到「單篇文章」（Single Post）範本，然後點擊進行編輯。

3.  步驟三：設置背景顏色

選擇包含文章內容的區塊：在範本編輯界面中，找到包含文章內容的區塊。這通常是一個「分區區塊」（Group Block）或「文章內容區塊」（Post Content Block）。

4.  步驟四：打開右側的設定面板

選中區塊後，右側的設定面板將顯示該區塊的屬性。

如果右側設定面板沒有顯示，點擊編輯器右上角的「齒輪」圖示來打開設定面板。

5.  步驟四：設置背景顏色：

在右側設定面板中，找到「背景顏色」選項。

點擊顏色選擇器並挑選你希望的背景顏色，或輸入特定的色碼。

6.  步驟五：保存範本變更

預覽變更：完成背景顏色設置後，可以點擊「預覽」來查看效果。

保存範本：如果滿意設置，點擊右上角的「保存」按鈕，將更改應用於所有使用該範本的文章。

 

五、如何在WordPress.com中為整個網站設置統一的背景顏色：完整指南

在WordPress.com中為整個網站的文章設置統一背景顏色，步驟如下，這樣設置可以有效提升網站的視覺一致性，並營造專業感。

1.  進入網站自訂設定：

登錄 WordPress.com 後，點擊左側選單的「我的網站」(My Site)。

接著選擇「外觀」(Appearance)→「自訂」(Customize)。

3.  進入「顏色與背景」設置：

在「自訂」面板中，找到「顏色與背景」(Colors & Backgrounds)選項。

點擊後，你將看到不同的顏色選項，部分主題可能提供預設的色彩方案，也可能允許自訂。

4.  選擇或自訂背景顏色：

如果主題支持自訂顏色，可以選擇預設的背景顏色或點擊「自訂顏色」(Custom Color) 來設置自己想要的顏色。

你可以直接選擇顏色，也可以使用十六進制顏色代碼（例如#ffffff代表白色）來指定具體顏色。

5.  應用變更：

設置完成後，點擊右下方的「發布」(Publish) 來保存設定，這樣所有文章頁面的背景顏色將統一。

6.  檢查主題相容性：

不同的WordPress主題對背景顏色的自訂支援程度不同，如果你的主題不允許更改文章背景顏色，可以考慮更換支援這項功能的主題，或使用自訂 CSS（需升級至高級方案）。