如何在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;}