如何在WordPress中链接多个CSS文件

Question

我知道在WordPress中链接主要的style.css文件需要使用以下代码：

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

然而，我有很多需要链接到主PHP文件的CSS文件，用于诸如滑块、图片框等功能...

我不太确定该怎么做，因为<?php bloginfo('stylesheet_url');?>仅适用于名为styles.css的样式表，而我的其他样式表都有不同的名称。

有人知道我该如何将它们全部链接起来吗？

- Ryman Holmes

---

@import 是一种低技术选项。 - DJ Sipe

Answer 1

将您的所有样式表放在目录 wp-content\themes\twentyeleven\css 中。然后，您可以通过以下代码简单地链接所有这些内容：

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style1.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style2.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style3.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style4.css" />

享受编程。

- Jay

Answer 2

您的源代码中并未包含文件名... bloginfo('stylesheet_url')仅返回样式表的链接...文件夹URL通常是主题文件夹。您还需要添加文件夹（如果有）和filename.css。

请记住，编码时始终要考虑WordPress标准。链接到样式表不是最佳实践。这可以启用适当的缓存和效率，并且从长远来看更容易。

从我上周末读的免费300页书- WordPress AJAX，第53页：

// load styles + conditionally load an IE 7 stylesheet
add_action('init', 'my_theme_register_styles');
function my_theme_register_styles() { 
//Register styles for later use 
    wp_register_style('my_theme_style1', get_stylesheet_directory_uri() . '/style1.css', array(), '1.0', 'all'); 
    wp_register_style('my_theme_style2', get_stylesheet_directory_uri() . '/style2.css', array('my_theme_style1'), '1.0', 'all'); 
    wp_register_style('my_theme_style3', get_stylesheet_directory_uri() . '/style3.css', array('my_theme_style1', 'my_theme_style2'), '1.0', 'all'); 
    global $wp_styles; 
    $wp_styles->add_data( 'my_theme_style3', 'conditional', 'lte IE 7' );
}

将以下内容放到functions.php或header.php中，它会根据条件正确加载IE的样式表...

- Ben Racicot

---

我是否只需用自己的内容替换 '/style1.css'？ - Ryman Holmes

是的先生。这将注册并排队您的样式表。但要特别注意文件路径，以确保它们与您需要的匹配。我有时会回显我的内容，以确保没有额外的斜杠或缺少的文件夹等。 第三个样式将是您的IE样式表 ;) 不错吧？ - Ben Racicot

Answer 3

当前主题文件夹中是否有CSS文件？如果是这样，请尝试使用以下代码：

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

对我来说很有效。

- lee

Answer 4

如果您要硬编码添加样式到您的主题页面，最简单的方法可能是： 1）将您的样式表添加到您的样式表目录中。 2）将以下代码粘贴到头部（用您的样式表名称替换style2.css）。

<link href="<?php echo get_stylesheet_directory_uri().'/style2.css'; ?>" rel="stylesheet" />

或者

<link href="<?php blog_info('template_url').'/style2.css'; ?>" rel="stylesheet" />

如果您的样式文件在一个单独的文件夹中，只需确保将该文件夹添加到路径中（例如/styles/style2.css）。

编辑：更具体地将样式链接添加到头部，并修复了我的愚蠢错误，应该是href=而不是src=。

- Ian

---

评论来自未来，现在我比写这篇答案时多了近 5 年的经验。虽然这个方法从技术上来说是可行的，但更好、更适当的方法是将样式排队。 - Ian

Answer 5

你可以在WordPress中使用wp_enqueue_style()函数，这里有例子。

wp_enqueue_style('my_style', plugin_dir_url(__FILE__) .'/path/to/your/stylesheet');

你可以使用 wp_enqueue_styles 这个方法。

- Ronny K

---

我应该如何选择我想要链接的特定样式表？ - Ryman Holmes

它们都将“链接”，出现在每个页面上。试一试，并检查您的开发人员工具，以查看加载了哪些样式表。WordPress中的第一个样式表始终是主题文件夹中的style.css。其他任何内容都是额外的。 - Ben Racicot