如何为每个WordPress发布不同的样式

您是否曾经遇到过以不同方式设置博客帖子风格的网站?有些网站使用自定义背景突出显示粘性帖子,而其他网站可能会将每个类别的帖子设置为具有独特外观。如果你想学习如何以不同方式设置每个WordPress帖子的样式,那么你就是在正确的位置。在本文中,我们将向您展示如何以不同方式为每个WordPress帖子设置样式。

Style Each Post Differently

注意:本教程要求您在WordPress中添加自定义CSS。您还需要能够使用Inspect工具。需要一些基本的CSS和HTML知识。

在WordPress中设置单个帖子的样式

WordPress将默认的CSS类添加到您网站上的各种元素。符合标准的WordPress主题必须具有WordPress所需的代码,以便为正文,帖子,页面,窗口小部件,菜单等添加CSS类。

主题使用名为 post_class()的核心WordPress函数告诉WordPress在哪里添加帖子的默认CSS类。

如果您访问您的网站并在浏览器中使用Inspect工具,那么您将能够看到为每个帖子添加的这些类。

Default CSS classes for WordPress post

以下是根据用户正在查看的页面默认添加的CSS类。

  • 。post-id
  • 。post
  • 。attachment
  • 。sticky
  • 。hentry(hAtom microformat pages)
  • 。类别-ID
  • 。分类名
  • 。标签名称
  • 。格式 – {格式名}
  • 。类型 – {后类型名称}
  • .has-post-thumbnail
  • 。post-password-required
  • 。post-password-protected

示例输出如下所示:

  <article  >  

您可以使用相应的CSS类以不同方式设置每个WordPress帖子的样式。

例如,如果要为单个帖子设置样式,则可以在自定义CSS中使用post–id类。

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

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

Styling a specific post in WordPress

让我们来看看另一个例子。

这次我们将设置在名为news的特定类别下提交的所有帖子的样式。

我们可以通过在我们的主题“

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

”中添加以下自定义CSS来实现这一点。此CSS将影响在新闻类别下提交的所有帖子。

Post类函数

主题开发人员使用post_class函数告诉WordPress在哪里添加帖子类。通常它位于&lt; article&gt; 标记中。

post类函数不仅加载默认的WordPress生成的CSS类,还允许您添加自己的类。

根据您的主题,您可以在single.php文件或内容模板文件中找到post_class函数。通常,代码看起来像这样:

  <article  <?php post_class(); ?>>  

您可以添加自己的自定义CSS类,其属性如下:

  <article  <?php post_class("longform-article"); ?>>  

post_class将打印出相应的默认CSS类以及您的自定义CSS类。

如果要添加多个CSS类,则可以将它们定义为数组,然后在post_class函数中调用它们。

  <?php  $custom_classes = array(  "longform-article",  "featured-story",  "interactive",  );  ?>  <article  <?php post_class( $custom_classes ); ?>>    

样式帖子不同基于作者

由the_posts函数生成的默认CSS类不包括作者名称作为CSS类。

如果要根据作者自定义每个帖子的样式,则需要先将作者名称添加为CSS类。

您可以通过使用以下方法执行此操作snippet:

  <?php $author = get_the_author_meta("user_nicename"); ?>  <article  <?php post_class( $author ); ?>>  

此代码将用户的nicename添加为CSS类。Nicename是WordPress使用的URL友好名称。它没有空格,所有字符都是小写的,这使得它非常适合用作CSS类。

上面的代码将为您提供如下输出:

  <article  >  

现在,您可以在自定义CSS中使用.peter来设置此特定作者的所有帖子的样式,使其看起来不同。

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

使用评论计数基于流行度的帖子帖子

您可能已经看到过热门帖子小部件的网站有时基于评论计数。在此示例中,我们将向您展示如何使用注释计数对帖子进行不同的样式设置。

首先,我们需要获取注释计数并将类与其关联。

要获取注释计数,您需要在主题文件中添加以下代码。此代码在WordPress循环中,因此您可以在&lt; article&gt;之前添加它。标签也是。

  <?php  $postid = get_the_ID();  $total_comment_count = wp_count_comments($postid);  $my_comment_count = $total_comment_count->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的帖子会得到一个名为new的类,少于20个被称为新兴,而超过20个评论的帖子很受欢迎。

接下来,您需要将注释计数CSS类添加到post_class函数。

  <article  <?php post_class( $my_comment_count ); ?>>  

这将根据每个帖子的评论数量为所有帖子添加新的,新兴的和流行的CSS类。

您可以根据流行度为样式帖子添加自定义CSS:

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

我们只是添加边框,您可以添加所需的任何CSS规则。

基于自定义字段的样式帖子

主题文件中的硬编码CSS类仅限于那些特定的CSS类。如果您想在编写文章时决定将哪个CSS类添加到文章中,该怎么办?

使用自定义字段,您可以动态添加CSS类。

首先,您需要为帖子添加自定义字段,以便您可以对其进行测试。编辑帖子并向下滚动到自定义字段部分。

Add post class as a custom field

将post–class添加为自定义字段名称,以及要在值字段中用作CSS类的任何内容。

不要忘记点击“添加自定义字段”按钮进行存储,然后保存帖子。

接下来,编辑主题文件以将自定义字段显示为帖子类。

<?php $custom_values = get_post_meta($post->ID, "post-class"); ?>  <article  <?php post_class( $custom_values ); ?>>  

它将输出以下HTML:

  <article  >  

您现在可以为使用自定义字段添加的post_class添加自定义CSS。

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

自定义字段可以有多个值,因此您可以使用相同的名称添加多个CSS类。

还有很多方法可以单独设置WordPress帖子的样式。随着技能的提高,您将不断发现使用不同条件设置帖子样式的新方法。

我们希望本文能帮助您学习如何以不同方式设置每个WordPress帖子的样式。您可能还想查看我们最想要的WordPress提示,技巧和黑客的最终列表。

您是否曾经遇到过以不同方式设置博客帖子风格的网站?有些网站使用自定义背景突出显示粘性帖子,而其他网站可能会将每个类别的帖子设置为具有独特外观。如果你想学习如何以不同方式设置每个WordPress帖子的样式,那么你就是在正确的位置。在本文中,我们将向您展示如何以不同方式为每个WordPress帖子设置样式。

Style Each Post Differently

注意:本教程要求您在WordPress中添加自定义CSS。您还需要能够使用Inspect工具。需要一些基本的CSS和HTML知识。

在WordPress中设置单个帖子的样式

WordPress将默认的CSS类添加到您网站上的各种元素。符合标准的WordPress主题必须具有WordPress所需的代码,以便为正文,帖子,页面,窗口小部件,菜单等添加CSS类。

主题使用名为 post_class()的核心WordPress函数告诉WordPress在哪里添加帖子的默认CSS类。

如果您访问您的网站并在浏览器中使用Inspect工具,那么您将能够看到为每个帖子添加的这些类。

Default CSS classes for WordPress post

以下是根据用户正在查看的页面默认添加的CSS类。

  • 。post-id
  • 。post
  • 。attachment
  • 。sticky
  • 。hentry(hAtom microformat pages)
  • 。类别-ID
  • 。分类名
  • 。标签名称
  • 。格式 – {格式名}
  • 。类型 – {后类型名称}
  • .has-post-thumbnail
  • 。post-password-required
  • 。post-password-protected

示例输出如下所示:

  <article  >  

您可以使用相应的CSS类以不同方式设置每个WordPress帖子的样式。

例如,如果要为单个帖子设置样式,则可以在自定义CSS中使用post–id类。

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

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

Styling a specific post in WordPress

让我们来看看另一个例子。

这次我们将设置在名为news的特定类别下提交的所有帖子的样式。

我们可以通过在我们的主题“

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

”中添加以下自定义CSS来实现这一点。此CSS将影响在新闻类别下提交的所有帖子。

Post类函数

主题开发人员使用post_class函数告诉WordPress在哪里添加帖子类。通常它位于&lt; article&gt; 标记中。

post类函数不仅加载默认的WordPress生成的CSS类,还允许您添加自己的类。

根据您的主题,您可以在single.php文件或内容模板文件中找到post_class函数。通常,代码看起来像这样:

  <article  <?php post_class(); ?>>  

您可以添加自己的自定义CSS类,其属性如下:

  <article  <?php post_class("longform-article"); ?>>  

post_class将打印出相应的默认CSS类以及您的自定义CSS类。

如果要添加多个CSS类,则可以将它们定义为数组,然后在post_class函数中调用它们。

  <?php  $custom_classes = array(  "longform-article",  "featured-story",  "interactive",  );  ?>  <article  <?php post_class( $custom_classes ); ?>>    

样式帖子不同基于作者

由the_posts函数生成的默认CSS类不包括作者名称作为CSS类。

如果要根据作者自定义每个帖子的样式,则需要先将作者名称添加为CSS类。

您可以通过使用以下方法执行此操作snippet:

  <?php $author = get_the_author_meta("user_nicename"); ?>  <article  <?php post_class( $author ); ?>>  

此代码将用户的nicename添加为CSS类。Nicename是WordPress使用的URL友好名称。它没有空格,所有字符都是小写的,这使得它非常适合用作CSS类。

上面的代码将为您提供如下输出:

  <article  >  

现在,您可以在自定义CSS中使用.peter来设置此特定作者的所有帖子的样式,使其看起来不同。

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

使用评论计数基于流行度的帖子帖子

您可能已经看到过热门帖子小部件的网站有时基于评论计数。在此示例中,我们将向您展示如何使用注释计数对帖子进行不同的样式设置。

首先,我们需要获取注释计数并将类与其关联。

要获取注释计数,您需要在主题文件中添加以下代码。此代码在WordPress循环中,因此您可以在&lt; article&gt;之前添加它。标签也是。

  <?php  $postid = get_the_ID();  $total_comment_count = wp_count_comments($postid);  $my_comment_count = $total_comment_count->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的帖子会得到一个名为new的类,少于20个被称为新兴,而超过20个评论的帖子很受欢迎。

接下来,您需要将注释计数CSS类添加到post_class函数。

  <article  <?php post_class( $my_comment_count ); ?>>  

这将根据每个帖子的评论数量为所有帖子添加新的,新兴的和流行的CSS类。

您可以根据流行度为样式帖子添加自定义CSS:

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

我们只是添加边框,您可以添加所需的任何CSS规则。

基于自定义字段的样式帖子

主题文件中的硬编码CSS类仅限于那些特定的CSS类。如果您想在编写文章时决定将哪个CSS类添加到文章中,该怎么办?

使用自定义字段,您可以动态添加CSS类。

首先,您需要为帖子添加自定义字段,以便您可以对其进行测试。编辑帖子并向下滚动到自定义字段部分。

Add post class as a custom field

将post–class添加为自定义字段名称,以及要在值字段中用作CSS类的任何内容。

不要忘记点击“添加自定义字段”按钮进行存储,然后保存帖子。

接下来,编辑主题文件以将自定义字段显示为帖子类。

<?php $custom_values = get_post_meta($post->ID, "post-class"); ?>  <article  <?php post_class( $custom_values ); ?>>  

它将输出以下HTML:

  <article  >  

您现在可以为使用自定义字段添加的post_class添加自定义CSS。

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

自定义字段可以有多个值,因此您可以使用相同的名称添加多个CSS类。

还有很多方法可以单独设置WordPress帖子的样式。随着技能的提高,您将不断发现使用不同条件设置帖子样式的新方法。

我们希望本文能帮助您学习如何以不同方式设置每个WordPress帖子的样式。您可能还想查看我们最想要的WordPress提示,技巧和黑客的最终列表。

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-04-23 13:53:11
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
2781198
加我微信
[电话联系]
13585372227
[电子邮件]
[email protected]
取消

选择聊天工具: