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文件，而不必担心可能会影响它的任何父声明。

将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' );

Answer 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。

在style.css中隐藏css源代码

2 个答案: