如何在 functions.php 中添加CSS 和 JavaScript文件

创建原始 WordPress 主题时，我们很多时候要用我们自己CSS和JavaScript文件，所有我们讲一下，如何在Wordpress中加载 CSS 和 JavaScript 文件？对于刚刚学习WordPress的人来说，有很多人会在头模板文件（header.php）的<head>元素中直接写链接，这种方法也可以添加CSS和JavaScript文件，不过不过WordPress官方手册上说“不要将主题样式表链接到header模板”，建议在functions.php中使用wp_enqueue_script()和wp_enqueue_style() 函数，所以这次我们介绍一下如何在functions.php中加载CSS和JavaScript。

header.php加载问题

首先加载 header.php 有什么问题？即使您以与 HTML 相同的方式从 <head> 元素链接，网站的外观也不会出现任何问题。

示例）读取 <head>

<head>
  〜
  <link rel="stylesheet" href="css/style.css">
  <script src="js/style.js"></script>
</head>

然而，即使表面上没有问题，背后也可能有问题。

例如，一些 WordPress 插件在安装和激活时使用外部 JavaScript 库。如果在 header.php 中加载相同的库，文件可能会重叠或冲突，插件可能无法正常工作。

此外，如果您想在 </body> 之前加载 JavaScript，则需要将其写入 footer.php 而不是 header.php。如果像这样直接写在模板文件中，就得在想看的位置加上链接，后面增删文件的时候还要修改所有的文件，可维护性的恶化就成了一个严重的问题。

加载functions.php

通过官方推荐的functions.php加载，可以避免同一个文件的重复和冲突，改变JavaScript的加载位置。此外，由于可以集中管理CSS和JavaScript，可维护性大大提高。

下面是在functions.php中加载CSS和JavaScript的描述示例

function add_link_files() {

  // 读取CSS
  wp_enqueue_style( 'common',　get_stylesheet_directory_uri().'/css/common.css' );
  wp_enqueue_style( 'my-style', get_stylesheet_directory_uri().'/css/style.css', array('common'));

  // 读取JavaScript
  wp_enqueue_script( 'my-script', get_template_directory_uri().'/js/script.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'add_link_files' );

“wp_enqueue_style( )”和“wp_enqueue_script( )”不能单独使用，所以首先将它们放在一个名为“add_link_files（名称任意）”的函数中。并且可以通过在第 10 行的操作挂钩“add_action(‘wp_enqueue_scripts’,’函数名称’);”中描述函数名称来加载。

在下面，我们将详细介绍用于加载 CSS 和 JavaScript 的函数内容。

加载CSS（wp_enqueue_style）

使用函数“wp_enqueue_style( )”加载 CSS文件。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

参数	注释	固定值
$handle	句柄名称（任何名称）。对其进行设置，使其不与其他 CSS 文件名重叠。	没有
$src	CSS 文件引用路径。	空字符串
$deps （可选）	具有依赖性的文件。从该文件中设置需要预读的文件的句柄名（$handle）。由于它被写成一个数组，因此可以进行多种设置。	array( )
$ver （可选）	版本号。附加到 CSS 文件的末尾。	false
$media （可选）	媒体属性。	all

加载 JavaScript (wp_enqueue_script)

使用函数“wp_enqueue_script( )”加载 JavaScript。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

参数	注释	固定值
$handle	句柄名称（任何名称）。设置它，使其不与其他 JS 文件名重叠。	没有
$src	JS 文件引用路径。	false
$deps （可选）	具有依赖性的文件。从该文件中设置需要预读的文件的句柄名（$handle）。由于它被写成一个数组，因此可以进行多种设置。	array( )
$ver （可选）	版本号。附加到 JS 文件的末尾。	false
$in_footer （可选）	设置读取位置。指定 false 将其放置在 <head> 中，指定 true 将其放置在 </body> 之前。	false

基本上，最好在 HTML 完成加载后执行脚本，因此我们推荐将$in_footer 的值设置为 true ，这样就可以在 </body> 之前加载它。

在特定页面加载

有时您希望只在特定页面上加载 CSS 或 JavaScript。在这种情况下，您可以在页面上使用条件分支标记，如下所示。

条件分支的描述示例

function add_link_files() {

  // Contact的页面上添加
  if ( is_page('contact') ) {
	wp_enqueue_style('flow', get_stylesheet_directory_uri().'/css/flow.css');
  }
  // 在错误页面上添加
  if ( is_404() ) {
    wp_enqueue_script('reload', get_template_directory_uri().'/js/reload.js', false, true);
  }
}
add_action( 'wp_enqueue_scripts', 'add_link_files' );

总结

本次介绍如何在functions.php中加载CSS和JavaScript。
对于刚学WordPress的人来说，一下子接触到functions.php可能有点拿督，但这是使用WordPress必备的知识。另外，functions.php在以后还有很多机会可以使用，比如去掉不必要的代码让网站更轻量和定制插件等等。如果你还没有接触太多，我希望这篇文章能给你一个尝试的机会。

header.php加载问题

加载functions.php

关联内容