如何在 WordPress 主题中引入新的 CSS 样式表?

如何在 WordPress 主题中引入新的 CSS 样式表?
如何在 WordPress 主题中引入新的 CSS 样式表?

CSS 样式表规则,控制着 WordPress 网站的外观。我们可以直接向主题的 CSS 样式表添加 CSS 规则,也可以通过 WordPress 仪表盘 “外观”-“自定义”-“额外的CSS”,来添加 CSS 样式规则。今天,牛奇网向大家介绍一种新的方式,通过引入新的 CSS 样式表的方式。

创建新的样式表文件

直接在 WordPress 的主题目录下,创建一个新的 CSS 样式表文件,或者在本地创建后通过 FTP 工具上传到 WordPress 主题文件夹。

现在,我们创建一个名为 custom.css 的新的样式表文件,然后将该 CSS 文件上传到当前正在使用的 WordPress 主题目录下。如果需要引入多个 CSS 文件,将多个样式表文件全部上传即可。

在 Header.php 文件中引入自定义样式表

上传的自定义样式表,还不会影响网站的样式,我们还需要在主题的 Header.php 模板文件中引入自定义样式表。

通过将下面所示的<link>标签,添加到网站的<head>部分,最好在</head>结束标记之前。这样自定义 CSS 样式就会对网站发挥作用了。网站的<head>部分通常位于主题文件夹 header.php 文件中,可以通过 WordPress 主题编辑器编辑。

<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">

在上面的示例中,Wordpress 网站根目录位于服务器“ test-site ”文件夹中,而正在使用的 WordPress 主题的文件夹为“ test-theme ”,自定义 CSS 文件名称为“ custom.css ”。

通过这样的方法,虽然可以将自定义 CSS 文件引入,但我们更建议通过下面的方法引入样式表文件。

使用 wp_register_style()wp_enqueue_style() 函数引入 CSS 文件

WordPress 提供了两个函数帮我们更有效的引入样式表,它们是 wp_register_style()wp_enqueue_style() 函数。

首先,找到当前主题的 functions.php 文件。可以通过 WordPress 主题编辑器,或者可以使用 FTP 或 宝塔面板 文件管理器来完成。如果正在使用子主题,那么就编辑子主题 functions.php 文件。这样就可以避免在更新主题时丢失自定义样式表。在 functions.php 文件的底部添加以下代码:


function additional_stylesheets() {

wp_register_style( 'custom', get_template_directory_uri().'/custom.css'  );
wp_enqueue_style( 'custom' );
}

add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

在上面的示例中,我们将注册函数命名为“ additional_stylesheets ”,并注册了一个名为“ custom.css ”的 CSS 样式表文件,该文件之前已上传到我们的主题文件夹中。

  • 函数名称可以随意命名,但名称最好具有标示性,另外更改了函数的名称后,需要将高亮部分统一更改。
  • 样式表文件的名称也可以自定义,但是需要将红色高亮的样式表名称“custom”统一变更。

完成上面的操作后,就可以开始将自定义的 CSS 代码写入新的 “custom.css” 样式表了。现在,新的样式表文件已经开始发挥作用了。如果添加规则后没有发生变化,可以尝试清理浏览器的缓存。

使用 wp_register_style() 和 wp_enqueue_style() 引入多个自定义样式表文件

可以使用该方法引入多个样式表文件,但是多个样式表可能会对 WordPress 网站的加载速度产生负面影响。

现在,假设我们要引入两个新的样式表文件,一个名为 custom.css ,用于控制 PC 端样式;还有一个名为 responsive.css 用于控制移动端样式展现。


function additional_stylesheets() {

wp_register_style( 'custom', get_template_directory_uri().'/custom.css'  );
wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css'  );
// register another file here
wp_enqueue_style( 'custom' );
wp_enqueue_style( 'responsive' );
// enqueue another file here
}

add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

原创文章,作者:牛奇网,如若转载,请注明出处:https://www.niuqi360.com/wordpress/embed-custom-stylesheet-files-into-wordpress/

发表评论

登录后才能评论