WordPress引入CSS与JavaScript

WordPress引入css/js 是咱们制做主题时首先面对的一个难点，任何一款主题都要加载本身的css,js,甚至颇有可能还须要加载Jquery文件,网上方法特多，说法不一，咱们今天借鉴wordpress官方最新的twentysixteen主题来学习总结一下WordPress引入css/js各类经常使用方法，以及最优化的加载方法。

其实网上的N种方法总结起来就两种

1、模板文件header.php中直接引入文件

2、在主题的functions.php中经过WP自带的函数wp_enqueue_scripts来加载JS文件，经过wp_enqueue_style来加载Css样式。

1、模板文件header.php中直接引入文件

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

<script type='text/javascript' src='http://www.jquery.com/js/jquery/1.10.2/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='http://www.511yj.com/css/bootstrapwp.js'></script>
<link rel="stylesheet" href="http://www.511yj.com/css/bootstrapwp.css">

你以为这样很无聊的话，还能够这样

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.js"></script>

经过函数get_template_directory_uri()得到主题目录 经过echo输出。

注意啦如下方法虽然放在了functions.php中，表面感受好了点......

<?php
 function add_stylesheet_to_head() {
    echo "<link href='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文件是否已经被包含在页面中。而后插件第二次加载同一个文件，形成重复的代码，响应速度变慢。

2、引入WordPress优化解决方案：注册和排队

一、注册

wp_register_style() 函数进行注册：

<?php wp_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() 函数进行注册：

<?php wp_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
function my_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()函数，能够更好的管理资源，避免重复劳动。下面的示例代码中，先在init action上把全部须要用到样式表都注册一遍，以后无论想在哪里引入，均可以简单的用wp_enqueue_style( $handle )来加载。

// 在init action处注册脚本，能够与其它逻辑代码放在一块儿
function my_init(){
    $url = get_template_directory_uri();
    // 注册样式表
    $styles = array(
        'style1' => $url . '/css/style1.css',
        'style2' => $url . '/css/style2.css',
        'style3' => $url . '/css/style3.css'
    );
     foreach( $styles as $k => $v ){
        wp_register_style( $k, $v, false );
    } 
    // 注册脚本     
    // 其它须要在init action处运行的脚本
}
add_action( 'init', 'my_init' );

注册脚本时须要运行$wp_scripts->add( $handle, $src, $deps, $ver );，若脚本没有注册直接使用wp_enqueue_script，须要先调用add方法，也就是说重复enqueue一个脚本就会运行屡次add方法，下降了程序的效率。 在WordPress中，注册样式是“可选的”。若是你的样式不会被其余插件使用，或者你不打算使用任何代码来再次加载它，你能够自由地排队样式而不须要注册它。继续看看它是如何实现的。

二、排队

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媒体类型
);
?>

切记：若是一个插件将要用到你的样式表，或者你打算将在你的主题的不一样地方进行加载，你绝对应该先注册。

三、加载样式到咱们的网站

咱们不能在主题中随便找个地方使用 wp_enqueue_style() 函数 - 咱们须要使用“动做”钩子。还有咱们可使用各类用途的三个动做钩子：

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

admin_enqueue_scripts 用来在后台加载脚本和CSS

login_enqueue_scripts 用来在WP登陆页面加载脚本和CSS

如下是这些钩子的示例：

<?php
 // 在网站前台加载css
function mytheme_enqueue_style() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
 
// 在后台加载css
function mytheme_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
function mytheme_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' );
 ?>

四、另一个函数：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 的处理任务中。 若是咱们在页面的中间使用，

<?php wp_print_scripts('jquery'); ?>

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

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

告诉 WordPress 须要加载 jquery.js，WordPress 在 wp_footer() 中处理的时候也会先检查前面是否是已经有了，若是有了就不会再从新加载一次。

五、一些额外的函数

WordPress 有一些关于 CSS 很是有用的函数：他们容许咱们打印内嵌样式，查看样式文件的排队状态，添加元数据以及注销样式。

添加动态内联样式：wp_add_inline_style()

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

function mytheme_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() 示例
function mytheme_extra_styles() {
    wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );
    wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
    /*
     * alternate usage:
     * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
     * wp_style_add_data() is cleaner, though.
     */
}

add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );

?>

WordPress正确加载CSS文件与JavaScript文件的方式

咱们在制做wordpress主题猴子wordpress插件过程当中，常常须要添加样式文件或者js脚本文件，因为大多数用户运行在他们的网站上多个插件，可能会加载各式各样的文件，容易引发冲突，因此wordpress系统为开发者提供了一个很好的脚本及样式文件的排队系统，这有助于防止插件之间的脚本冲突问题。这篇文章中，主要为你们介绍wordpress中添加Javascript文件与css文件的方法，对那些刚开始学习WordPress主题和插件的开发是特别有用的。

错误方式

wordpress中提供了wp_head钩子来帮助咱们在页面的头部添加指定的头部消息，好比常见的关键词与描述，不少人也一样会使用这种方式来添加站点的外部样式文件与脚本文件，添加代码以下：

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo '
'; //添加js文件
}
?>

这种方式虽然使用简单，可是很是不推荐使用，这种加载方式容易形成wordpress脚本的冲突。

WordPress脚本排队系统

一、介绍

wordpress在全球拥有强大的开发社群，不少人都很是积极的参与到wordpress的主题与插件的开发当中，而且能够无偿使用，为了防止各个开发者开发的插件在使用过程总出现脚本冲突的问题，wordpress提供了一个很是强大的脚本加载函数wp_enqueue_script，经过这个函数，咱们能够告诉wordpress在哪加载脚本，脚本依赖哪些框架，并且该函数在利用内置的Javascript库时，能够避免屡次加载同一个脚本。这有助于减小页面加载时间，以及避免与其余主题和插件冲突。

###二、使用实例

wordpress正确加载脚本的使用很简单，代码以下：

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

你能够将以上代码放入你的插件文件中或者你主题的functions.php文件。

说明：

实例中咱们首先经过函数wp_register_script(),这个函数接收5个参数：

$handle
(string) (必须) 脚本名称. 名称必须惟一在以后函数 wp_enqueue_script() 会使用到该名称.
Default: None
$src
(string) (必须) 脚本路径，可使用绝对路径。
Default: None
$deps
(array) (可选) 脚本依赖包，依赖包会在脚本加载以前预先加载。
Default: array()
$ver
(string) (可选)脚本版本控制。
Default: false
$in_footer
(boolean) (可选) 定义脚本的位置，若是为true脚本会在页面底部加载，默认在head头部加载。
Default: false

当咱们使用wp_register_script()函数注册脚本文件后，就可使用函数wp_enqueue_script()函数来加载该注册的脚本文件。

也许有人会问咱们为何不直接加载脚本文件，而是先注册后加载，这不是画蛇添足吗。其实这主要是为了站点其余开发者在其余插件或者主题总方便引用你的核心脚本文件。

WordPress如何加载CSS样式文件

wordpress css样式文件的加载与以上介绍的脚本文件加载方式是同样的，以下实例：

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

以上实例总咱们一样了用了wp_register_script钩子来加载样式文件。

实例中咱们使用了plugins_url()来获取样式文件的路径，这个通常在插件开发过程当中使用的居多，若是咱们是主题中开发使用到wp_register_script()函数则可使用get_template_directory_uri()来获取样式文件路径，若是是子主题中使用，则可使用函数get_stylesheet_directory_uri()来获取路径，实例以下：

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

经过以上的分析，但愿对你们对wordpress添加Javascript文件与css文件有新的认知。

部份内容参考自：

http://www.511yj.com/wordpress-css-js.html

http://m.php.cn/article/340670.html