在 WordPress 中覆盖样式的方法

假设您管理一个 WordPress 网站。您选择、购买并安装了一个预制主题。假设您在 WordPress 插件目录 中找到了一些项目以添加一些高级功能到网站。这就是 WordPress 生态系统的强大之处。任何拥有少量技术技能的人都可以相对轻松地创建一个网站，并拼凑出一些强大的东西，而无需从头开始构建一切。它工作得很好，您的网站看起来很美观。

直到它不工作了。

我为一个 WordPress 插件做了一些工作。毫无疑问，向支持团队报告的最常见的事情是插件与已安装的主题或其他已安装的插件发生冲突的情况。报告问题的人安装了该插件，但它的外观与插件广告中的屏幕截图完全不同。

这对管理网站的人来说可能非常令人恼火。如果此插件是从 WordPress 目录下载的，那么它应该可以开箱即用，对吧？

您可能会争辩说，考虑到大多数主题和插件都是由不同的人开发的，这是一种不切实际的期望。可以理解的是，将来自多个作者的代码混合到同一个站点中，即使每个人都尽最大努力提供良好的工作，也会导致偶尔出现一些冲突。

这篇文章将研究样式冲突的具体领域以及克服它们的方法。

我首先要说明的是，作为 WordPress 主题或插件开发者，这是一个艰难的处境。一方面，插件包含的任何样式表都需要足够有主见，以便它们能够完成它们需要做的事情并看起来很棒。另一方面，它们需要尊重当前主题和其他插件开发者的工作，以便样式能够很好地协同工作。这是一个即使是训练有素的走钢丝的人也会赞赏的平衡。

我们不会讨论 WordPress 插件开发者使主题和插件样式更兼容或可主题化的不同方法。相反，我们将研究在 WordPress 中覆盖冲突 CSS 的不同方法，这些方法使您能够控制 WordPress 网站任何组件的样式，无论它源自主题还是插件。

覆盖活动主题中的样式

所有 WordPress 网站都使用主题。CSS-Tricks 在 WordPress 上运行，它有自己的自定义主题，其中包含生成此帖子的所有模板和样式文件。好吧，假设您在网站上阅读此内容，而不是来自 联合供稿。

重点是所有主题都需要至少两个文件，其中一个是神奇的style.css。该文件是必需的，因为它包含有关主题的信息，如果没有这些信息，WordPress 将无法识别主题。

那些对 WordPress 有所了解的人可能想在这里阻止我，因为style.css不必包含 CSS，你说得对。它不必，我们也可以简单地将自己的样式表添加到主题的页眉中，并使用style.css作为主题的 shell 来进行识别。这是合法的。但是，该文件确实被设计为主题文件的首要位置，无论我们选择如何开发我们的网站。

如果您的主题使用该文件来包含主题样式，您可以直接修改它来更改网站的任何样式属性。它还可以用来添加和覆盖可能包含在插件或其他第三方来源中的样式。

覆盖子主题中的样式

活动主题方法只适用于您是主题的开发者的情况。然而，许多人使用其他开发者制作的主题。我相信您已经看到了许多主题市场，它们出售您可以购买、下载并安装到 WordPress 中的付费 WordPress 主题。这就是我们正在谈论的。

如果您使用的是这些主题之一，那么最佳实践是在 子主题 中管理您的自定义内容。这实际上是一种描述在 WordPress wp-content/themes 目录中创建新文件夹的过程的时髦方式，该文件夹与父主题同名，只是在末尾添加了-child。

例如，如果我们的父主题目录称为css-tricks，那么我们的子主题目录将称为css-tricks-child。该目录需要style.css，就像父目录一样，它将在父主题的style.css文件之后加载到站点上，因此子主题版本中包含的任何样式都将覆盖父主题的样式。

您是否希望您的青少年时期也是这样运作的？

现在，您可以根据需要进行任何更改，并且当安装主题开发者发布的未来更新时，您不会丢失这些更改。

注册并加入您自己的样式表

这是我最喜欢的覆盖 WordPress 中样式的方法之一。其理念是，您创建自己的样式表，并在所有其他样式表加载到站点主题后加载它，以便您的样式表覆盖其他样式表。

有两个有据可查的 WordPress 函数，一个是 wp_register_style()，另一个是 wp_enqueue_style()，它们允许我们执行此操作，并且可以添加到父主题或子主题的functions.php文件中，以便告诉 WordPress 查找它并在站点页眉中加载它。

这是一个关于如何使用该函数按文件名（也称为句柄）和文件路径调用样式表的简单示例

function my-custom-styles() {
  // Register my custom stylesheet
  wp_register_style('custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css');
  // Load my custom stylesheet
  wp_enqueue_style('custom-styles');
}
add_action('wp_enqueue_scripts', 'my_custom_styles');

我们可以通过告诉 WordPress 仅在特定页面上加载它来变得更花哨

// Load my custom stylesheet
function my_custom_styles() {
  // Register my custom stylesheet
  wp_register_style( 'custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css' ) );
  // Check that the current page is the homepage
  if ( is_home() ) {
    // Then grab the custom stylesheet
    wp_enqueue_style( 'custom-styles' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

请注意，向所有页面添加额外的请求是一个性能问题，但是您也可以当然可以控制它。

艺术指导

艺术指导似乎在 2009 年左右非常流行，尽管最近的数据表明略有反弹。其理念是，在单个基础上向页眉添加样式将允许您在逐帖基础上创建引人注目的布局。注入到

<style> 块中的样式，只要它们位于网站的常规样式表（可能是<link> 元素）之后，就有机会很好地覆盖现有样式。

艺术指导可以用作覆盖冲突样式的有效手段，并且当这些冲突仅存在于非常具体的位置时尤其有效，而无需创建和加载完整的样式表来清理它们。

有许多 WordPress 插件支持艺术指导。实际上，自己构建它并不太难。

使用插件

嘿，如果一个插件让您陷入这种冲突样式的困境，那么可能会有一个插件可以帮助您摆脱困境，对吧？当然有。

我相信野外还有其他插件，但我最熟悉的是 Simple Custom CSS。其理念非常简单：添加一个新屏幕，允许您编写 CSS。输入并保存的 CSS 将添加到文档页眉中，这与我们讨论的艺术指导方法一样，使您有机会在该特定页面上覆盖其他样式。

WordPress 自定义器

WordPress 4.7 在 WordPress 自定义器中引入了一项新功能，添加了 CSS 编辑器

这实际上是 WordPress 为之前提到的 Simple Custom CSS 插件添加了原生支持。换句话说，样式在保存时会添加到 head 部分。

WordPress 编辑器

哦对了，还记得它吗？您实际上可以通过导航到隐藏的 **外观 > 编辑器** 屏幕，直接在 WordPress 中编辑站点的 style.css 文件。

我必须先说，我觉得这是一个很危险的地方。它允许您编辑任何主题文件的代码，包括 PHP 模板。这些更改没有版本控制，因此很难知道在您搞砸的情况下发生了什么变化，如果您的版本控制系统负责部署，并且那里的更改可能会覆盖这里所做的更改。

尽管如此，您仍然可以在这里覆盖样式，并且无需打开文本编辑器，保存更改，然后将其上传到服务器（通过您用于部署的任何方法）。

总结

看看吧：七种在 WordPress 中覆盖样式的方法。下次您在将主题或插件安装到您的 WordPress 安装后遇到某些东西看起来不对劲的情况时，您现在有能力控制混乱并像老板一样清理干净。