WordPress引入css/js两种方法

WordPress引入css/js是我们制作主题时首先面对的一个难点，任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多，说法不一，我们今天借鉴wordpress官方最新的twentysixteen主题来学习总结一下WordPress引入css/js各种常用方法，以及最优化的加载方法。
其实网上的N种方法总结起来就两种：
一、模板文件header.php中直接引入文件
二、在主题的functions.php中通过WP自带的函数

wp_enqueue_scripts

来加载JS文件，通过

wp_enqueue_style

来加载Css样式。

一、模板文件header.php中直接引入文件
1、最好懂，最直白，最不好的方法在模板文件header.php中直接引入文件

<scripttype='text/javascript'src='http://www.jquery.com/js/jquery/1.10.2/jquery-1.10.2.min.js'></script>

<scripttype='text/javascript'src='http://www.511yj.com/css/bootstrapwp.js'></script>

<linkrel="stylesheet"href="http://www.511yj.com/css/bootstrapwp.css">

你觉得这样很无聊的话，还可以这样

<linkrel="stylesheet"href="<?phpechoget_template_directory_uri();?>/style.css">

<scriptsrc="<?phpechoget_template_directory_uri();?>/bootstrap/js/bootstrap.js"></script>

通过函数

get_template_directory_uri()

获得主题目录通过

echo

输出。

注意啦

以下方法虽然放在了functions.php中，表面感觉好了点......

<?php

functionadd_stylesheet_to_head(){

echo"<linkhref='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext'rel='stylesheet'>";

}

add_action('wp_head','add_stylesheet_to_head');

?>

但是WordPress不能确定是否在在页面加载了JS，Css文件，如果另一个插件使用相同的JS，Css文件，就无法检查JS，Css文件是否已经被包含在页面中。然后插件第二次加载同一个文件，造成重复的代码，响应速度变慢。

二、引入WordPress优化解决方案：注册和排队
1、注册
wp_register_style()函数进行注册：

<?phpwp_register_style($handle,$src,$deps,$ver,$media);?>

参数：

$handle

（字符串，必需）是你的样式表唯一名称。其他函数将使用这个“handle”来排队并打印样式表。

$src

（字符串，必需）指的是样式表的URL。您可以使用函数，如get_template_directory_uri()来获取主题目录中的样式文件。永远不要去想硬编码了！

$deps

（数组，可选）处理相关样式的名称。如果丢失某些其他样式文件将导致你的样式表将无法正常工作，你可以使用该参数设置“依赖关系”。

$ver

（字符串或布尔型，可选）版本号。你可以使用你的主题的版本号或任何一个你想要的。如果您不希望使用一个版本号，将其设置为null。默认为false，这使得WordPress的添加自己的版本号。

$media

（字符串，可选）是指CSS的媒体类型，比如“screen”或“handheld”或“print”。如果你不知道是否需要使用这个，那就不使用它。默认为“all”。
例子：

wp_register_style(

'my-bootstrap-extension',//名称

get_template_directory_uri().'/css/my-bootstrap-extension.css',//样式表的路径

array('bootstrap-main'),//依存的其他样式表

'1.2',//版本号

'screen',//CSS媒体类型

);

wp_register_style()函数进行注册：

<?phpwp_enqueue_script($handle,$src,$deps,$ver,$in_footer);?>

参数

$handle

（字符串）（必需）脚本名称。小写字符串。默认值：None

$src

（字符串）（可选）WordPress根目录下的脚本路径示例："/wp-includes/js/scriptaculous/scriptaculous.js"。该参数只在WordPress不了解脚本情况时使用。默认值：None

$deps

（数组）（可选）脚本所依靠的句柄组成的数组；加载该脚本前需要加载的其它脚本。若没有依赖关系，返回false。该参数只在WordPress不了解脚本情况时使用。默认值：array()

$ver

（字符串）（可选）指明脚本版本号的字符串（若存在版本号）。默认为false。该参数可确保即使在启用缓存的状态下，发送给客户端的仍然是正确版本，因此如果版本号可用且对脚本有意义，包含该版本号。默认值：false

$in_footer

（布尔型）（可选）通常情况下脚本会被放置在区块中。如果该函数为true，脚本则会出现在区块的最下方。要求主题在适当的位置中包含有wp_footer()钩子。（WordPress新功能）默认值：false

例子：

<?php

functionmy_enqueue_scripts(){

if(!is_admin){//前台加载的脚本与样式表

//去除已注册的jquery脚本

wp_deregister_script('jquery');

//注册jquery脚本

wp_register_script('jquery',get_template_directory_uri().'/js/jquery.js',false,'1.0',false);

//提交加载jquery脚本

wp_enqueue_script('jquery');

}

}

//添加回调函数到init动作上

add_action('init','my_enqueue_scripts');

?>

当css/js很多，并且要分情况加载时，需要使用

wp_register_script()

和

wp_register_style()

函数，可以更好的管理资源，避免重复劳动。下面的示例代码中，先在initaction上把所有需要用到样式表都注册一遍，之后不管想在哪里引入，都可以简单的用wp_enqueue_style($handle)来加载。

//在initaction处注册脚本，可以与其它逻辑代码放在一起

functionmy_init(){

$url=get_template_directory_uri();

//注册样式表

$styles=array(

'style1'=>$url.'/css/style1.css',

'style2'=>$url.'/css/style2.css',

'style3'=>$url.'/css/style3.css'

);

foreach($stylesas$k=>$v){

wp_register_style($k,$v,false);

}

//注册脚本

//其它需要在initaction处运行的脚本

}

add_action('init','my_init');

注册脚本时需要运行

$wp_scripts->add($handle,$src,$deps,$ver);

，若脚本没有注册直接使用

wp_enqueue_script

，需要先调用add方法，也就是说重复enqueue一个脚本就会运行多次add方法，降低了程序的效率。
在WordPress中，注册样式是“可选的”。如果你的样式不会被其他插件使用，或者你不打算使用任何代码来再次加载它，你可以自由地排队样式而不需要注册它。继续看看它是如何实现的。
2、排队

wp_register_style()

函数是不强制使用的，我要告诉你，你可以用两种不同的方式使用

wp_enqueue_style()：

<?php

//如果我们之前已经注册过样式

wp_enqueue_style('my-bootstrap-extension');

//如果我们之前没有注册，我们不得不设置$src参数！

wp_enqueue_style(

'my-bootstrap-extension',

get_template_directory_uri().'/css/my-bootstrap-extension.css',

array('bootstrap-main'),

null,//举例不适用版本号

//...并且没有指定CSS媒体类型

);

?>

切记：如果一个插件将要用到你的样式表，或者你打算将在你的主题的不同地方进行加载，你绝对应该先注册。
3、加载样式到我们的网站
我们不能在主题中随便找个地方使用wp_enqueue_style()函数-我们需要使用“动作”钩子。还有我们可以使用各种用途的三个动作钩子：

wp_enqueue_scripts

用来在网站前台加载脚本和CSS

admin_enqueue_scripts

用来在后台加载脚本和CSS

login_enqueue_scripts

用来在WP登录页面加载脚本和CSS
以下是这些钩子的示例：

<?php

//在网站前台加载css

functionmytheme_enqueue_style(){

wp_enqueue_style('mytheme-style',get_stylesheet_uri());

}

add_action('wp_enqueue_scripts','mytheme_enqueue_style');



//在后台加载css

functionmytheme_enqueue_options_style(){

wp_enqueue_style('mytheme-options-style',get_template_directory_uri().'/css/admin.css');

}

add_action('admin_enqueue_scripts','mytheme_enqueue_options_style');



//在登录页面加载css

functionmytheme_enqueue_login_style(){

wp_enqueue_style('mytheme-options-style',get_template_directory_uri().'/css/login.css');

}

add_action('login_enqueue_scripts','mytheme_enqueue_login_style');

?>

4、另外一个函数：

wp_print_scripts()

虽然将JavaScript文件都放到页面末尾加载对于页面加载速度很有帮助，但是请注意，所谓页面末尾指的是在WordPress的

wp_footer()

函数中调用，这个函数通常刚好位于页面的标签前面（当然是末尾了）。
有时候我们可能会在wp_footer函数出现之前就需要用到某些JavaScript，比如jquery.js文件。
这样的情况也是很常见的。比如我单独创建了一个链接页面，在这个页面中我使用了jQuery方法来获取链接网站的favicon。很显然，我只需要在这唯一一个页面使用这部分代码，所以将这段代码直接放在这个页面模板中是最好的做法。
问题来了：这部分内容显然是在wp_footer之前出现的，那么这段代码就在jquery.js文件之前出现了，导致该代码段实际上无法工作，因为调用jQuery方法的代码段必须比jquery.js文件后加载。
那么如何处理这种特殊情况呢？其实也很简单。以上面的情景为例，既然我们需要先调用jquery.js文件，那我们就在该代码段之前直接输出需要的jquery.js文件，不使用

wp_enqueue_script()

函数，而改用

wp_print_scripts()

函数。

wp_enqueue_script()

与

wp_print_scripts()

的区别是：

wp_enqueue_script()

是告诉WordPress“我在这个页面上需要用到某个JavaScript文件，你可要记得加载啊”。WordPress默认在wp_head()中处理，而我们改为在wp_footer()中处理。

wp_print_scripts()

则直接在你使用此方法的位置输出需要的JavaScript文件，而不是加入到WordPress的处理任务中。
如果我们在页面的中间使用，

<?phpwp_print_scripts('jquery');?>

直接输出了jquery.js文件（通常是其压缩版本jquery.min.js），那么即使其它的插件或者什么东西使用，

<?phpwp_enqueue_script('jquery');?>

告诉WordPress需要加载jquery.js，WordPress在wp_footer()中处理的时候也会先检查前面是不是已经有了，如果有了就不会再重新加载一次。
5、一些额外的函数
WordPress有一些关于CSS非常有用的函数：他们允许我们打印内嵌样式，查看样式文件的排队状态，添加元数据以及注销样式。
添加动态内联样式：

wp_add_inline_style()

如果你的主题有选项可自定义主题的样式，你可以使用wp_add_inline_style()函数来打印内置的样式：

functionmytheme_custom_styles(){

wp_enqueue_style('custom-style',get_template_directory_uri().'/css/custom-style.css');

$bold_headlines=get_theme_mod('headline-font-weight');//比方说，它的值是粗体“bold”

$custom_inline_style='.headline{font-weight:'.$bold_headlines.';}';

wp_add_inline_style('custom-style',$custom_inline_style);

}

add_action('wp_enqueue_scripts','mytheme_custom_styles');

方便快捷。但请记住：你必须使用与后面要添加的内联样式样式表相同的hadle名称。

添加元数据到样式表：

wp_style_add_data()

wp_style_add_data()

是一个非常棒的函数，它可以让你添加元数据到你的样式中，包括条件注释、RTL的支持和更多！

<?php

//wp_style_add_data()示例

functionmytheme_extra_styles(){

wp_enqueue_style('mytheme-ie',get_template_directory_uri().'/css/ie.css');

wp_style_add_data('mytheme-ie','conditional','ltIE9');

/*

*alternateusage:

*$GLOBALS['wp_styles']->add_data('mytheme-ie','conditional','lteIE9');

*wp_style_add_data()iscleaner,though.

*/

}



add_action('wp_enqueue_scripts','mytheme_ie_style');



?>