WordPress如何在functions引入多个css

WordPress如何在functions引入多个css

在WordPress中，如果你想在functions.php文件中引入多个CSS链接（即从不同的源或文件加载多个CSS样式表），你可以使用wp_enqueue_style函数。这个函数允许你注册并排队CSS样式表，以便在WordPress页面中安全地加载它们。以下是一个示例，展示了如何在functions.php中引入多个CSS链接：

function my_theme_enqueue_styles() {
    // 引入第一个CSS链接
    wp_enqueue_style(
        'style-one', // 句柄名称
        get_template_directory_uri() . '/css/style-one.css', // 样式表文件的URL
        array(), // 依赖项（如果有的话）
        null, // 版本（可以为空或指定版本号）
        'all' // 媒体类型，默认为 'all'
    );

    // 引入第二个CSS链接
    wp_enqueue_style(
        'style-two', // 另一个句柄名称
        'https://example.com/path/to/external-style.css', // 外部样式表的URL
        array('style-one'), // 依赖第一个样式表（如果适用）
        null, // 版本（可以为空或指定版本号）
        'all' // 媒体类型
    );

    // 引入更多CSS链接...
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); // 将函数绑定到wp_enqueue_scripts钩子

1. 在这个示例中，我们为两个CSS文件定义了不同的句柄名称（style-one和style-two），并分别指定了它们的URL。对于第一个样式表，我们使用了get_template_directory_uri()函数来获取当前主题的根目录URL，并拼接了CSS文件的路径。对于第二个样式表，我们直接指定了一个外部URL。
2. 我们还指定了它们是否依赖于其他样式表（在array(‘style-one’)中），以及它们的媒体类型（在这个例子中都是’all’，表示适用于所有媒体类型）。
   最后，我们通过将my_theme_enqueue_styles函数绑定到wp_enqueue_scripts钩子来确保这些样式表在适当的时候被加载。这样，当WordPress加载页面时，这些样式表就会被包含在生成的HTML中。
3. 请注意，如果你的CSS文件位于CDN或其他外部资源上，你可以像上面的第二个示例那样直接指定URL。同时，确保你的CSS文件URL是正确的，并且文件是可以访问的。