dark

突出顯示包含超過5條評論的熱門主題帖子

2019年4月18日

[ad_1]

在運行WordPress博客時，最重要的是提供高質量的原創內容，以吸引讀者。如果你有一些有很多評論的熱門帖子，你應該考慮突出這個熱門話題。這是吸引讀者注意力的好方法。

這是一個非常簡單的修改，不需要插件，它可以幫助您直觀地過濾博客列表上的內容並突出顯示重要的帖子。例如，您可以選擇突出顯示包含5條以上評論的所有帖子。

首先，讓我們深入了解一下WordPress核心文件，以便清楚地了解最終的解決方案。

如果您在過去對主題文件進行了一些修改，可能您已經看到過類似的內容：

<article id =「post-「 >

<？php the_title（'

'，'

'）; ？>

這只是用於在Twenty Sixteen主題中顯示單個帖子的模板的示例，這裡重要的是post_class函數。請注意，以正確方式編碼的每個主題都使用此函數來列印特定於帖子的類。如果丟失則無法進行此修改，但可能不是這種情況。

如果您在WordPress核心文件中搜索post_Class，您可以輕鬆找到位於wp-includes / post-template.php內的這個部分：

$ classes = array_map（'esc_attr'，$ classes）; / ** *過濾當前帖子的CSS類列表。 * * @since 2.7.0 * * @param array $ classes一個post類數組。 * @param array $ class添加到帖子中的其他類的數組。 * @param int $ post_id帖子ID。 * / $ classes = apply_filters（'post_class'，$ classes，$ class，$ post-> ID）; return array_unique（$ classes）; }

重要的是正在使用apply_filters函數。這就是我們如何通過使用add_filter函數來過濾類以便在特定條件下添加我們的自定義類。

我們實現此目標的功能如下所示：

/ ** *用於為具有最少注釋數的帖子添加自定義css類到post_class的函數*然後可以在子主題style.css文件內或從WP後端>外觀>自定義* / if中完成熱門主題css類的樣式設置（！function_exists（'wpklik_function_css_class_for_highly_commented_posts'））{function wpklik_function_css_class_for_highly_commented_posts（$ classes，$ class，$ post_id）{$ min_comments = 5; //如果（is_archive（）|| is_home（））{if（get_comments_number（）> = $ min_comments）{$ classes（）='hot-topic'，則根據自己的喜好更改此數字;返回$ classes; } add_filter（'post_class'，'wpklik_function_css_class_for_highly_commented_posts'，10,3）; }

使用我們的功能，我們將簡單地處理每個帖子的博客列表和存檔頁面上的評論數量，如果該數字高於或等於我們所需的最小數量（默認設置為5），我們將通過我們的自定義熱門話題這些文章的CSS課程。實際上，這將突出顯示其中包含5條或更多評論的所有單個帖子。

如果您現在訪問博客，並檢查包含超過5條評論的帖子，您會注意到熱門話題類。

有了類，您現在可以輕鬆添加一些額外的CSS代碼，以使這些帖子脫穎而出。您可以從child-theme style.css文件中添加您的css代碼，或者只是從WordPress後端>外觀>自定義添加，您可以根據需要進行創作，因為您知道通過定位自定義類，您不會影響其他任何內容。你的博客。

這是我用於此目的的代碼示例：

article.hot-topic：before {content：「Trending！」;位置：絕對;左：-20px;頂部：-20px; transform：rotate（-7deg）;紅色; font-weight：600; } article.hot-topic .entry-title a {text-decoration：underline; } article.hot-topic .entry-title a：hover {color：red; } article.hot-topic span.comments-link a {color：red; font-weight：600; }

最終結果如下：

主題發布

希望你們中的一些人會發現這有趣和有幫助，如果是這樣，請不要忘記分享。

我們希望這篇文章有所幫助。如果您喜歡它，請隨時查看其中的一些文章！

  • 將WordPress網站移動到新域
  • 如何在WooCommerce中使用鉤子
  • 使用HTML5按鈕元素作為聯繫表單7提交
相關文章