SOHO创业

如何在wordpress顶部header.php中引用css/bootstrap.css文件

在 WordPress 的 header.php 文件中引用 CSS 文件（如 bootstrap.css）是实现主题样式化的一种常见方式。以下是具体的步骤和代码示例：

1. 将 Bootstrap CSS 文件上传到主题目录

将 bootstrap.css 文件上传到你的 WordPress 主题目录中，通常可以放在一个名为 css 的子文件夹中，例如：wp-content/themes/jianzhanpress/css/bootstrap.css。

2. 在 `header.php` 中引用 `bootstrap.css`

在 header.php 文件中，使用 WordPress 的 get_template_directory_uri() 函数来正确引用 CSS 文件的路径。以下是代码示例：php

复制

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title('|', true, 'right'); ?></title>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.css" type="text/css" media="all" />
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

3. 解释代码

get_template_directory_uri()：这个函数会返回当前主题的 URL 路径，例如 http://wodepress.com/wp-content/themes/wphan。
/css/bootstrap.css：这是相对于主题目录的路径，表示 bootstrap.css 文件位于主题目录下的 css 文件夹中。
type="text/css" 和 media="all"：这些属性是 HTML 的标准属性，用于指定文件类型和适用的媒体设备。

4. 使用 `wp_enqueue_style` 函数（推荐方式）

虽然直接在 header.php 中引用 CSS 文件可以工作，但更推荐的方式是使用 WordPress 的 wp_enqueue_style 函数。这种方式更符合 WordPress 的开发规范，可以避免冲突并更好地管理样式文件。

在主题的 functions.php 文件中添加以下代码：php

复制

function my_theme_enqueue_styles() {
    // 注册并加载 Bootstrap CSS 文件
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/css/bootstrap.css', array(), '5.3.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

wp_enqueue_style：这个函数用于注册和加载样式文件。
- 第一个参数是样式文件的唯一标识符（bootstrap-css）。
- 第二个参数是样式文件的路径。
- 第三个参数是依赖项（如果有其他样式文件依赖于 Bootstrap，可以在这里列出）。
- 第四个参数是版本号（可选）。
- 第五个参数是媒体类型（all 表示适用于所有设备）。
add_action：将 my_theme_enqueue_styles 函数挂钩到 wp_enqueue_scripts 动作，确保在适当的时机加载样式文件。