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

----＆gt;然后下载bootstrap.css，因为它已导入。

最好直接在HTML文档中导入它们：

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

See this question了解更多信息。

WordPress - CSS导入对我不起作用

2 个答案: