如何在特定页面/帖子上应用 CSS

已发表: 2022-01-04

您知道您可以在 WordPress 中的特定页面或帖子上应用 CSS吗？ 是的，由于 WordPress 的 CSS 友好特性，这是可能的。 在本指南中，我们将向您展示将 CSS 添加到特定页面或帖子的各种方法。

所有 WordPress 主题通常对每种类型的内容应用不同的样式。 帖子、页面、分类法、个人资料和任何其他内容在每个内容中都有不同的样式表。 插件和 WordPress 的所有其他方面也是如此。

但是，由于 WordPress 的灵活性，您还可以为特定页面和帖子类型使用不同的样式表。 但是让我们看看为什么在我们完成这个过程之前可能需要向它们添加 CSS。

为什么将 CSS 应用于特定页面或帖子

如果您正在构建网站或设计网站，则将 CSS 添加到特定页面和帖子非常有用。 CSS 通常用于自定义网站的视觉外观。 因此，在您的网站整体上使用 CSS 非常有助于准确地向网站访问者展示您的网页。

与您网站上的其他页面或帖子相比，可能存在需要独特设计的特定页面或帖子类型。 在这种情况下，您最好的选择之一是在特定页面或帖子上应用 CSS。 这些页面或帖子通常会添加到您网站的菜单中。 但它们也可以包括其他独特的页面和帖子，如商店页面、产品页面，甚至主页。

例如，即使是 QuadLayers 的我们也已经在 Portfolio 和 About 等特定页面上使用 CSS，以使它们与其他页面或帖子类型不同。 现在，事不宜迟，让我们继续这个过程。

如何在特定页面或帖子上应用 CSS

您可以通过多种方式在特定页面或帖子上添加应用 CSS。 但是，这里有3 个最常见的：

  1. 使用 HTML id 或类
  2. 添加 PHP 函数
  3. 在特定页面或帖子上包含 CSS 文件

所有这些方法都可以用于将 CSS 应用于多种用途。 我们将通过适当的分步教程在本文中介绍所有这些方法。

1. 使用 HTML id 或 class

如果您想在特定页面或帖子上应用 CSS，这是最常见且被广泛接受的方法之一。 我们需要做的就是获取页面或帖子将拥有的唯一标识符。 然后，这个 HTML 类或 id 允许我们将所有 CSS 脚本定位到所需的页面或帖子。

1.1。 查找页面的 HTML 类或 id

首先，您必须找出要用于 CSS 脚本的 id 或类。 这可以在浏览器检查工具的帮助下轻松找到。

只需打开要应用 CSS 的页面，然后右键单击要编辑的元素。 然后点击检查。

在这里，检查正文 HTML 标记。 这将根据您使用的主题而有所不同。

我们在以下所有示例中都使用了二十二十个主题。 因此，当您使用 Twenty Twenty 主题检查网站的主页时，您会看到以下内容：

从上面的截图可以看出，首页的唯一标识是“ home ”类。 因此，如果您只想将某些 CSS 规则应用于主页，则需要在选择器中使用此类。

例如，假设我们只想对主页上的徽标应用某种样式。 那么，除了home类，我们还需要logo图片选择器。 同样，这可以从浏览器检查工具中获得。


在这种情况下，我们将使用“自定义徽标”类将我们的样式应用于徽标。 现在，让我们将它们与上一步中抓取的类放在一起。 最后，我们可以使用以下 CSS 选择器仅在主页上应用我们的脚本：

 .home .custom-logo{ /*your CSS here */}

注意：您不需要遵循所有中间 HTML 标记并将它们包含在您的选择器中。 即使您要设置样式的元素远离独特的页面选择器，您也可以跳过它们。

当然，如果需要更具体的选择器，可以使用完整的 CSS 路径选择器。 但这是相当压倒性的，在大多数情况下是不必要的。

例如，这是一个非常具体的选择器，用于设置我们之前见过的相同徽标元素的样式：

 html body.home div#page.site header#masthead div.site-branding div.site-logo span.custom-logo-link img.custom-logo{ /*your CSS here */}

1.2. 查找帖子的 HTML 类或 id

与页面类似，每个帖子也应该有一个唯一的 HTML 类。 同样，只需在浏览器开发人员工具的帮助下检查要应用 CSS 的帖子上的元素。 然后，您将能够看到与postid属性一样的唯一标识符。

对于以下具有二十二十个主题的帖子，标识该帖子的类是postid -557。

帖子 id 检查在特定页面帖子上应用 css

同样，您可以对网站的任何其他页面执行相同操作。 使用标识页面的唯一类。 如果您查看以下屏幕截图，您可以看到标识页面的类是page-id-357 。

页面 id 检查在特定页面帖子上应用 CSS

最后，创建适合您网站需求的自己的 CSS 选择器，就像自定义徽标示例一样。 然后，您可以在特定页面上应用 CSS 或通过在外观 > 自定义 > 附加 CSS中添加它来发布。 如果您需要更多帮助，可以查看我们的指南，了解如何将 CSS 应用到 WordPress 或使用浏览器开发工具应用 CSS。

2.添加PHP函数

前面的方法足以将我们的自定义 CSS 应用于特定的帖子或页面。 对于您可能需要的大多数自定义，这已经足够了。 但在某些情况下，可能存在限制：

  • 您的主题没有任何唯一的 HTML 类或您需要设置样式的内容的 id。
  • 您有大量 CSS 规则，需要将它们保存在单独的文件中。
  • 除了当前页面之外，您还想应用一些其他条件。

如果您想将 CSS 应用于特定页面或帖子时遇到类似问题，使用 PHP 函数会更好。

但在我们开始之前，请确保您备份您的 WordPress 网站或为此方法创建一个子主题。 我们将在您的网站上编辑一些微妙的文件。 因此，任何不必要的更改都可能导致您的网站出现更多问题。

如果您需要帮助，您甚至可以使用 WordPress 最好的子主题插件之一来创建子主题。

2.1。 查找页面/帖子 ID

第一步是检查我们想要应用样式的页面或帖子的 id。 您可能会注意到 id 值与上一步的相同。 但是，这与我们之前使用的 HTML id 不同。

我们现在所指的 id 是一个 PHP 变量，用于标识文章和页面。 然而，前一种方法中的 id 标识了一个 HTML 类。

值得庆幸的是，在您的网站上找到页面和发布 ID 非常容易。 打开编辑器时，您可以在后端管理仪表板上看到页面和帖子的 id。 您的浏览器的 URL 中提到了帖子或页面 ID。

页面 ID URL 在特定页面帖子上应用 CSS

获取页面或帖子 ID 的另一种方法是在子主题的functions.php文件中使用以下脚本。 只需转到外观 > 主题编辑器并打开functions.php文件。

然后，将以下代码段粘贴到编辑器中并更新文件。 它将在前端打印页面 id。

 add_action('wp_head',function(){
    $page_id = get_queried_object_id();
    回声 $page_id;
});

页面 id 前端如何在特定页面/帖子上应用 CSS

在您知道需要应用 CSS 的帖子或页面的 PHP 标识符后，您可以简单地将 CSS 打印在头部。 您可以使用我们之前使用过的相同钩子，即wp_head() 。

只需再次将以下代码段粘贴到functions.php文件中即可。

 add_action('wp_head','my_head_css');
函数 my_head_css(){
    $page_id = get_queried_object_id();
    如果（$page_id==97）{
        echo "<style> /* 你的 CSS 在这里 */ </style>";
    }
}

确保在“您的 CSS 此处”部分添加您的 CSS 并更新文件。

3. 在特定页面或帖子上包含 CSS 文件

前面的方法适用于为特定帖子或页面所需的基本自定义添加小块 CSS。 但对于较大的 CSS 脚本，您必须遵循良好做法并上传单独的 CSS 文件。 应该收集所有自定义 CSS 的地方。

3.1。 使用代码编辑器创建 CSS 文件

首先，您需要使用代码编辑器创建包含所有必要 CSS 脚本的分离的 CSS 文件。 可以使用 Visual Studio Code、Sublime text 或任何其他支持 CSS 文件的编辑器。

然后，创建一个带有 CSS 扩展名的新文件并将您的代码粘贴到此处。 我们为本教程命名了文件my-style.css 。

3.2. 将 CSS 文件上传到子主题文件夹

现在，您创建的 CSS 文件必须上传到子主题目录。 为此，您可以使用像 FileZilla 这样的 FTP 客户端来上传文件。 您甚至可以将其上传到主子主题目录本身。

3.2. 将您的自定义 CSS 文件排入队列

现在，您可以通过在您的 functions.php 文件中添加代码片段来将您的自定义 CSS 文件排入您的 WordPress 网站。

在下面的脚本中，我们将使用wp_enqueue_script()钩子，这是将 CSS 文件应用到 WP 网站的正确方法。 在函数内部，仅当满足条件时，我们才注册并入队我们的 CSS 文件（ my-styles.css ）。 这与上一个示例的用法相同。

然后， get_queried_object_id()函数将检索当前页面或帖子的 id。 您所要做的就是再次将以下脚本添加到functions.php文件并更新它。

 add_action('wp_enqueue_scripts', 'my_theme_styles');

功能 my_theme_styles() {
    如果（get_queried_object_id（）==97）{
        wp_register_style('my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
        wp_enqueue_style('my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
    }
}

注意：在上面的示例脚本中，我们引用了我们在前面示例中使用的相同 ID 引用，即 97。

如果您想了解有关添加 CSS 文件的更多信息，请查看我们将 CSS 应用于 WordPress 的详细指南。

结论

这些都是您可以将 CSS 应用于特定页面或帖子的各种方法。 它可以帮助您为网站的特定页面和帖子创建独特的设计。 总而言之，有 3 种最常见的方法可以将 CSS 添加到特定页面和帖子：

  • 使用 HTML id 或类
  • 添加 PHP 函数
  • 在特定页面或帖子中包含 CSS 文件

其中最直接的方法是为 CSS 选择器使用 HTML id 或类。 但是，如果您的主题有任何限制，您的下一个最佳选择是添加一个 PHP 函数来应用 CSS。 最后，如果您必须为特定页面或帖子应用大型 CSS 脚本，将它们包含在 CSS 文件中是最适合您的方法。

如果您想在您的网站上使用更多 CSS，我们还有使用 CSS 自定义 Divi 菜单或以编程方式编辑 WooCommerce 商店的教程。 同样，您还可以在我们的指南的帮助下自定义您的页面和帖子，以编程方式创建帖子和页面，将帖子转换为页面，创建自定义帖子类型，甚至在 WordPress 中将帖子添加到页面。

那么，您现在可以将 CSS 应用于特定页面或帖子吗？ 本教程有帮助吗？ 请在评论中告诉我们。 同时，这里还有一些您可能想要访问的文章：

  • 如何在 WordPress 中转换/更改帖子类型
  • 以编程方式创建 WordPress 自定义帖子类型
  • 如何自定义 WooCommerce 购物车页面