WordPress - CSS 导入对我不起作用

Posted 2023-03-06

【中文标题】WordPress - CSS 导入对我不起作用

【英文标题】：WordPress - CSS importing is not working for me

【发布时间】：2014-06-19 15:15:30

【问题描述】：

我是 WordPress n00b。我似乎无法将简单的 CSS 导入我的页面。

这是我尝试过的：

index.php

<link href="style.css" rel="stylesheet" type="text/css">

style.css

/* External */
@import: url('http://fonts.googleapis.com/css?family=Varela');
@import: url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');

/* Internal */
@import: url('css/bootstrap.css');
@import: url('css/custom-styles.css');

我也试过了：

index.php:

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css">

这只是为了确定：

<link href="<?php bloginfo('style.css'); ?>" rel="stylesheet" type="text/css">

我已经完成了研究，但除了我上面尝试过的之外我找不到任何东西。因此，如果这是重复，我深表歉意。

编辑：

这在 index.php 中的 WordPress 中不起作用：

<link href="style.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Varela" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link href="css/custom-styles.css" rel="stylesheet" type="text/css">

【问题讨论】：

我回滚了您的修订，因为您从问题中删除了问题代码。为了使下面的答案有意义，您的问题中必须使用冒号。

你确定那些文件路径是正确的吗？

@David 我很确定。我从工作静态 html 站点更改的唯一内容是添加到 style.css 的链接并将文件扩展名从 .html 更改为 .php

【参考方案1】：

对于 wordpress，您这样做是错误的。您应该对样式表进行排队。以下内容应放入您的 functions.php 文件中。

function enqueue_styles() 
    wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/style.css');

如果您在示例中使用硬编码链接，则应将这些链接添加到 header.php，但是这是不好的做法，因为 Wordpress 有自己的方式来处理依赖关系和冲突。

查看Codex

另外，如前所述，使用@import 加载多个样式表通常是不好的做法。您可以使用 enqueue 加载所有这些脚本，只需确保您需要优先的脚本最后加载：

    function enqueue_styles() 
 wp_enqueue_style( 'stylesheet', 'netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
 wp_enqueue_style( 'stylesheet', 'http://fonts.googleapis.com/css?family=Varela');
 wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css', array() );
 wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/style.css');
 wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/css/custom-styles.css');
    

然后像这样钩住它：

add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

【讨论】：

好的。所以我会复制你函数中的最后一行来添加多种样式？那些不在服务器上的样式呢？

@dustindowell22 已编辑以显示如何加载所有内容。

谢谢。现在我只需要弄清楚如何包含functions.php。

你不需要包含它。这是一个默认的 wordpress 文件，应该位于主题的顶层目录中。如果它不存在，只需创建一个名为 functions.php 的文件，wordpress 会自动加载它。

@PieterGoosen 谢谢，已修复。

【参考方案2】：

您的导入语句后不应有冒号：

@import url("css/bootstrap.css");

---

话虽如此，您所做的通常会被视为不良做法。如果 CSS 文件可以提供帮助，则不应导入其他 CSS，因为它需要您同步下载文件：

我下载了styles.css

---->然后下载bootstrap.css，因为它是导入的。

在 HTML 文档中直接导入会更好：

<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="bootstrap.css"/>

See this question 了解更多信息。

【讨论】：

谢谢。好久没用进口了。不过，我仍然有问题。我更愿意将它们导入 HTML，不过，我读到这在 WordPress 中更常见？

正如我上面所说，将所有样式表直接导入 HTML 是很常见的，因为它允许您异步下载它们。它不仅在 wordpress 中很常见，而且在所有网站中都很常见。

@dustindowell22 如果还是不行，那一定是文件路径。值得注意的是，路径是相对于样式表的来源，而不是相对于文档。

@JoshCrozier 当我尝试将 CSS 直接导入 index.php 页面时，我编辑了我的主要帖子。这是我第一次尝试，我只是认为这是 WordPress 主题的错误方式。我 100% 确定路径名是正确的。

@dustindowell22 您能否提供一个指向您尝试导入 CSS 的网站的链接？