WordPress - CSS 导入对我不起作用

Question

我是 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">

Answer 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' );

Answer 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 了解更多信息。