在 style.css 中隐藏 css 源代码答案

【问题标题】：Hiding css source code in style.css在 style.css 中隐藏 css 源代码
【发布时间】：2016-07-28 23:17:48
【问题描述】：

当您通过源代码视图打开链接时，我注意到一些 WP 网站的 style.css 文件几乎是空的。例如，只有这些行出现。

/*
Theme Name: xxxx
Author: xxx
Author URI: http://xxxx.com
Description: 
Version: 1.0.0
*/

*{
    margin:0;
    padding:0;
    outline:none;
}

我该怎么做？谢谢你的帮助。

【问题讨论】：

不是隐藏，而是将 CSS 作为单独的文件包含在内。

标签： css wordpress stylesheet

【解决方案1】：

它们很可能包含包含其他样式的其他 CSS 文件，因为您上面给出的示例是一个简单的 CSS 重置，它从每个 html 元素中删除所有边距、填充和轮廓。这与从一张白纸开始，删除所有行基本相同。

所以现在您可以添加自己的自定义 CSS 文件，而无需担心任何可能影响它的父声明。

将 CSS 文件添加到 Wordpress 的正确方法是通过您的函数文件。

在某处创建另一个 CSS 文件，然后将新文件放入 wp_enqueue_scripts 挂钩中。注意：你应该搜索你的函数文件，看看这个钩子是否已经在那里，因为你不应该只是将它复制并粘贴到你的文件中。

function load_scripts() {
    wp_enqueue_style( 'stylesheet', get_stylesheet_uri() ); // Your existing style.css file
    wp_enqueue_style( 'custom-css', get_template_directory_uri().'/css/custom.css', array('stylesheet'); // Your new css file, with path, and dependency, so it loads AFTER the original stylesheet
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );

【讨论】：

我只想补充一点，这个重置（以及一般的任何重置）是一件非常糟糕的事情。像 normalize.css 这样的 CSS 基础通常是一个更好的主意。

【解决方案2】：

我想你是在问如何隐藏 CSS 文件的源代码并让浏览器仍然使用它。这里有几件事，您可以（应该）阅读更多内容

您应该知道 style.css 在 wordpress 中的工作原理及其在 wordpress 主题文化中的用途
如果您正在创建您不想复制的 CSS 或者您正在复制其他人的 CSS 文件但无法理解它，您应该了解缩小以及它如何帮助或导致问题。

wordpress 中的第一个 style.css 以主题信息开头，因此每个主题都可以从该文件中获取其元数据。它可以是完全非 CSS 的，只有顶部评论用于主题信息。 Wordpress 有其他方法可以在页眉和页脚中注册 CSS 和 JS 文件，您可以使用这些方法，并且可以通过开发人员工具等各种工具查看这些文件。

二次缩小是通过引入各种检查来减小文件大小的过程，例如额外的空格、组合规则或使变量名变小。其中一些规则使 CSS 文件对人类不可读，但它们对浏览器确实有意义。所以你可能会在源代码中看到一个混乱的 CSS 文件，但是当你检查元素时，像 chrome 之类的一些浏览器可以为你解开它。

为了回答您的问题，主题的作者已将这些行放在 css 文件中并将其与主题一起存储，但 css 的其余部分在其他文件中，这些文件在实际页面的头部或底部排队。也有可能主题可能不需要太多 CSS 并使用默认浏览器 CSS 或者它是内联的。也有一些疯狂的人没有 CSS。

你是怎么做到的？

在您的主题中使用 this technique 添加其他文件，如果您愿意，您可以将所有 css 从主题复制到另一个名为 blabla.css 的文件中，并将其放入您的主题文件夹并从 style.css 中删除除主题之外的所有 css元数据。将其排入队列，style.css 将显示为空，而 blabla.css 将包含所有 css。

【讨论】：