我正在尝试在Wordpress中正确设置我的函数.php文件。我一直使用的主题一直在 header.php 中提取样式表和 JS 文件，所以我无法制作覆盖这些的子主题。我正在尝试将样式表和 JS 文件排入函数中的队列.php而不是标头.php。但是，没有任何样式显示，并且我收到此错误：
资源解释为样式表，但以 MIME 类型传输
这是原始标头.php：
<!-- WP Linked Resources -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<link rel="shortcut icon" href="<?php echo
get_stylesheet_directory_uri(); ?>/favicon.ico" />
<!-- Bootstrap -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?
>/assets/bootstrap.min.css">
<!-- MegaMenu stylesheet -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?
>/assets/megamenu.css">
<!-- Webfont Kit -->
<link rel="stylesheet" type="text/css" href="<?php
bloginfo('template_directory'); ?>/assets/MyFontsWebfontsKit.css">
<!-- less -->
<link rel="stylesheet/less" type="text/css" href="<?php
bloginfo('template_directory'); ?>/assets/stylesheet.less">
<script src="<?php bloginfo('template_directory'); ?>/assets/less.js"
type="text/javascript"></script>
<!-- print CSS -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?
>/assets/print.css" type="text/css" media="print" />
<!-- google translate -->
<meta name="google-translate-customization" content="d4ae87e62341359b-
83f2b047a4c8818c-g4cbb26cb8a5f11dd-11"></meta>
<!-- Android scroll bug fix -->
<script type="text/javascript" src="<?php
bloginfo('template_directory'); ?>/assets/touchscroll.js"></script>
<?php wp_head(); ?>
以下是函数.php，我尝试将原始标头中的所有文件排队.php
function add_theme_scripts() {
wp_enqueue_style(
'generic-style',
get_stylesheet_directory_uri() );
wp_enqueue_style(
'favicon',
get_stylesheet_directory_uri().'favicon.ico');
wp_enqueue_style(
'bootstrap',
get_stylesheet_directory_uri(). '/assets/bootstrap.min.css');
wp_enqueue_style(
'megamenu-stylesheet',
get_stylesheet_directory_uri(). '/assets/megamenu.css');
wp_enqueue_style(
'webfont-kit',
get_stylesheet_directory_uri().'/assets/MyFontsWebfontsKit.css');
wp_enqueue_style(
'less',
get_stylesheet_directory_uri().'/assets/stylesheet.less');
wp_enqueue_script(
'less-js',
get_stylesheet_directory_uri().'/assets/less.js');
wp_enqueue_style(
'print-css',
get_stylesheet_directory_uri().'/assets/print.css');
}
add_action( 'wp_enqueue_scripts', '/add_theme_scripts' );
关于如何正确排队我的 css 和 JS 的任何建议？
如果 css 和 js 位于您的主题文件夹中，您应该尝试使用 get_template_directory_uri((。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'generic-style', get_stylesheet_directory_uri() );
wp_enqueue_style( 'favicon', get_template_directory_uri() . '/favicon.ico');
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/bootstrap.min.css');
wp_enqueue_style( 'megamenu-stylesheet', get_template_directory_uri() . '/assets/megamenu.css');
wp_enqueue_style( 'webfont-kit', get_template_directory_uri() .'/assets/MyFontsWebfontsKit.css');
wp_enqueue_style( 'less', get_template_directory_uri() .'/assets/stylesheet.less');
wp_enqueue_script( 'less-js', get_template_directory_uri() .'/assets/less.js');
wp_enqueue_style( 'print-css', get_template_directory_uri() .'/assets/print.css');
}
解决方案
所以我发现我的stylesheet.less是用MIME类型的文本/纯文本传输的，因为浏览器不知道如何解释更少。我通过打开我的终端，转到 mytheme> assets> wp 内容>主题(我的 stylesheet.less 所在的位置(并键入以下内容，将我的 less 编译为 css：
npm install -g less
lessc stylesheet.less > stylesheet.css
然后我更新了函数.php以排队正确的样式表：
wp_enqueue_style(
'less',
get_stylesheet_directory_uri().'/assets/stylesheet.css');
那应该可以！
注意，我在让我的网站正确呈现样式方面仍然遇到问题，所以我浏览了我排队的所有文件并将它们一一注释掉，看看是否可以解决问题。我发现我的打印.css文件是罪魁祸首，所以我把它注释掉了，我的网站工作正常。