WordPress Body Class 101:主题设计师的提示和技巧

通过我们使用WordPress的经验,我们发现主题设计师经常过度使用某种功能。当他们需要的只是一些简单的CSS时,他们正在寻找疯狂的WordPress过滤器和钩子来完成任务。 WordPress默认生成很多CSS类。 (WordPress CSS备忘单)。其中一个CSS类区域是body类样式。在本文中,我们将解释WordPress体类101以及为初学主题设计者分享一些有用的提示和技巧。

什么是WordPress Body Class?

Body Class(body_class)是一个WordPress函数,它为body元素提供不同的类,因此主题作者可以使用CSS有效地设置其网站的样式。 HTML body标签主要存在于header.php文件中,该文件在每个页面上加载。编码主题时,可以将body_class函数附加到body元素,如下所示:

<body <?php body_class($class); ?>>

通过添加这个小元素,您可以灵活地使用CSS轻松修改每个页面的外观。根据所加载页面的类型,WordPress会自动添加相应的类。例如,如果您在存档页面上,如果您选择使用它,WordPress将自动将存档类添加到body元素。几乎每一页都能做到这一点。以下是WordPress可能添加的常见类的一些示例:

  .rtl {}  .home {}  .blog {}  .archive {}  .date {}  .search {}  .paged {}  .attachment {}  .error404 {}  .single postid-(id) {}  .attachmentid-(id) {}  .attachment-(mime-type) {}  .author {}  .author-(user_nicename) {}  .category {}  .category-(slug) {}  .tag {}  .tag-(slug) {}  .page-parent {}  .page-child parent-pageid-(id) {}  .page-template page-template-(template file name) {}  .search-results {}  .search-no-results {}  .logged-in {}  .paged-(page number) {}  .single-paged-(page number) {}  .page-paged-(page number) {}  .category-paged-(page number) {}  .tag-paged-(page number) {}  .date-paged-(page number) {}  .author-paged-(page number) {}  .search-paged-(page number) {}  

正如您所看到的,通过拥有如此强大的资源,您可以使用CSS完全自定义WordPress页面。您可以自定义特定的作者配置文件页面,基于日期的存档等。那么您将如何以及何时使用它?

如何使用WordPress Body Class

在大多数情况下,WordPress body类是主题设计者经常忽略的简单解决方案。是的,这也包括我们。大约一年前,我们需要设置仅在特定页面上设置WordPress菜单项的样式。我们决定深入挖掘以找到一个过滤器,为菜单项添加一个特殊的导航类,这些菜单项将使用条件语句添加。例如,如果它是单个页面,则将“Blog”类添加到菜单项。我花了很多时间搞清楚所有这些并写一篇关于它的帖子,我们的一位用户指出我们可以很容易地用现有的体类来完成它,如下所示:

.single #navigation .leftmenublog div{display: inline-block !important;}

注意:它如何使用在所有单个帖子页面中添加的.single body类。

那之后男孩不觉得我觉得很蠢。从那时起,我们已经做了一个注释,看看在深入挖掘之前,是否可以先用身体类完成任务。

给你另一个例子。一旦用户找到我们,想要一种基于类别页面更改其网站上的徽标图像的方法。包括他在内的大多数主题设计都是使用CSS(#header .logo)加载徽标。我们建议如何使用.category–slug body类来改变他的徽标:

  .category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;}  .category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}  

这位新主题设计师和我们一样有着相同的时刻。希望现在您已经掌握了如何在主题设计中利用身体类。但是等等,这会变得更加强大,因为有一种方法可以使用过滤器添加自定义主体类。我们来看看如何做到这一点。

如何添加自定义正文类

WordPress有一个过滤器,您可以使用它在需要时添加自定义正文类。我们将向您展示如何使用过滤器添加一个body类,然后再向您展示特定的用例场景,以便每个人都可以在同一页面上。

因为body类是特定于主题的,所以你需要在functions.php文件中编写一个自定义函数,如下所示:

  function my_class_names($classes) {  // add "class-name" to the $classes array  $classes[] = "test-class-name";  // return the $classes array  return $classes;  }    //Now add test class to the filter  add_filter("body_class","my_class_names");  

上面的代码将在您网站的每个页面上的body标签中添加一个“test-class-name”类。那不是那么糟糕吧?该函数的真正强大之处在于条件标记。您可以说只在单页等上添加XYZ类。让我们以此为例,将其应用于实际用例场景。

将类别类添加到单个帖子页面

假设您要自定义每个类别的单个帖子页面。根据自定义的类型,您可以为其使用正文类。为了简单起见,我们假设您要根据单个帖子的类别更改页面的背景颜色。您可以通过向单个帖子页面视图添加类别类来实现此目的。将以下函数粘贴到主题的functions.php文件中:

  // add category nicenames in body class  function category_id_class($classes) {  global $post;  foreach((get_the_category($post->ID)) as $category)  $classes[] = $category->category_nicename;  return $classes;  }    add_filter("body_class", "category_id_class");  

上面的代码将在您的正文类中为单个帖子页面添加类别类。然后,您可以根据需要使用css类来设置样式。

在WordPress主题的Body Class中添加Page Slug

将以下代码粘贴到主题的functions.php文件中:

  //Page Slug Body Class  function add_slug_body_class( $classes ) {  global $post;  if ( isset( $post ) ) {  $classes[] = $post->post_type . "-" . $post->post_name;  }  return $classes;  }  add_filter( "body_class", "add_slug_body_class" );  

阅读我们在body类页面slug上的文章,它将解释我们为什么需要它。

浏览器检测和浏览器特定的正文类

有时您可能需要特殊的CSS样式才能在某些浏览器中正常工作(HINT:Internet Explorer)。 Nathan Rice提出了一个非常酷的解决方案,它根据用户访问该网站的浏览器向body类添加特定于浏览器的类。

您所要做的就是将以下代码粘贴到functions.php文件中:

  <?php  add_filter("body_class","browser_body_class");  function browser_body_class($classes) {  global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;    if($is_lynx) $classes[] = "lynx";  elseif($is_gecko) $classes[] = "gecko";  elseif($is_opera) $classes[] = "opera";  elseif($is_NS4) $classes[] = "ns4";  elseif($is_safari) $classes[] = "safari";  elseif($is_chrome) $classes[] = "chrome";  elseif($is_IE) $classes[] = "ie";  else $classes[] = "unknown";    if($is_iphone) $classes[] = "iphone";  return $classes;  }  ?>  

然后,您可以使用以下类:

.ie .navigation {some item goes here}

如果它是一个小的填充或边距问题,这是一种相当快速的修复方法。

更多用例:

我们可能会列出更多用例,但我们不会这样做,否则这篇文章就会失控。它的重点是帮助新主题开发人员理解WordPress体类的基础知识及其优点。用例仅限于您的想象力。我们已经看到商业主题开发人员(Genesis)使用body类来提供各种布局选项。例如,全页面布局,补充工具栏内容,内容边栏等。这样,用户可以轻松切换页面布局而不必担心外观问题,因为已经使用CSS.0进行了处理

我们已经看到一些开发人员添加HTTP请求来加载他们提供的各种配色方案的CSS文件。在很多情况下,变化也很小。当一个人可以完成工作时,没有必要加载3个样式表。只需使用body类。

通过我们使用WordPress的经验,我们发现主题设计师经常过度使用某种功能。当他们需要的只是一些简单的CSS时,他们正在寻找疯狂的WordPress过滤器和钩子来完成任务。 WordPress默认生成很多CSS类。 (WordPress CSS备忘单)。其中一个CSS类区域是body类样式。在本文中,我们将解释WordPress体类101以及为初学主题设计者分享一些有用的提示和技巧。

什么是WordPress Body Class?

Body Class(body_class)是一个WordPress函数,它为body元素提供不同的类,因此主题作者可以使用CSS有效地设置其网站的样式。 HTML body标签主要存在于header.php文件中,该文件在每个页面上加载。编码主题时,可以将body_class函数附加到body元素,如下所示:

<body <?php body_class($class); ?>>

通过添加这个小元素,您可以灵活地使用CSS轻松修改每个页面的外观。根据所加载页面的类型,WordPress会自动添加相应的类。例如,如果您在存档页面上,如果您选择使用它,WordPress将自动将存档类添加到body元素。几乎每一页都能做到这一点。以下是WordPress可能添加的常见类的一些示例:

  .rtl {}  .home {}  .blog {}  .archive {}  .date {}  .search {}  .paged {}  .attachment {}  .error404 {}  .single postid-(id) {}  .attachmentid-(id) {}  .attachment-(mime-type) {}  .author {}  .author-(user_nicename) {}  .category {}  .category-(slug) {}  .tag {}  .tag-(slug) {}  .page-parent {}  .page-child parent-pageid-(id) {}  .page-template page-template-(template file name) {}  .search-results {}  .search-no-results {}  .logged-in {}  .paged-(page number) {}  .single-paged-(page number) {}  .page-paged-(page number) {}  .category-paged-(page number) {}  .tag-paged-(page number) {}  .date-paged-(page number) {}  .author-paged-(page number) {}  .search-paged-(page number) {}  

正如您所看到的,通过拥有如此强大的资源,您可以使用CSS完全自定义WordPress页面。您可以自定义特定的作者配置文件页面,基于日期的存档等。那么您将如何以及何时使用它?

如何使用WordPress Body Class

在大多数情况下,WordPress body类是主题设计者经常忽略的简单解决方案。是的,这也包括我们。大约一年前,我们需要设置仅在特定页面上设置WordPress菜单项的样式。我们决定深入挖掘以找到一个过滤器,为菜单项添加一个特殊的导航类,这些菜单项将使用条件语句添加。例如,如果它是单个页面,则将“Blog”类添加到菜单项。我花了很多时间搞清楚所有这些并写一篇关于它的帖子,我们的一位用户指出我们可以很容易地用现有的体类来完成它,如下所示:

.single #navigation .leftmenublog div{display: inline-block !important;}

注意:它如何使用在所有单个帖子页面中添加的.single body类。

那之后男孩不觉得我觉得很蠢。从那时起,我们已经做了一个注释,看看在深入挖掘之前,是否可以先用身体类完成任务。

给你另一个例子。一旦用户找到我们,想要一种基于类别页面更改其网站上的徽标图像的方法。包括他在内的大多数主题设计都是使用CSS(#header .logo)加载徽标。我们建议如何使用.category–slug body类来改变他的徽标:

  .category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;}  .category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}  

这位新主题设计师和我们一样有着相同的时刻。希望现在您已经掌握了如何在主题设计中利用身体类。但是等等,这会变得更加强大,因为有一种方法可以使用过滤器添加自定义主体类。我们来看看如何做到这一点。

如何添加自定义正文类

WordPress有一个过滤器,您可以使用它在需要时添加自定义正文类。我们将向您展示如何使用过滤器添加一个body类,然后再向您展示特定的用例场景,以便每个人都可以在同一页面上。

因为body类是特定于主题的,所以你需要在functions.php文件中编写一个自定义函数,如下所示:

  function my_class_names($classes) {  // add "class-name" to the $classes array  $classes[] = "test-class-name";  // return the $classes array  return $classes;  }    //Now add test class to the filter  add_filter("body_class","my_class_names");  

上面的代码将在您网站的每个页面上的body标签中添加一个“test-class-name”类。那不是那么糟糕吧?该函数的真正强大之处在于条件标记。您可以说只在单页等上添加XYZ类。让我们以此为例,将其应用于实际用例场景。

将类别类添加到单个帖子页面

假设您要自定义每个类别的单个帖子页面。根据自定义的类型,您可以为其使用正文类。为了简单起见,我们假设您要根据单个帖子的类别更改页面的背景颜色。您可以通过向单个帖子页面视图添加类别类来实现此目的。将以下函数粘贴到主题的functions.php文件中:

  // add category nicenames in body class  function category_id_class($classes) {  global $post;  foreach((get_the_category($post->ID)) as $category)  $classes[] = $category->category_nicename;  return $classes;  }    add_filter("body_class", "category_id_class");  

上面的代码将在您的正文类中为单个帖子页面添加类别类。然后,您可以根据需要使用css类来设置样式。

在WordPress主题的Body Class中添加Page Slug

将以下代码粘贴到主题的functions.php文件中:

  //Page Slug Body Class  function add_slug_body_class( $classes ) {  global $post;  if ( isset( $post ) ) {  $classes[] = $post->post_type . "-" . $post->post_name;  }  return $classes;  }  add_filter( "body_class", "add_slug_body_class" );  

阅读我们在body类页面slug上的文章,它将解释我们为什么需要它。

浏览器检测和浏览器特定的正文类

有时您可能需要特殊的CSS样式才能在某些浏览器中正常工作(HINT:Internet Explorer)。 Nathan Rice提出了一个非常酷的解决方案,它根据用户访问该网站的浏览器向body类添加特定于浏览器的类。

您所要做的就是将以下代码粘贴到functions.php文件中:

  <?php  add_filter("body_class","browser_body_class");  function browser_body_class($classes) {  global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;    if($is_lynx) $classes[] = "lynx";  elseif($is_gecko) $classes[] = "gecko";  elseif($is_opera) $classes[] = "opera";  elseif($is_NS4) $classes[] = "ns4";  elseif($is_safari) $classes[] = "safari";  elseif($is_chrome) $classes[] = "chrome";  elseif($is_IE) $classes[] = "ie";  else $classes[] = "unknown";    if($is_iphone) $classes[] = "iphone";  return $classes;  }  ?>  

然后,您可以使用以下类:

.ie .navigation {some item goes here}

如果它是一个小的填充或边距问题,这是一种相当快速的修复方法。

更多用例:

我们可能会列出更多用例,但我们不会这样做,否则这篇文章就会失控。它的重点是帮助新主题开发人员理解WordPress体类的基础知识及其优点。用例仅限于您的想象力。我们已经看到商业主题开发人员(Genesis)使用body类来提供各种布局选项。例如,全页面布局,补充工具栏内容,内容边栏等。这样,用户可以轻松切换页面布局而不必担心外观问题,因为已经使用CSS.0进行了处理

我们已经看到一些开发人员添加HTTP请求来加载他们提供的各种配色方案的CSS文件。在很多情况下,变化也很小。当一个人可以完成工作时,没有必要加载3个样式表。只需使用body类。

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-06-05 02:53:35
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[加我微信]
chaoneo
注:点击复制微信号并打开微信APP,添加好友后进行聊天。
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: