零分杂记

wordpress 主题\插件\后台引入CSS/JS，其实归根结底就2种方式，怎么方便怎么来。

1、直接引入。

直接在需要的地方引入，比如主题模板，直接在header.php中引入。

2、使用官方函数导入wp_enqueue_scripts/wp_enqueue_style加载文件，从函数就可以看出wp_enqueue_scripts是加载JS文件，wp_enqueue_style是加载CSS文件。

第一种方法就很简单了，知道一点html都知道，直接引入JS/CSS文件的代码。

引入JS，你可以这样写：

<script type='text/javascript' src='js.js'></script>

引入CSS，你可以这样写：

<link rel="stylesheet" type="text/css" href="css.css">

大多情况都是直接这样写，在wordpress中，主题目录的函数是：bloginfo(‘template_url’)、bloginfo(‘template_directory’)，或者get_template_directory_uri()，都是主题目录，比如你的JS/CSS放在了主题目录img文件夹下，就可以这样写。

JS：
<script type='text/javascript' src='<?php echo bloginfo('template_directory')?>/img/js.js'></script>
CSS:
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_directory')?>/img/css.css">

一般wordpress主题的样式文件是：style.css，放在主题目录下。所以是这样的

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

主题CSS如果想要放在function里，首先需要主题放上钩子wp_head()。

然后在function.php中添加action，wordpress会添加上设置文件，其实还是第一种方式。

function addcss(){
  echo '<link rel="stylesheet" type="text/css" href="css.css">';
  echo '';
  //.....可以设置多个
}
add_action( 'wp_head', 'addcss' );

​这种，只要有钩子，就会添加，不会去判断是否已经存在什么的。有可能会出现重复加载这种情况..

接下来就是第二种，WordPress提供的函数加载文件。

1、注册函数wp_register_style()，

wp_register_style( string $handle, string|bool $src, array $deps = array(),string|bool|null $ver = false, string $media = 'all' )

$handle：字符串（必填）。样式名称，必须是唯一值。

$src：字符串或布尔值（必填）。完整的样式文件路径或基于WordPress根目录的相对路径。如果资源为false，则样式为基于其他样式的别名。

$deps：数组（可选）。样式将在该数组所包含的其他样式之后引入。

$ver：字符串、布尔值或空值（可选）。指定样式版本号，将其作为查询字符串添加到 URL 中以清除缓存。 如果设置为 false ，则自动设置当前安装的 WordPress 版本为版本号。 如果设置为 null ，则不添加任何版本。

$media：布尔值（可选）。该样式表针对何种媒体设备使用，支持“all”、’print’ 以及 ‘screen’ ，或者 ‘(orientation: portrait)’ 与 ‘(max-width: 640px)’等。

该函数返回布尔值（ true 或 false），用以判定样式是否注册。

如​：

function addcss(){
  wp_register_style('mycss','css.css','1.0.0','all');
}
add_action('wp_enqueue_scripts', 'addcss');

注释：

wp_enqueue_scripts：前台加载JS/CSS

admin_enqueue_scripts：后台加载JS/CSS

login_enqueue_scripts​：登录页加载JS/CSS

加载JS和加载CSS一样，用wp_enqueue_script();

另外​：JQ可以直接用wordpress自带的JQ库。​引入方法：

<?php wp_enqueue_script("jquery");?>

​JQ写法：

jQuery(document).ready(function($) {
//这里就可以直接用$符号了。
});