在之前的教程中，我向您展示了如何以不同的方式设置网站中的类别样式，这样，如果您的网站针对每个帖子类别都有部分，您就可以使它们看起来完全不同。
但是如果您的网站基于静态页面怎么办？基于分层页面结构的大型网站并不罕见，那么您可以将这些技术用于这样的网站吗？
答案是肯定的。 WordPress 将为您提供一些与站点页面结构相关的 CSS 类，您可以使用它们来定位样式并为基于页面的站点创建看起来完全不同的部分。
在本教程中，我们将使用基于分层页面的网站，并为网站的每个部分使用不同的颜色来设置样式。我们还将研究一种基于向页面添加类别的替代技术。
要学习本教程，您需要：
如果您已经有一个想要使用此技术的主题，则您将处理主题的样式表和函数文件。我将创建“二十十五”主题的子主题，并在子主题中编辑样式表和函数文件。
您的网站可能已经充满了帖子；为了让我的网站上有一些帖子，我将下载 WordPress 主题测试数据。
如果您正在使用自己的主题，则可以跳过此部分，但是创建“二十十五”的子主题需要执行哪些操作。
在您网站的 wp-content/themes 文件夹中，创建一个新文件夹并为其命名。我正在调用我的 tutsplus-style-pages-by-section。
在该文件夹中，创建一个名为 style.css 的空 CSS 文件，并向其中添加以下内容：
/*
Theme Name: Tuts+ Style Pages by Section
Theme URI: https://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684
Description: Theme to support tuts+ tutorial on styling pages differently in each section of a site. Child theme for the Twenty Fifteen theme.
Author: Rachel McCollin
Author URI: http://rachelmccollin.co.uk/
Template: twentyfifteen
Version: 1.0
*/
@import url("../twentyfifteen/style.css");
这会告诉 WordPress 创建子主题所需了解的一切，并从“二十十五”导入样式表。您可能想添加您自己的姓名和详细信息，而不是我的，但这给了您一个想法。
现在激活您的主题。
如果您的网站已设置页面，您可以跳过此部分，但以下是如何将主题单元测试数据导入您的网站。
xml 文件。默认情况下，WordPress 会将包含所有博客类别的导航菜单分配到主菜单，并将博客页面设置为主页。由于我们使用的是静态页面，因此您需要在 WordPress 管理员中进行更改。
WordPress 使用 body_class() 模板标签根据显示的页面类型输出类。您可以将此标记添加到主题的 header.php 文件：它会根据正在查看的页面类型将类添加到 body 元素。
如果您正在使用自己的主题并且尚未添加这些模板标签，则需要这样做。本教程介绍如何使用 WordPress 生成的类和 ID。
如果您正在使用“二十十五”主题的子主题，这些标签将已添加到“二十十五”主题本身，因此您无需执行任何操作。
如果您在浏览器中打开网站的一个页面并使用开发人员工具检查输出 HTML，您会看到 body_class() 模板标记已添加了一堆类你的页面。这里我打开了一个子页面：
body 元素会输出多个类：
<body class="page page-id-1133 page-child parent-pageid-5 page-template-default logged-in admin-bar no-customize-support">
这些告诉浏览器我们正处于一个静态页面、页面的 ID、它是子页面的事实、它是子页面的事实以及页面模板等。
我们将使用其中两个类来定位网站不同部分的页面：与页面 ID 和页面父级相关的页面。
为了定位分层网站的某个部分中的页面，我们使用两个类：顶级页面的页面 ID 和子页面的页面父 ID。
首先，您需要识别顶级页面的 ID。为此，请在管理屏幕中依次打开它们并检查其编辑屏幕的 URL。 URL 将包含文本“post=X”，其中 X 是页面的唯一 ID。忽略它说的是“帖子”而不是“页面”（页面实际上是帖子的一种类型）这一事实，并使用该 ID 来定位您的样式。
在我的网站中，有子级的顶级页面的 ID 为 5 和 17，没有子级的页面的 ID 为 146、701、703、733 和 735。我将为每个页面使用一种颜色两个分层部分，另一个用于没有子级的页面。如果您的页面全部分成几个部分，您可以为每个部分使用不同的颜色。
打开主题的样式表并向其中添加以下 CSS：
.page-id-5 h1,
.parent-pageid-5 h1 {
color: #6cd2c8;
}
.page-id-17 h1,
.parent-pageid-17 h1 {
color: #e5572f;
}
.page-id-146 h1,
.page-id-701 h1,
.page-id-703 h1,
.page-id-733 h1,
.page-id-735 h1 {
color: #933bbe;
}
注意：您需要根据您自己的网站更改帖子 ID 和父 ID，并且您可能需要更改颜色以匹配您的设计。
现在保存您的样式表并查看您的网站。我的网站在每个部分都使用颜色。这是一个没有层次结构的页面：
顶级页面：
这是该顶级页面的子页面：
但是，这种方法存在一些问题。首先，我必须手动为每个顶级页面添加类，这意味着如果有人将来向我的网站添加更多部分或顶级页面，或者将我的顶级页面之一移动到网站中的其他位置，层次结构，它们不会有任何样式。第二个是，这仅适用于我的顶级页面的直接子级。我的样式均不适用于页面的孙子。
这意味着，如果您的网站具有多级层次结构，则此方法将很难实施，因为您必须定位顶级页面的每个子级的子级。如果定期添加新页面，则不可能！
所以我需要一种替代方法，那就是使用类别。
默认情况下，WordPress 不会为页面分配类别，但您可以使用功能轻松地为页面添加类别。为此，您可以使用 register_taxonomy_for_object_type() 函数，本教程将探讨如何为附件分配类别。
打开主题的 functions.php 文件，如果还没有，请创建一个。添加以下内容：
function tutsplus_add_categories_to_pages() {
register_taxonomy_for_object_type( 'category', 'page' );
}
add_action( 'init' , 'tutsplus_add_categories_to_pages' );
这会将 'category' 分类添加到 'page' 对象类型，这意味着您可以将类别分配给页面。
但这并不意味着 body_class() 标记会将类别输出为具有类别的页面上的类之一，因为页面默认情况下没有类别。
您可以通过编写一个函数并将其附加到 body_class 过滤器挂钩来更改此设置。再次在您的函数文件中添加以下内容：
function tutsplus_add_categories_to_body_class( $classes ) {
if ( is_page() ) {
$categories = get_the_category( $post->ID );
foreach ( $categories as $category ) {
$classes[] = 'category-' . $category->slug;
}
}
return $classes;
}
add_filter( 'body_class','tutsplus_add_categories_to_body_class' );
这将创建一个名为 tutsplus_add_categories_to_body_class() 的函数，其中变量 $classes 作为其对象。它会检查我们是否在某个页面上，如果是，则创建一个名为 $categories 的变量，其中包含该页面所在的所有类别。然后，对于每个类别，它添加类别 slug（前缀为 'category-' 为了保持一致性）添加到 $classes 数组并返回那些。 最后将函数挂接到 body_class 过滤器，它将 slugs 的输出数组添加到 body_class 输出的类中() 模板标签。
现在尝试向您网站的页面添加一些类别以为其提供部分。我添加了第 1 部分、第 2 部分和第 3 部分类别。确保每一页都位于一个部分。
以下是我的页面在添加了类别后在管理屏幕中的外观：
下一步是向每个部分的目标页面添加一些样式。我不会更改标题颜色，因为我已经使用页面层次结构更改了标题颜色。相反，我将添加边框。
在主题的样式表中，添加以下内容（或使用类别的别名和您正在使用的颜色添加类似内容）：
.page.category-section-1 h1 {
border-bottom: 2px solid #933bbe;
padding: 0.5em;
}
.page.category-section-2 h1 {
border-bottom: 2px solid #6cd2c8;
padding: 0.5em;
}
.page.category-section-3 h1 {
border-bottom: 2px solid #e5572f;
padding: 0.5em;
}
现在保存您的样式表并检查您的页面。
这是第 1 部分中的页面：
如果您检查您的网站，您会发现您分配了具有目标样式的类别之一的每个页面都会具有正确的样式，无论它位于页面层次结构中的哪个位置。这使您可以更好地控制样式，并能够通过多级层次结构设置网站各部分的样式。
这种基于类别的方法的另一个优点是，您可以将其用于网站中的页面和帖子：因此，如果您已经在博客文章中使用了基于类别的样式，则可以轻松地将其应用于您的静态页面页面也是如此。
如果您的网站基于页面的层次结构，那么它可能会有一些您可能想要赋予一些独特标识的部分。
在本教程中，您学习了两种在网站不同部分的页面上设置样式的方法。
首先，您使用了页面层次结构，它的优点是可以使用默认的 WordPress 设置，但缺点是不能使用深度超过两层的层次结构。
最后，您学习了如何将类别应用于页面，将类别添加到页面的 body_class() 标记，然后编写针对 WordPress 输出的类的 CSS。
