在style.css中隐藏css源代码

Question

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

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

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

我怎么能做同样的事呢？谢谢你的帮助。

Answer 1

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

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

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

在某个地方创建另一个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' );

Answer 2

我想你是在问如何隐藏CSS文件的源代码，并且仍然让浏览器使用它。这里有几件事，你可以读到更多关于这些的东西。

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

首先，wordpress中的style.css从主题信息开始，这样每个主题都可以从这个文件中提取其元数据。它可以是完全非CSS与只有顶部评论在那里的主题信息。Wordpress还有其他方法可以在页眉和页脚注册CSS和JS文件，并且可以通过开发人员工具等各种工具查看这些文件。

第二，缩小是通过引入各种检查(例如额外的空格、组合规则或使变量名变小)来减少文件大小的过程。这些规则中的一些使得CSS文件对人类来说是不可读的，但对浏览器来说确实是有意义的。因此，您可能会在源代码中看到一个混乱的CSS文件，但是一些浏览器(如chrome )可以在检查元素时为您提供UNjumble。

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

你怎么做的？

在主题中，使用这一技术添加其他文件，如果需要，可以将主题中的所有css复制到另一个名为blabla.css的文件中，并将其放到主题文件夹中，并从style.css中删除除主题元数据之外的所有css。Enqueue它和style.css将显示为空，而blabla.css将拥有所有css。