时间戳

首页 > 解决方案 > 自定义 WordPress 主题加载 js 但不加载样式表

wordpress - 自定义 WordPress 主题加载 js 但不加载样式表

问题描述

我已尽我所能环顾四周，但找不到解决此问题的方法。我正在从头开始构建一个自定义 WordPress 模板，并且样式表不会加载。出于某种原因，javascript 确实如此。这是我所拥有的：

排队在functions.php

<?php

function test_enqueue_styles(){
    wp_enqueue_style('test-style', get_template_directory_uri() . "/style.css", array('test-bootstrap-css'), wp_get_theme()->get( 'Version' ));
    wp_enqueue_style('test-bootstrap-css', get_template_directory_uri() . "/assets/css/bootstrap.css", array(), '5.1.2');
    wp_enqueue_style('test-icons', "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css", array(), '1.4.1');

}
add_action( 'wp_enqueue_style', 'test_enqueue_styles');

function test_enqueue_scripts(){
    wp_enqueue_script('test-bootstrap-js', get_template_directory_uri() . "/assets/js/scripts.js", array(), wp_get_theme()->get( 'Version' ));
    wp_enqueue_script('test-bootstrap-js', get_template_directory_uri() . "/assets/js/bootstrap.js", array(), '5.1.2');
    wp_enqueue_script('test-bootstrap-bundle', "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js", array(), '5.1.1');
    
}
add_action( 'wp_enqueue_scripts', 'test_enqueue_scripts');

?>

我的测试风格style.css：

/*
Theme Name: Test Theme
Theme Domain: Test Theme
Version: 1.0
Description: A test theme for WordPress
Author: Me
*/

body{
    background-color: crimson !important;
}

唯一包含内容的页面是front-page.php：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>Hello World</title>
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Stylesheets-->
        <?php
            wp_head();
        ?>

<!--NOTE THESE COMMENTED LINES-->
        <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet" />
        <link href="wp-content/themes/testtheme/assets/css/bootstrap.css" rel="stylesheet" />
        <link href="wp-content/themes/testtheme/style.css" rel="stylesheet" /> -->
    </head>
    <body>
        <div class="container">
            <h1 class="jumbotron">Hello World</h1>
        </div>
    
    <?php
       wp_footer();        
    ?>
    </body>
</html>

当我取消注释 中提到的front-page.php行时，该页面完全按预期工作。否则，三个样式表不会从wp_head(). 时期。无论我按 ctrl+f5 多少次，它们都不会出现在页面源代码上，也不会在开发人员工具网络选项卡中引用。

奇怪的是，来自同一文件的脚本排队加载脚本。脚本显示在网络选项卡中，并且 scripts.js 中的控制台日志输出到控制台。只是样式表出错了。Bootstrap是v5.1.2，直接从getbootstrap.com下载

我还尝试了以下方法functions.php：

<?php

function test_enqueue_styles(){
    wp_register_style('test-style', get_template_directory_uri() . "/style.css", array('test-bootstrap'), wp_get_theme()->get( 'Version' ));
    wp_register_style('test-bootstrap', get_template_directory_uri() . "/assets/css/style.css", array(), '1.0');
    wp_register_style('test-icons', "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css", array(), '1.0');

    wp_enqueue_style('test-style');
    wp_enqueue_style('test-bootstrap');
    wp_enqueue_style('test-icons');
}
add_action( 'wp_enqueue_style', 'test_enqueue_styles');

//javascript same as above
?>

似乎没有任何工作！有什么我想念的吗？

如果这很重要，我正在运行 WordPress 版本 5.8.1。

标签： wordpress

解决方案

我花了一点时间来注册。脱离 Ruvee 所说的，wp_enqueue_style()只有在内部使用时才有效test_enqueue_styles()。使用时add_action()，我需要使用'wp_enqueue_scripts'

这是functions.php有效的代码：

<?php

function test_enqueue_styles(){
    wp_enqueue_style('test-style', get_template_directory_uri() . "/style.css", array('test-bootstrap-css'), wp_get_theme()->get( 'Version' ),false);
    wp_enqueue_style('test-bootstrap-css', get_template_directory_uri() . "/assets/css/bootstrap.css", array(), '5.1.2',false);
    wp_enqueue_style('test-icons', "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css", array(), '1.4.1',false);
}
add_action( 'wp_enqueue_scripts', 'test_enqueue_styles');

function test_enqueue_scripts(){
    wp_enqueue_script('test-js', get_template_directory_uri() . "/assets/js/scripts.js", array(), wp_get_theme()->get( 'Version' ),false);
    wp_enqueue_script('test-bootstrap-js', get_template_directory_uri() . "/assets/js/bootstrap.js", array(), '5.1.2',true);
    wp_enqueue_script('test-bootstrap-bundle', "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js", array(), '5.1.1',true);
    
}
add_action( 'wp_enqueue_scripts', 'test_enqueue_scripts');

?>

推荐阅读