如何在wordpress中引入css和js

向wordpress主题中引入css和js的正确姿势是在functions.php中通过wp_enqueue_style()和wp_enqueue_script()这两个函数来引入主题需要的样式和脚本。

通过wp_enqueue_style()来引入css文件

函数的基本用法如下所示：

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

函数的参数含义：

• $handle 样式的名称并且名称要唯一。
• $src 样式文件的路径。后面3个参数都是可选的
• $deps 当前样式文件所依赖的文件。
• $ver 样式文件的版本号。
• $media 指定在何种媒体设备中加载，例如“all”，“screen”，“print”等。

举个例子吧，如果你想加载主题根目录下“css”文件夹内的“sidebar.css”这个样式文件，那么使用方法如下

wp_enqueue_style('sidebar', get_template_directory_uri() . '/css/sidebar.css', false, '1.1', 'all');

通过wp_enqueue_script()来引入js文件

函数的基本用法如下所示：

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

• $handle 脚本的名称并且名称要唯一。
• $src 脚本文件的路径。后面3个参数都是可选的。
• $deps 当前脚本文件所依赖的文件。
• $ver 脚本文件的版本号。
• $in_footer 将脚本放在网页的头部还是页脚。

用法跟引入样式的函数用法大致相同，举例如下

wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js' , array('jquery'), 1.1 , true);

以下是在functions.php中引入css和js的实际应用：

function add_theme_scripts(){
  wp_enqueue_style('style', get_stylesheet_uri());
  
  wp_enqueue_style('sidebar', get_template_directory_uri() . '/css/sidebar.css', array(), '1.1', 'all');
 
  wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js' , array('jquery'), 1.1, true);
 
  if(is_singular() && comments_open() && get_option('thread_comments')){
    wp_enqueue_script('comment-reply');
  }
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');