如何在WordPress中以不同的方式設置單個類別的樣式


您是否要在WordPress中為類別設置不同的樣式? 大多數WordPress主題對所有類別存檔頁面使用相同的樣式。 但是,如果您運行內容豐富的網站,則可以為每個類別設置不同的樣式,以最大程度地發揮其潛力。 在本文中,我們將向您展示如何輕鬆地在WordPress中以不同的方式設置類別的樣式。

如何在WordPress中為類別設置不同的樣式

為什麼在WordPress中用不同的樣式設置類別?

如前所述,大多數WordPress主題為每個類別存檔頁面使用相同的模板。 那是因為主題開發人員不知道您將如何使用網站上的類別以及這些類別將是什麼。

但是,如果您正在運行內容豐富的網站,則更改類別存檔頁面的佈局可能會對用戶與該頁面上的內容進行互動的方式產生重大影響。

例如,如果您運行新聞或雜誌網站,則可以在本地新聞類別中顯示本地廣告。 您可以顯示天氣信息,顯示該類別中最受歡迎的故事,等等。

話雖如此,讓我們看看如何輕鬆地在WordPress中以不同的方式設置各個類別的樣式。

在WordPress中以不同的方式設置單個類別的樣式

在WordPress中有多種樣式設置樣式。 我們將向您展示兩種不同的樣式樣式方法,您可以選擇最適合您的需求和技能水平的一種方法。

在WordPress主題中使用單一類別模板

WordPress主題遵循標準模板層次結構。 根據模板文件名,WordPress可以自動選擇正確的模板來顯示頁面。

例如,它將查找category.php文件以顯示類別存檔頁面。

WordPress還允許您為各個類別創建模板。 假設您要為“ Apple”類別設置不同的樣式。 您可以通過在主題中添加一個新的模板文件並將其命名為category-apple.php來實現。

使用FTP客戶端連接到您的WordPress網站,然後轉到/ wp-content / themes / your-current-theme /文件夾並創建一個新文件category-apple.php。 不要忘記用您自己的類別名稱替換apple。

為您的WordPress主題中的各個類別創建模板

您可以使用主題的category.php文件作為起點。 只需編輯並複制其所有內容。 現在,編輯新創建的category-apple.php文件,並將代碼粘貼到其中。

之後,您可以開始對您的單個類別模板​​進行更改。 您可以為此類別創建和使用其他側邊欄,將其設置為全角頁面,添加歡迎消息或其他所需的內容。

使用CSS在WordPress中設置單個類別的樣式

WordPress自動將CSS類添加到整個網站的不同元素中。 這些包括身體課和崗位課。

例如,如果您查看類別存檔頁面,然後使用檢查工具,則會在body標籤中註意到類別和類別名稱CSS類。

WordPress將類別類添加到body元素

您可以使用此CSS類通過添加自定義CSS來為每個單獨的類別設置不同的樣式。

這是一些示例CSS,您可以將其用作起點。

body.category-apple { 
background-color:#EEE;
background:url("http://example.com/wp-content/uploads/2017/background.jpg") no-repeat fixed;
color:#FFFFFF;
}
.category-apple .site { 
background:#232323; 
}
.category-apple a { 
color:#CCCCCC; 
} 

不要忘記使用自己的類別名稱更改CSS類中的類別名稱。

使用CSS更改類別樣式

我們希望本文能幫助您學習如何在WordPress中以不同的方式設置類別的樣式。 您可能還希望查看我們的WordPress最受歡迎類別的黑客和插件列表。

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