简体   繁体   English

Wordpress 样式表未加载

[英]Wordpress stylesheet not loading

SOLUTION解决方案

The problem was that I didn't include the header on index.php问题是我没有在 index.php 中包含标题

<?php
    get_header();
?>

I added this on the first line of index.php, removing the opening and tags and it started working.我在 index.php 的第一行添加了这个,删除了开头和标签,它开始工作了。

ORIGINAL POST原帖

I know this has been posted about already, but none of the solutions I try seem to be working.我知道这已经发布了,但是我尝试的所有解决方案似乎都不起作用。

I am trying to load a stylesheet for my wordpress theme, but it doesn't seem to be working.我正在尝试为我的 wordpress 主题加载样式表,但它似乎不起作用。 My stylesheet is named style.css and it resides in the root folder (the theme folder), alongside index.php , header.php , footer.php and functions.php .我的样式表名为style.css ,它位于根文件夹(主题文件夹)中,旁边还有index.phpheader.phpfooter.phpfunctions.php

Edit: Using the firefox debugger shows that the stylesheet is definitely not loading.编辑:使用 firefox 调试器显示样式表绝对没有加载。 The style editor section gives me a, "This page has no stylesheet."样式编辑器部分显示“此页面没有样式表”。

Here are the contents of those files:以下是这些文件的内容:

index.php索引.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>

</body>
</html>

style.css样式文件

body{
    background-color: green;
    background: green;
}

header.php头文件

<!DOCTYPE html>
<html>
<head>
    <?php wp_head();?>
</head> 
</html>

footer.php页脚.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <footer class="site-footer"></footer>
    <?php wp_footer(); ?>
</body>
</html>

functions.php函数.php

<?php
    function load_css(){
        wp_enqueue_style('styles',get_stylesheet_uri());
    }
    add_action('wp_enqueue_scripts', 'load_css');
?>

Your templates are being used incorrectly.您的模板使用不正确。 You should not be starting and ending a complete HTML document in each of these files.您不应该在这些文件中的每一个中开始和结束一个完整的 HTML 文档。

Template Hierarchy模板层次结构

WordPress will compose a page for you by using the sub-templates header.php at the top, footer.php at the bottom, and with the appropriate template in between. WordPress 将使用顶部的子模板header.php 、底部的footer.php以及中间的适当模板为您组成一个页面。 Very important to note the template hierarchy in WordPress.注意 WordPress 中的模板层次结构非常重要。 Different template parts will be called for based on which view is being rendered.将根据正在呈现的视图调用不同的模板部分。 Any good theme has a variety of templates for different contexts and purposes.任何好的主题都有用于不同上下文和目的的各种模板。 Read: https://developer.wordpress.org/themes/basics/template-hierarchy/ .阅读: https : //developer.wordpress.org/themes/basics/template-hierarchy/

Example例子

Your blog will be rendered like this:您的博客将呈现如下:

header.php

index.php

footer.php

A single blog post will use this:一篇博文将使用这个:

header.php

single.php

footer.php

A page will use this:一个页面将使用这个:

header.php

page.php

footer.php

etc...等等...

Theming主题化

A good idea is to take a look at the contents of these files in a default WordPress theme, note how the document is started in header.php, and is closed in footer.php.一个好主意是在默认的 WordPress 主题中查看这些文件的内容,注意文档是如何在 header.php 中启动的,以及如何在 footer.php 中关闭的。 Follow this and your stylesheet will be enqueued as expected.按照此操作,您的样式表将按预期排队。 More reading on themes: https://developer.wordpress.org/themes/getting-started/what-is-a-theme/更多关于主题的阅读: https : //developer.wordpress.org/themes/getting-started/what-is-a-theme/

The stylesheet URI you are enqueueing in functions.php , doesn't look complete to me.您在functions.php中排队的样式表 URI 在我看来并不完整。 This bit:这一点:

get_stylesheet_uri()

This will just get the directory of the of the stylesheet, which is usually the root directory of the theme.这只会得到样式表的目录,通常是主题的根目录。 You need to point to the specific stylesheet, so your function would look like this:您需要指向特定的样式表,因此您的函数将如下所示:

function load_css(){
  wp_enqueue_style('styles', get_stylesheet_uri() . '/style.css' );
}
add_action('wp_enqueue_scripts', 'load_css');

...where . '/styles.css' ...哪里. '/styles.css' . '/styles.css' is completing the path to the stylesheet file. . '/styles.css'正在完成样式表文件的路径。 Make sure the file name matches.确保文件名匹配。

Resource: https://developer.wordpress.org/reference/functions/get_stylesheet_uri/资源: https : //developer.wordpress.org/reference/functions/get_stylesheet_uri/

Sorry I didnt see notice that the first time My other answer still applies for the templating issues I saw the first time.抱歉,我第一次没有看到通知我的其他答案仍然适用于我第一次看到的模板问题。

The problem was that I didn't include the header on index.php问题是我没有在 index.php 中包含标题

<?php
    get_header();
?>

I added this on the first line of index.php, removing the opening and tags and it started working.我在 index.php 的第一行添加了这个,删除了开头和标签,它开始工作了。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM