如何為每個WordPress帖子設置不同的樣式


您是否曾經遇到過一個網站,他們的博客文章風格有所不同? 有些網站的粘性帖子以自定義背景突出顯示,而另一些站點的每個類別帖子則可能具有獨特的外觀樣式。 如果您想學習如何以不同的方式設置每個WordPress帖子的樣式,那麼您來對地方了。 在本文中,我們將向您展示如何為每個WordPress帖子設置不同的樣式。

為每個帖子設置不同的樣式

注意:本教程要求您在WordPress中添加自定義CSS。 您還需要能夠使用檢查工具。 需要一些基本的CSS和HTML知識。

在WordPress中設置個人帖子的樣式

WordPress將默認CSS類添加到您網站上的各種元素。 符合標準的WordPress主題必須具有WordPress所需的代碼,才能為正文,帖子,頁面,小部件,菜單等添加CSS類。

WordPress的核心功能稱為 post_class() 主題使用它來告訴WordPress在哪里為帖子添加這些默認CSS類。

如果您訪問網站並在瀏覽器中使用“檢查”工具,則可以看到為每個帖子添加的類。

WordPress帖子的默認CSS類

以下是根據用戶正在查看的頁面默認添加的CSS類。

  • .post-id
  • .post
  • 。附件
  • 。黏
  • .hentry(hAtom微格式頁面)
  • .category-ID
  • 。分類名稱
  • 。標籤名稱
  • .format- {格式名稱}
  • .type- {post-type-name}
  • 。具有後縮略圖
  • .post-password必填
  • .post-password-protected

輸出示例如下所示:

您可以使用各自的CSS類為每個WordPress帖子設置不同的樣式。

例如,如果您想為單個帖子設置樣式,則可以在自定義CSS中使用post-id類。

.post-412 { 
background-color: #FF0303;
color:#FFFFFF; 
} 

不要忘記更改帖子ID以匹配您自己的帖子。

在WordPress中設置特定帖子的樣式

讓我們看另一個例子。

這次,我們將為稱為新聞的特定類別下的所有帖子設置樣式。

為此,我們可以在主題中添加以下自定義CSS”

.category-news { 
    font-size: 18px;
    font-style: italic;
} 

該CSS將影響新聞類別下的所有帖子。

職位類功能

主題開發人員使用post_class函數告訴WordPress在何處添加帖子類。 通常在

標籤。

post class函數不僅加載默認的WordPress生成的CSS類,還允許您添加自己的類。

根據您的主題,您將在single.php文件或內容模板文件中找到post_class函數。 通常,代碼將如下所示:

>

您可以使用以下屬性添加自己的自定義CSS類:

>

post_class將打印出各自的默認CSS類以及您的自定義CSS類。

如果要添加多個CSS類,則可以將它們定義為數組,然後在post_class函數中調用它們。

>

基於作者的風格不同

the_posts函數生成的默認CSS類不包含作者姓名作為CSS類。

如果要基於作者自定義每個帖子的樣式,則需要首先將作者名稱添加為CSS類。

您可以使用以下代碼段執行此操作:

>

此代碼會將用戶的好名字添加為CSS類。 Nicename是WordPress使用的URL友好名稱。 它沒有空格,並且所有字符都小寫,使其非常適合用作CSS類。

上面的代碼將為您提供如下輸出:

現在,您可以在自定義CSS中使用.peter來設置該特定作者的所有帖子的樣式,使其看起來與眾不同。

.peter { 
background-color:#EEE;
border:1px solid #CCC; 
}

使用評論計數基於受歡迎程度的樣式帖子

您可能已經看到帶有熱門帖子窗口小部件的網站,這些帖子有時基於評論計數。 在此示例中,我們將向您展示如何使用評論計數為帖子設置不同的樣式。

首先,我們需要獲取評論計數並將其與一個類關聯。

要獲得評論數,您需要在主題文件中添加以下代碼。 這段代碼位於WordPress循環內,因此您可以將其添加到

標籤也是如此。

approved;
	if ($my_comment_count <10) {
		$my_comment_count="new";
	} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
		$my_comment_count="emerging";
	} elseif ($my_comment_count >= 20) {
		$my_comment_count="popular";
	}
?>

此代碼檢查正在顯示的帖子的評論計數,並根據該計數為它們分配一個值。 例如,評論少於10條的帖子會被稱為“新”類,少於20條的帖子被稱為“新興”,而超過20條評論的任何東西都很受歡迎。

接下來,您需要將註釋計數CSS類添加到post_class函數。

>

這將根據每個帖子具有的評論數向所有帖子添加新的,新興的和流行的CSS類。

您可以根據受歡迎程度將自定義CSS添加到樣式帖子中:

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

我們只是添加邊框,您可以添加所需的任何CSS規則。

基於自定義字段的樣式帖子

在主題文件中對CSS類進行硬編碼會將您限制為僅那些特定的CSS類。 如果您想在編寫文章時決定將哪個CSS類添加到文章中,該怎麼辦?

使用自定義字段,您可以動態添加CSS類。

首先,您需要在帖子中添加一個自定義字段,以便對其進行測試。 編輯帖子,然後向下滾動到“自定義字段”部分。

將帖子類別添加為自定義字段

將post-class添加為自定義字段名稱,並在value字段中添加要用作CSS類的任何內容。

不要忘記單擊“添加自定義字段”按鈕來存儲它,然後保存您的帖子。

接下來,編輯主題文件以將自定義字段顯示為帖子類。

ID, 'post-class'); ?>
>

它將輸出以下HTML:

現在,您可以使用自定義字段為添加的post_class添加自定義CSS。

.trending{
background-color:##ff0000;
}

自定義字段可以具有多個值,因此您可以使用相同的名稱添加多個CSS類。

有許多方法可以單獨設置WordPress帖子的樣式。 隨著技能的提高,您將不斷發現使用不同條件設置帖子樣式的新方法。

我們希望本文能幫助您學習如何為每個WordPress帖子設置不同的樣式。 您可能還想查看我們最想要的WordPress技巧,竅門和技巧的最終列表。

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