Wordpress 不阅读样式表答案

【问题标题】：Wordpress not reading stylesheetWordpress 不阅读样式表
【发布时间】：2019-10-19 10:39:23
【问题描述】：

我是 wordpress 开发的新手。我正在学习开发一个新主题。我知道，对于 wordpress 主题，基本只有两个绝对必要的文件。为了测试，我创建了一个 index.php 文件和 style.css 字段，并尝试将其用作主题。但我在做这件事时遇到了问题。

正在读取 index.php 文件并在主页上显示内容，但没有从 style.css 文件中加载 css。正在阅读第一条评论，因为可以在主题详细信息部分看到主题信息，但未加载 css。

我遇到两种错误，首先

“加载资源失败：服务器响应状态为 404（未找到）” 参考图片：

而且， “GET 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>

style.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*/

functions.php

<?php

function includeResources(){
    wp_enqueue_style('style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'includeResources');

?>

实际上应该是这样的：

【问题讨论】：

你有一个错字：“function inculdeResources()”

标签： php css wordpress wordpress-theming

【解决方案1】：

问题是您错误地将样式路径添加到标题。示例：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(); 自动调用你的站点标题的样式；功能;它应该出现在所有 wordpress 主题标题中。

wp_head(); function 负责自动显示来自插件、操作和 wordpress 面板设置的标题、脚本、样式、目标和其他信息。那么它必须出现在所有的wordpress headers中，否则你在开发过程中会遇到各种错误和困难。

另一个重要的事情是函数：wp_footer(); 它负责调用额外的信息，如脚本和其他类似于 wp_head() 的设置；并且她必须始终出现在示例的页脚中：

    <!-- ... other codes ...-->
    <?php wp_footer(); ?>

</body>
</html>

【讨论】：

【解决方案2】：

您的样式表不在 WordPress 安装的根目录 (/style.css) 中，而是在您的主题目录中。这就是为什么您不应该使用 HTML link 属性，而应该在 wp_enqueue_scripts 操作中使用 wp_enqueue_style 函数。你可以使用官方的WordPress guide。

此外，您的functions.php 无效，因为style.css 未声明为字符串。应该抛出一个 PHP 错误。将此 wp_enqueue_style('style', style.css, false); 更改为 wp_enqueue_style('style', get_stylesheet_uri());。此外，由于拼写错误，您要包含的功能不存在。将函数重命名为 includeResources 而不是 inculdeResources（切换 u 和 l）。

【讨论】：

您好！实际上，首先我尝试在 includeResources 函数争论中使用“get_stylesheet_uri()”函数，但即使那样它也不起作用，然后我在 wordpress codex 上阅读了一些内容并尝试使用它，但它没有帮助。我已经更新了问题中的代码，这也不起作用，即使在 wp_footer 之后，它也不能按需要工作。