您是否曾經遇到過一個網站,他們的博客文章風格有所不同? 有些網站的粘性帖子以自定義背景突出顯示,而另一些站點的每個類別帖子則可能具有獨特的外觀樣式。 如果您想學習如何以不同的方式設置每個WordPress帖子的樣式,那麼您來對地方了。 在本文中,我們將向您展示如何為每個WordPress帖子設置不同的樣式。
注意:本教程要求您在WordPress中添加自定義CSS。 您還需要能夠使用檢查工具。 需要一些基本的CSS和HTML知識。
在WordPress中設置個人帖子的樣式
WordPress將默認CSS類添加到您網站上的各種元素。 符合標準的WordPress主題必須具有WordPress所需的代碼,才能為正文,帖子,頁面,小部件,菜單等添加CSS類。
WordPress的核心功能稱為 post_class()
主題使用它來告訴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以匹配您自己的帖子。
讓我們看另一個例子。
這次,我們將為稱為新聞的特定類別下的所有帖子設置樣式。
為此,我們可以在主題中添加以下自定義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。