如何在WordPress主题的Body Class中添加页面S ..

如果您经常使用WordPress主题,那么最好熟悉这些默认的WordPress生成的CSS备忘单。最近,在处理自定义主题项目时,我们发现需要根据不同的页面自定义某些项目。 WordPress有这些称为body类的东西,它输出类页面,page-template- {filename}和page-id– {number}。我们无法使用page-id- {number},因为页面ID从开发变为部署。我们也不想创建具有重复代码的自定义页面模板。我们知道我们可以在所有这些页面slug上保持一样的东西,所以我们决定在body类中添加页面slug,这允许我们做所有我们想要的自定义而没有任何复杂性。在本文中,我们将向您展示如何在WordPress主题的body类中添加页面slug。

因为这是一个特定于主题的代码,我们建议您将它放在主题中的functions.php文件。Wénjiàn.

  //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" );  

现在你将开始看到一个像这样输出的新体类:page- {slug}。使用该类覆盖默认样式并自定义特定页面的元素。

例如,如果您尝试使用窗口小部件类修改div。你可以像这样拥有你的CSS:

  #sidebar .widgets{background: #fff; color: #000;}  .page-education #sidebar .widgets{background: #000; color: #fff;}  

如果您经常使用WordPress主题,那么最好熟悉这些默认的WordPress生成的CSS备忘单。最近,在处理自定义主题项目时,我们发现需要根据不同的页面自定义某些项目。 WordPress有这些称为body类的东西,它输出类页面,page-template- {filename}和page-id– {number}。我们无法使用page-id- {number},因为页面ID从开发变为部署。我们也不想创建具有重复代码的自定义页面模板。我们知道我们可以在所有这些页面slug上保持一样的东西,所以我们决定在body类中添加页面slug,这允许我们做所有我们想要的自定义而没有任何复杂性。在本文中,我们将向您展示如何在WordPress主题的body类中添加页面slug。

因为这是一个特定于主题的代码,我们建议您将它放在主题中的functions.php文件。Wénjiàn.

  //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" );  

现在你将开始看到一个像这样输出的新体类:page- {slug}。使用该类覆盖默认样式并自定义特定页面的元素。

例如,如果您尝试使用窗口小部件类修改div。你可以像这样拥有你的CSS:

  #sidebar .widgets{background: #fff; color: #000;}  .page-education #sidebar .widgets{background: #000; color: #fff;}  

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-05-25 08:09:35
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
2781198
加我微信
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: