admin管理员组文章数量:1336357
I am new to wordpress and am trying to develop a child theme on localhost for the first time. I am trying to load style.css using this code in functions.php. This is the entire functions.php file:
<?php
//registers styles in header
function load_stylesheets()
{
wp_register_style('bootstrap', get_stylesheet_directory_uri().'/assets/css/bootstrap.css', array(), false, 'all');
wp_enqueue_style( 'bootstrap');
wp_register_style('style', get_stylesheet_directory_uri().'/style.css', array(), false, 'all');
wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
?>
My style.css file is in my main directory and it has this style in it
body {background-color:black;}
My header.php file is
<!DOCTYPE html>
<head>
<?php wp_head();?>
</head>
<body <?php body_class();?>>
My footer.php file is
<footer>
</footer>
<?php wp_footer();?>
</body>
</html>
When I inspect my homepage source code it shows my style.css is loading but I am not seeing the style applied (the black background).
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='wp-block-library-css' href='http://homepage:8888/wp-includes/css/dist/block-library/style.min.css?ver=5.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css' href='http://homepage:8888/wp-content/themes/cc/assets/css/bootstrap.css?ver=5.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='style-css' href='http://homepage:8888/wp-content/themes/cc/style.css?ver=5.4.2' type='text/css' media='all' />
<link rel='/' href='http://homepage:8888/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://homepage:8888/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://homepage:8888/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 5.4.2" />
<link rel="canonical" href="http://homepage:8888/" />
<link rel='shortlink' href='http://homepage:8888/' />
<link rel="alternate" type="application/json+oembed" href="http://homepage:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%homepage%3A8888%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://homepage:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%homepage%3A8888%2F&format=xml" />
When I click on the "http://homepage:8888/wp-content/themes/cc/style.css?ver=5.4.2" it appears that my style of "body {background-color:black;}" is showing but I just don't see it applied to the homepage. It looks like it's being overridden by the Bootstrap's reboot.scss file, which I deleted from my css folder so I'm not sure why it's still showing. Is there also a reason why it is adding "ver=5.4.2" to the end?
EDIT:
I have tried hard refreshing and checked my debug log before I posted this. The debug log says this, but I still don't understand what it's saying and I am following my tutorial video to a T.
thrown in /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/template-parts/content-archive.php on line 27
[28-Jul-2020 04:58:53 UTC] PHP Fatal error: Uncaught Error: Call to undefined function the_exerpt() in /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/template-parts/content-archive.php:27
Stack trace:
#0 /Applications/MAMP/htdocs/homepage/wp-includes/template.php(725): require()
#1 /Applications/MAMP/htdocs/homepage/wp-includes/template.php(672): load_template('/Applications/M...', false)
#2 /Applications/MAMP/htdocs/homepage/wp-includes/general-template.php(168): locate_template(Array, true, false)
#3 /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/index.php(20): get_template_part('template-parts/...', 'archive')
#4 /Applications/MAMP/htdocs/homepage/wp-includes/template-loader.php(106): include('/Applications/M...')
#5 /Applications/MAMP/htdocs/homepage/wp-blog-header.php(19): require_once('/Applications/M...')
#6 /Applications/MAMP/htdocs/homepage/index.php(17): require('/Applications/M...')
#7 {main}
thrown in /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/template-parts/content-archive.php on line 27
[28-Jul-2020 06:24:51 UTC] PHP Parse error: syntax error, unexpected '}', expecting ')' in /Applications/MAMP/htdocs/homepage/wp-content/themes/cc/functions.php on line 6
[28-Jul-2020 06:24:51 UTC] PHP Notice: Trying to access array offset on value of type bool in /Applications/MAMP/htdocs/homepage/wp-includes/class-wp-recovery-mode-email-service.php on line 339
[28-Jul-2020 06:24:51 UTC] PHP Notice: Trying to access array offset on value of type bool in /Applications/MAMP/htdocs/homepage/wp-includes/class-wp-recovery-mode-email-service.php on line 340
[28-Jul-2020 06:26:51 UTC] PHP Parse error: syntax error, unexpected '}', expecting ')' in /Applications/MAMP/htdocs/homepage/wp-content/themes/cc/functions.php on line 6
[28-Jul-2020 07:03:18 UTC] PHP Notice: Undefined variable: version in /Applications/MAMP/htdocs/homepage/wp-content/themes/cc/functions.php on line 10
[28-Jul-2020 07:03:19 UTC] PHP Notice: Undefined variable: version in /Applications/MAMP/htdocs/homepage/wp-content/themes/cc/functions.php on line 10
I am new to wordpress and am trying to develop a child theme on localhost for the first time. I am trying to load style.css using this code in functions.php. This is the entire functions.php file:
<?php
//registers styles in header
function load_stylesheets()
{
wp_register_style('bootstrap', get_stylesheet_directory_uri().'/assets/css/bootstrap.css', array(), false, 'all');
wp_enqueue_style( 'bootstrap');
wp_register_style('style', get_stylesheet_directory_uri().'/style.css', array(), false, 'all');
wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
?>
My style.css file is in my main directory and it has this style in it
body {background-color:black;}
My header.php file is
<!DOCTYPE html>
<head>
<?php wp_head();?>
</head>
<body <?php body_class();?>>
My footer.php file is
<footer>
</footer>
<?php wp_footer();?>
</body>
</html>
When I inspect my homepage source code it shows my style.css is loading but I am not seeing the style applied (the black background).
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='wp-block-library-css' href='http://homepage:8888/wp-includes/css/dist/block-library/style.min.css?ver=5.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css' href='http://homepage:8888/wp-content/themes/cc/assets/css/bootstrap.css?ver=5.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='style-css' href='http://homepage:8888/wp-content/themes/cc/style.css?ver=5.4.2' type='text/css' media='all' />
<link rel='https://api.w/' href='http://homepage:8888/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://homepage:8888/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://homepage:8888/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 5.4.2" />
<link rel="canonical" href="http://homepage:8888/" />
<link rel='shortlink' href='http://homepage:8888/' />
<link rel="alternate" type="application/json+oembed" href="http://homepage:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%homepage%3A8888%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://homepage:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%homepage%3A8888%2F&format=xml" />
When I click on the "http://homepage:8888/wp-content/themes/cc/style.css?ver=5.4.2" it appears that my style of "body {background-color:black;}" is showing but I just don't see it applied to the homepage. It looks like it's being overridden by the Bootstrap's reboot.scss file, which I deleted from my css folder so I'm not sure why it's still showing. Is there also a reason why it is adding "ver=5.4.2" to the end?
EDIT:
I have tried hard refreshing and checked my debug log before I posted this. The debug log says this, but I still don't understand what it's saying and I am following my tutorial video to a T.
thrown in /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/template-parts/content-archive.php on line 27
[28-Jul-2020 04:58:53 UTC] PHP Fatal error: Uncaught Error: Call to undefined function the_exerpt() in /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/template-parts/content-archive.php:27
Stack trace:
#0 /Applications/MAMP/htdocs/homepage/wp-includes/template.php(725): require()
#1 /Applications/MAMP/htdocs/homepage/wp-includes/template.php(672): load_template('/Applications/M...', false)
#2 /Applications/MAMP/htdocs/homepage/wp-includes/general-template.php(168): locate_template(Array, true, false)
#3 /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/index.php(20): get_template_part('template-parts/...', 'archive')
#4 /Applications/MAMP/htdocs/homepage/wp-includes/template-loader.php(106): include('/Applications/M...')
#5 /Applications/MAMP/htdocs/homepage/wp-blog-header.php(19): require_once('/Applications/M...')
#6 /Applications/MAMP/htdocs/homepage/index.php(17): require('/Applications/M...')
#7 {main}
thrown in /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/template-parts/content-archive.php on line 27
[28-Jul-2020 06:24:51 UTC] PHP Parse error: syntax error, unexpected '}', expecting ')' in /Applications/MAMP/htdocs/homepage/wp-content/themes/cc/functions.php on line 6
[28-Jul-2020 06:24:51 UTC] PHP Notice: Trying to access array offset on value of type bool in /Applications/MAMP/htdocs/homepage/wp-includes/class-wp-recovery-mode-email-service.php on line 339
[28-Jul-2020 06:24:51 UTC] PHP Notice: Trying to access array offset on value of type bool in /Applications/MAMP/htdocs/homepage/wp-includes/class-wp-recovery-mode-email-service.php on line 340
[28-Jul-2020 06:26:51 UTC] PHP Parse error: syntax error, unexpected '}', expecting ')' in /Applications/MAMP/htdocs/homepage/wp-content/themes/cc/functions.php on line 6
[28-Jul-2020 07:03:18 UTC] PHP Notice: Undefined variable: version in /Applications/MAMP/htdocs/homepage/wp-content/themes/cc/functions.php on line 10
[28-Jul-2020 07:03:19 UTC] PHP Notice: Undefined variable: version in /Applications/MAMP/htdocs/homepage/wp-content/themes/cc/functions.php on line 10
Share
Improve this question
edited Jul 29, 2020 at 2:42
Candace
asked Jul 28, 2020 at 7:49
CandaceCandace
11 silver badge2 bronze badges
5
|
1 Answer
Reset to default 1Looking at your debugging output it seems like you might be developing a child theme? If so then the function get_stylesheet_directory_uri() is needed instead of get_template_directory_uri() because the latter will always use the Parent theme, whereas the former will use the Child if its present.
So try this instead:
function load_stylesheets(){
wp_enqueue_style('bootstrap', get_stylesheet_directory_uri().'/assets/css/bootstrap.css', array(), false, 'all');
wp_enqueue_style('style', get_stylesheet_directory_uri().'/style.css', array(), false, 'all');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
The other errors in your debugging are unlikely to be a cause of the missing CSS but if the above doesn't work, please paste in part of your functions.php as per my comment above.
Update. I setup a new install of WP and applied your function above, dropped in the Bootstrap 4 download files into the correct folder to simulate your setup and added the style. Nothing more than that. Everything worked fine and the background turned to Black as you'd expect.
So I think the Wordpress side of things is fine, and its possible that even the CSS setup is correct.
I think there are two further things you could check:
- ensure you can see your theme style.css appearing after/below the Bootstrap css in the head. It must be after/below else it will be overridden (which looks fine in your screenshot tbh).
- use the Inspector to see what your CSS is looking like when used by the browser. This might differ from what you expect.
In Chrome - Right click and inspect page to open DevTools. Switch to the network tab and apply the CSS filter at the top. Reload the page, and you should see all CSS files in use listed there. Click on your Style.css and you can see a preview of it on the right. Is it populated with the correct code?
Beyond this, I'm not sure I/we can help much more as the files appear to be correctly enqueued in the head.
本文标签: wp enqueue styleWhy is my wpenqueuestyle() not working
版权声明:本文标题:wp enqueue style - Why is my wp_enqueue_style() not working? 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742220956a2435438.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
http://homepage:8888/wp-content/themes/cc/style.css?ver=5.4.2
? You could use the browser Inspect function to see what style is being applied to body and where it came from, just to see if another CSS property might be overriding yours. – mozboz Commented Jul 28, 2020 at 10:26