admin管理员组文章数量:1287581
I have looked around as best I could, but I could not find a solution to this problem. I am building a custom WordPress template from scratch and the stylesheets won't load. For some reason, the javascript does. Here is what I have:
The enqueue in 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', "/[email protected]/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', "/[email protected]/dist/js/bootstrap.bundle.min.js", array(), '5.1.1');
}
add_action( 'wp_enqueue_scripts', 'test_enqueue_scripts');
?>
my testing style in 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;
}
the only page with content is 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="/[email protected]/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>
When I uncomment the lines mentioned in front-page.php, The page works excactly as intended. Otherwise, the three stylesheets do not load from wp_head(). Period. They don't appear on the page source and are not referenced in the developer tools network tab regardless of how many times I hit ctrl+f5.
Strangely enough, the script enqueue from the same file loads the scripts. The scripts show up in the network tab and a console log in scripts.js outputs to the console. It's just the stylesheets that bug out. Bootstrap is v5.1.2, downloaded directly from getbootstrap
I have also tried the following for 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', "/[email protected]/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
?>
Nothing seems to work! Is there something I am missing?
I am running WordPress Version 5.8.1 if that matters.
I have looked around as best I could, but I could not find a solution to this problem. I am building a custom WordPress template from scratch and the stylesheets won't load. For some reason, the javascript does. Here is what I have:
The enqueue in 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/npm/[email protected]/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/npm/[email protected]/dist/js/bootstrap.bundle.min.js", array(), '5.1.1');
}
add_action( 'wp_enqueue_scripts', 'test_enqueue_scripts');
?>
my testing style in 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;
}
the only page with content is 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/npm/[email protected]/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>
When I uncomment the lines mentioned in front-page.php, The page works excactly as intended. Otherwise, the three stylesheets do not load from wp_head(). Period. They don't appear on the page source and are not referenced in the developer tools network tab regardless of how many times I hit ctrl+f5.
Strangely enough, the script enqueue from the same file loads the scripts. The scripts show up in the network tab and a console log in scripts.js outputs to the console. It's just the stylesheets that bug out. Bootstrap is v5.1.2, downloaded directly from getbootstrap
I have also tried the following for 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/npm/[email protected]/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
?>
Nothing seems to work! Is there something I am missing?
I am running WordPress Version 5.8.1 if that matters.
Share Improve this question asked Oct 7, 2021 at 1:44 N.MORRN.MORR 1132 bronze badges1 Answer
Reset to default 1Theres no such hook as wp_enqueue_style. Stylesheets need to be enqueued on the wp_enqueue_scripts hook, as seen in the documentation.
So this:
add_action( 'wp_enqueue_style', 'test_enqueue_styles');
Needs to be:
add_action( 'wp_enqueue_scripts', 'test_enqueue_styles');
I'd also suggest reviewing the documentation on hooks, to understand what add_action() does.
本文标签： wp enqueue styleCustom WordPress Theme loads js but not stylesheets
版权声明：本文标题：wp enqueue style - Custom WordPress Theme loads js but not stylesheets 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741282825a2370105.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论