wordpress模板引入css|极客教程

wordpress模板引入css

在创建或修改wordpress主题时，通常会涉及到样式的设计和美化。为了使主题具有更加独特和美观的外观，我们需要引入自定义的CSS样式表。本文将详细介绍在wordpress主题中如何引入CSS样式表。

新建CSS文件

首先，我们需要新建一个CSS文件，可以命名为style.css，也可以根据实际需求命名为其他名称。在这个CSS文件中，我们可以编写自定义的样式规则，比如修改页面背景颜色、调整字体大小、设置边框样式等。

下面是一个简单的示例，我们在style.css中编写以下样式规则：

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    color: blue;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

引入CSS样式表

接下来，我们需要将新建的CSS文件引入到wordpress主题中。一般而言，我们可以通过两种方式引入CSS样式表，分别是使用<link>标签和使用wordpress提供的wp_enqueue_style()函数。

使用`<link>`标签引入CSS

我们可以直接在主题文件的header.php中使用<link>标签引入CSS文件。在head标签中添加如下代码：

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

这行代码会在页面加载时自动引入主题目录下的style.css文件。

使用`wp_enqueue_style()`函数引入CSS

wordpress提供了wp_enqueue_style()函数，可以更加灵活地引入CSS样式表。我们可以将引入样式的操作放在functions.php文件中。在functions.php中添加如下代码：

function enqueue_custom_styles() {
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');