我是 wordpress 开发的新手。我正在学习开发一个新主题。我知道对于基本的 wordpress 主题只有两个绝对必要的文件。为了测试，我创建了一个 index.php 文件和 style.css 文件，并尝试将其用作主题。但我在这样做时遇到了问题。
正在读取 index.php 文件并在主页上显示内容，但未从 style.css 文件加载 css。正在阅读第一条评论，因为可以在主题详细信息部分看到主题信息，但未加载 css。
我遇到了两种错误，第一种
“无法加载资源:服务器响应状态为 404(未找到)”
引用图片:
而且，
“获取 http://rockstargaming.hol.es/style.css net::ERR_ABORTED 404(未找到)”
起初我试图将样式表包含在 <link> 中标记，但在收到错误后，我尝试了另一种方法来排队脚本 - 通过 funstions.php 文件，但后来我什么也看不到，没有错误，也没有样式。
似乎没有任何效果，我尝试了多次。
index.php:-
<!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gym</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
Testing theme development
</div>
<div class="top-ribbon top-ribbon-left"></div>
<div class="top-ribbon top-ribbon-right"></div>
</body>
</html>
样式.css
/*
Theme Name: GymTheme
Author: SamarpitShrivastava
Author URI: https://www.google.com
Version: 1.0
*/
html,body{
margin: 0;
padding: 0;
font-size: 10px;
background-color: #1f1f1f;
}
/*Upper Ribbon*/
/*Phone*/
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 81%;
height: 13em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
box-shadow: 0 0 5 5 yellow;
}
.top-ribbon-right{
border-top: 18em solid #ffb700;
width: 0;
height: 0;
border-left: 35em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: -0.5em;
transform: rotateZ(6deg);
z-index: 200;
}
/*Phone*/
/*Tablet*/
@media only screen and (min-width: 800px){
/* For Tablets: */
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 80%;
height: 17em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
}
.top-ribbon-right{
border-top: 25em solid #ffb700;
width: 0;
height: 0;
border-left: 49em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: -1em;
transform: rotateZ(6deg);
z-index: 200;
}
}
/*Tablet*/
/*Desktop*/
@media only screen and (min-width: 1300px) {
/* For desktop: */
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 80%;
height: 20em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
}
.top-ribbon-right{
border-top: 30em solid #ffb700;
width: 0;
height: 0;
border-left: 60em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: 0em;
transform: rotateZ(6deg);
z-index: 200;
}
}
/*Desktop*/
/*Upper Ribbon*/
函数.php
<?php
function includeResources(){
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'includeResources');
?>
实际应该是这样的:
最佳答案
问题是您错误地将样式路径添加到 header 。 示例:bluebezer.com.br/style.css
您应该指向您的 css 所在的文件夹，该文件夹位于主题内而不是站点的根目录下。 示例:bluebezer.com/wp-content/themes/your-name/style.css
要获取主题的路径，请使用函数 get_template_directory_uri()
<html <?php language_attributes(); ?>>
<head>
<!-- ... other codes ...-->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() . '/style.css'; ?>" />
<!-- This wp_head function must be present in all wordpress headers. -->
<?php wp_head(); ?>
</head>
但是添加 wordpress 样式的正确方法是在 functions.php 中创建一个函数并添加类似于下面的代码:
add_action( 'wp_enqueue_scripts', 'wpsites_new_style_sheet' );
function wpsites_new_style_sheet() {
//registering a new style in wordpress
wp_register_style( 'new-style', get_template_directory_uri() .'css/new-style.css', array(), '1.0');
//stating that the new style should be displayed in wordpress
wp_enqueue_style( 'new-style' );
}
需要注意的是，这个函数会通过wp_head()自动调用你的站点header的样式；功能;它应该出现在所有 wordpress 主题标题中。
wp_head();函数负责自动显示来自插件、操作和 wordpress 面板设置的标题、脚本、样式、目标和其他信息。然后它必须出现在所有 wordpress 标题中，否则你在开发过程中会遇到各种错误和困难。
另一个重要的是函数:wp_footer(); 它负责调用额外的信息，如脚本和其他类似于 wp_head() 的设置；并且她必须始终出现在示例的页脚中:
<!-- ... other codes ...-->
<?php wp_footer(); ?>
</body>
</html>
关于php - Wordpress 不读取样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58462823/