语法错误可能会导致CSS灾难性故障

时间:2021-11-01 作者:Samantha Banaszak

WordPress和StackExchange是新手,请原谅我的礼节不好。我正在为一门课制作一个自定义的WordPress主题,在这条线上的某个地方出现了一个我和我的教授都找不到的小错误,但这特别导致我的整个CSS页面无法加载。通过故障排除,我们发现这可能是中的某个问题。php文件。有人看到任何可能导致如此巨大问题的东西吗?我很遗憾如此笨拙地请求帮助,但我们被难住了!

index.html



<?php get_header(); ?>
<?php get_sidebar(); ?>
  <div id="content1">
    <article>
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h1 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <?php the_content(); ?>
        <?php wp_link_pages(); ?>
      <?php endwhile; ?>
    <?php endif; ?>
  </article>
</div>
<?php get_footer(); ?>

---

header.php


<html>
<head>
  <title> Portfolio</title>
  <!-- <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
  <meta name="description" content="Our first page">
  <meta name="keywords" content="html tutorial template"> -->
  <link href="style.css" rel="stylesheet">
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
footer.php, 没有什么特别重要的

<footer></footer>
</div> <!-- close wrapper -->
<?php wp_footer(); ?>
</body>
</html>

3 个回复
SO网友:Tom J Nowell

<link href="style.css" rel="stylesheet">
Because you\'re using relative URLs.

当您开机时example.com 它将加载example.com/style.css

当您开机时example.com/test 它将加载example.com/test/style.css etc等

当你在网站周围移动时,它会改变它的位置。您的任何页面都没有引用您的style.css, 它可能返回一个空的404页。

而不是在硬编码链接标记中使用相对URL,而是使用指向主题的完整绝对URL将其正确排队。

SO网友:StudioAl

如上所述,href="style.css" 这就是问题所在。但可能值得指出的是,在Wordpress中,链接到文件的最佳方法是使用其内置函数指向样式表,即使您的服务器文件结构或域名发生了更改。

因此,在您的上下文中,这将是:

<link href="<?php echo get_stylesheet_uri();?>" rel="stylesheet">
get_stylesheet_uri() 将返回样式表的完整路径,假设您已将其放置在主题文件夹的顶层并命名为style.css.

但是,在Wordpress中,最好的做法是将样式表排队,这样Wordpress知道正在调用它,并且可以调用它的依赖项,也可以调用依赖于它的其他样式。在这种情况下,而不是在header.php 文件,您将在functions.php 文件如下:

function my_custom_enqueue_function(){
    wp_enqueue_style(\'my-style\', get_stylesheet_uri());
}
add_action( \'wp_enqueue_scripts\', \'my_custom_enqueue_function\' );
有更多的属性,而不是在该示例中wp_enqueue_style() 使其更加有用的函数,因此值得查找和了解。

SO网友:Majid A.

检查此项:

<link href="<?php echo get_stylesheet_directory_uri();?>/style.css" rel="stylesheet">
如果您的style.css 主题根目录中的文件。

相关推荐