专栏首页许都博客WordPress主题开发基础:Body 类指南

WordPress主题开发基础:Body 类指南

您是一位有抱负的WordPress主题设计师吗,正在寻找在主题中使用CSS的新方法? 幸运的是,WordPress会自动添加您可以在主题中使用的CSS类。这些CSS类中的几个会自动添加到WordPress网站上每个页面的<body>部分。

什么是WordPress Body类?

Body类(body_class)是WordPress函数,可让您将CSS类分配给body元素。 HTML正文标签通常从主题的header.php文件开始,该文件会加载到每个页面上。这使您可以动态地找出用户正在查看的页面,然后相应地添加CSS类。 通常,大多数入门主题和框架已经在HTML body标签内包含了body类功能。如果没有,可以通过修改body标签来添加,如下所示:

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

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页面。您可以自定义特定的作者个人资料页面,基于日期的档案等。 现在让我们看一下如何以及何时使用body类。

何时使用WordPress body类

首先,您需要确保主题的body元素包含如上所示的body类函数。如果确实如此,那么它将自动包括上述所有WordPress生成的CSS类。 之后,您还可以将自己的自定义CSS类添加到body元素。您可以在需要时添加这些类。 例如,如果要更改特定类别下的特定作者的文章外观。

如何添加自定义body类

WordPress有一个过滤器,您可以在需要时使用它来添加自定义body类。在向您展示特定用例场景之前,我们将向您展示如何使用过滤器添加body类,以便每个人都可以在同一页面上。 由于body类是特定于主题的,因此您需要将以下代码添加到主题的functions.php文件中。

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

上面的代码会将“ wpb-class”类添加到网站每个页面上的body标签中。

现在,您可以直接在主题样式表中使用此CSS类。如果您在自己的网站上工作,则还可以使用主题定制器中的自定义CSS功能添加CSS 。

您可以选择要启用body分类功能的文章类型以及谁可以访问它。不要忘记单击“保存更改”按钮来存储您的设置。 接下来,您可以直接编辑WordPress网站上的任何文章或页面。在文章编辑屏幕上,您会在右侧列中找到一个名为“文章类(Post Classes)”的新元框。

使用WordPress插件添加Body类

如果您不在客户项目上并且不想编写代码,那么此方法对您来说会更容易。 您需要做的第一件事是安装并激活Custom Body Class插件。 激活后,您需要访问“设置»Custom Body Class”页面。在这里,您可以配置插件设置。

您可以选择要启用body分类功能的文章类型以及谁可以访问它。不要忘记单击“保存更改”按钮来存储您的设置。 接下来,您可以直接编辑WordPress网站上的任何文章或页面。在文章编辑屏幕上,您会在右侧列中找到一个名为“文章类(Post Classes)”的新元框。

单击以添加您的自定义CSS类。您可以添加多个由空格分隔的类。 完成后,您只需保存或发布您的文章即可。现在,该插件会将您的自定义CSS类添加到该特定文章或页面的body类。

在Body类上使用条件标签

当body_class函数与条件标签一起使用时,它才真正发挥作用。 这些条件标签是truefalse数据类型,用于检查WordPress中的条件是true还是false。例如,条件标签is_home检查当前显示的页面是否为主页。 这允许主题开发人员在将自定义CSS类添加到body_class函数之前检查条件是否为truefalse。 让我们看一些使用条件标签将自定义类添加到body类的示例。 假设您要为具有作者用户角色的登录用户设置不同的首页样式。WordPress自动生成.home.logged-in 类时,它不会检测用户角色或将其添加为类。 现在,在这种情况下,您可以将条件标记与一些自定义代码一起使用,以将自定义类动态添加到body类。 为此,您需要将以下代码添加到主题的functions.php文件中。

function wpb_loggedin_user_role_class($classes) { 
     // 检查是否为首页
     if ( is_home() ) {
         // 检查当前登录的用户角色是否为作者 author
         $user = wp_get_current_user();
         if ( in_array( 'author', (array) $user->roles ) ) {
             //如果是作者角色,添加 author 类
             $classes[] = 'author';
             // 返回类的数组
             return $classes;      
         }
     } else { 
         // 如果不是首页,返回类的数组
         return $classes; 
     }
 } 
 add_filter('body_class', 'wpb_loggedin_user_role_class');

现在,让我们看另一个有用的例子。这次,我们将检查显示的页面是否为WordPress草稿的预览。 为此,我们将使用条件标签is_preview,然后添加我们的自定义CSS类。

function add_preview_class($classes) { 
     if ( is_preview() )  {
         $classes[] = 'preview-mode';
         return $classes;
     }
     return $classes; 
 }
 add_filter('body_class','add_preview_class');

然后,我们将以下CSS添加到主题的样式表中,以利用我们刚刚添加的新的自定义CSS类。

.preview-mode .site-header:before { 
     content:'preview mode';
     color:#FFF;
     background-color:#ff0000;
}

这是在我们的演示站点上的样子:

您可能需要查看可在WordPress中使用的条件标签的完整列表。这将为您的代码提供一组方便使用的标签。

动态添加自定义body类的其他示例

除了条件标签外,您还可以使用其他技术从WordPress数据库中获取信息并为body类创建自定义CSS类。

将分类名称添加到单个文章页面的body类中

假设您要根据单个文章的分类来自定义它们的外观。您可以使用body类来实现此目的 首先,您需要在单个文章页面上将分类名称添加为CSS类。为此,将以下代码添加到主题的functions.php文件中:

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

上面的代码将在您的body类中为单个文章页面添加分别类。然后,您可以根据需要使用CSS类对其进行样式设置。

将页面别名添加到body类

将以下代码粘贴到主题的functions.php文件中,可以将页面的slug别名添加到body类:

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

添加浏览器标记到body类

有时,您可能会遇到一些问题,其中主题可能需要特定浏览器的其他CSS。好在WordPress在加载时自动检测到浏览器,然后将这些信息临时存储为全局变量。您只需要检查WordPress是否检测到特定的浏览器,然后将其添加为自定义CSS类即可。 只需将以下代码复制并粘贴到主题的functions.php文件中:

function wpb_browser_body_class($classes) { 
     global is_iphone, is_chrome, is_safari, is_NS4, is_opera, is_macIE, is_winIE, is_gecko, is_lynx, is_IE, 
     if ($is_iphone) {
         $classes[] = 'iphone-safari';
     } elseif ($is_chrome) {
         $classes[] = 'google-chrome';
     } elseif ($is_safari) {
         $classes[] = 'safari';
     } elseif ($is_NS4) {
         $classes[] = 'netscape';
     } elseif ($is_opera){ 
         $classes[] = 'opera';
     } elseif ($is_macIE) {
         $classes[] = 'mac-ie';
     } elseif ($is_winIE) {
         $classes[] = 'windows-ie';
     } elseif ($is_gecko) {
         $classes[] = 'firefox';
     } elseif ($is_lynx) {
         $classes[] = 'lynx';
     } elseif ($is_IE) {
         $classes[] = 'internet-explorer';
     } elseif ($is_edge) {
         $classes[] = 'ms-edge';
     } else {
         $classes[] = 'unknown';
     }
     return $classes;
 }
 add_filter('body_class','wpb_browser_body_class');

然后,您可以使用类似的类:

.ms-edge .navigation { }

如果是一个很小的内边距(padding)或边距问题,那么这是修复它的一种很简单的方法。 肯定还有更多方案可以使用body_class函数来避免编写冗长的代码行。例如,如果您使用诸如Genesis之类的主题框架,则可以使用它在子主题中添加自定义类。 您可以使用body_class函数为全宽页面布局、侧边栏内容、页眉和页脚等添加CSS类。 希望本文能帮助您学习如何在主题中使用WordPress body类,如果对于这篇文章有什么疑问,可以在下面留言讨论。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于vue.js开发的WordPress主题

    https://gitee.com/xuanmos/xm-vue-wordpress-theme.git

    程序源代码
  • Python测试开发基础指南

    苦叶子
  • 【开发指南】(五)ionic3开发技术基础

    首先要区分angularjs和angular,前者一般指代angular1,后者是angular2+,它将angular1技术栈推倒重来,使用typescrip...

    IT晴天
  • Web前端开发推荐阅读书籍、学习课程下载

    学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢?

    慕白
  • 简单动态网站搭建

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    达达前端
  • TKE操作指南 - 部署wordpress 容器服务上(十)

    根据TKE操作指南 - 自动化构建,生成Wordpress Docker业务镜像(四)我们已经知道道nginx和php wordpress业务镜像地址

    亮哥说TKE
  • 在WordPress中使用Markdown进行写作的正确姿势

    在wordpress中使用markdown语法来进行写作,是很多wordpress博主都要想到的一点。虽然说现在wordpress已经“原生”支持wordpre...

    老潘
  • 帧同步游戏开发基础指南

    最近一个月休了个假,体验了一下类似欧洲的田园生活。所以更新几乎荒废了,但是总结和积累是一直持续着的。根据前一阶段对于实时对战游戏的开发思考,写了这一篇入门级的文...

    韩伟
  • 在Ubuntu 18.04上安装WordPress

    WordPress是一个非常流行的专注于博客的动态内容管理系统(CMS)。WordPress可以部署在LAMP或LEMP堆栈上。它具有的可扩展插件框架和主题系统...

    eru
  • WordPress 版 WebStack 导航主题

    前几天博客发了响应式网址导航网站源码 – Webstack的种草文章,当时我导航用的后台是基于Typecho,对于一个深耕热爱WordPress的博主来说,当然...

    AlexTao
  • 用Google Analytics分析WordPress

    Google Analytics(分析)提供与您网站的访问者流量和销售相关的详细统计信息,让您更好地了解您的受众群体。对任何有兴趣增加访客群的网站所有者都有好处...

    Techeek
  • Display Posts : 按条件显示WordPress文章的最强插件

    WordPress本质上是一个内容管理系统(CMS),是显示、创建、发布和维护内容的软件。

    丘壑
  • 如何加速WordPress网站

    本指南提供了一个测试环境,用于说明优化WordPress的过程。环境有两个组成部分:

    沈唁
  • 在Ubuntu 16.04上安装WordPress

    在本指南中,您将学习如何在运行Ubuntu 16.04的Linode上安装WordPress。WordPress是一个流行的动态内容管理系统,专注于博客。Wor...

    Techeek
  • 如何将WordPress远程附件存储到腾讯云对象存储COS上

    WordPress 是使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设属于自己的网站,也可以把 WordPress...

    沈唁
  • 如何在Ubuntu 14.04上使用Fail2Ban保护WordPress

    WordPress是一个非常强大的内容管理系统(CMS),是免费和开源的。因为任何人都可以发表评论,创建一个帐户,并在WordPress上发帖,许多恶意行为者已...

    林岑影
  • 如何在Debian 9上安装带LAMP的WordPress

    WordPress是互联网上最受欢迎的CMS(内容管理系统)。它允许您使用PHP处理在MariaDB后端轻松设置灵活的博客和网站。WordPress已经看到了令...

    你在哪里
  • 利用WordPress REST API 开发微信小程序从入门到放弃

    自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:《用微信小程序连接WordPress网站》...

    Jianbo
  • 5分钟玩转Lighthouse|零基础也能拥有WordPress个人博客

    【5分钟玩转Lighthouse】系列文章将为大家分享轻量应用服务器使用教程,提供丰富的实践指南,帮助大家快速上手并获得最佳产品体验。本期主要介绍如何借力 L...

    腾讯云计算产品团队

扫码关注云+社区

领取腾讯云代金券