如何在Wordpress页面添加js

一般都是直接在主题的header.php文件中直接引用，部分主题也会在主题的functions.php文件中通过WP自带的函数wp_enqueue_scripts来加载JS文件。

1、在主题header.php文件中直接引入文件，如

<scripttype='text/javascript'src=';

或者

<scriptsrc="<?phpechoget_template_directory_uri();?>/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>

2、在主题的functions.php文件中引入文件，如

functionmy_enqueue_scripts(){

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

//去除已注册的jquery脚本

wp_deregister_script('jquery');

//注册jquery脚本

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

//提交加载jquery脚本

wp_enqueue_script('jquery');

}

}

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

add_action('init','my_enqueue_scripts');

/p>

p style="text-indent:2em;">在制作wordpress主题猴子wordpress插件过程中，经常需要添加样式文件或者js脚本文件，由于大多数用户运行网站上多个插件，可能会加载

/p>

p style="text-indent:2em;">各式各样的文件，容易引起冲突，所以wordpress系统为开发者提供了一个很好的脚本及样式文件的排队系统，这有助于防止插件之间的脚本冲突问题。这

/p>

p style="text-indent:2em;">篇文章中，主要介绍wordpress中添加Javascript文件与css文件的方法，对那些刚开始学习WordPress主题和插件的开发是特别有

/p>

p style="text-indent:2em;">用的。

/p>

p style="text-indent:2em;">错误方式

/p>

p style="text-indent:2em;">wordpress中提供了wp_head钩子来帮助在页面的头部添加指定的头部消息，比如常见的关键词与描述，很多人也同样会使用这种方式来添加站点的外部样式文件与脚本文件，添加代码如下：

/p>

p style="text-indent:2em;"><?php

/p>

p style="text-indent:2em;">add_action('wp_head','wpb_bad_script');

/p>

p style="text-indent:2em;">function wpb_bad_script(){

/p>

p style="text-indent:2em;">echo'<script type="text/javascript" src=""></script>

/p>

p style="text-indent:2em;">';//添加js文件

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">?>

/p>

p style="text-indent:2em;">这种方式虽然使用简单，但是非常不推荐使用，这种加载方式容易造成wordpress脚本的冲突。

/p>

p style="text-indent:2em;">wordpress脚本排队系统

/p>

p style="text-indent:2em;">1、介绍

/p>

p style="text-indent:2em;">wordpress在全球拥有强大的开发社群，很多人都非常积*的参与到wordpress的主题与插件的开发当中，并且可以免费使用，为了防止各个开

/p>

p style="text-indent:2em;">发者开发的插件在使用过程总出现脚本冲突的问题，wordpress提供了一个非常强大的脚本加载函数wp_enqueue_script，通过这个函

/p>

p style="text-indent:2em;">数，可以告诉wordpress在哪加载脚本，脚本依赖哪些框架，而且该函数在利用内置的Javascript库时，可以避免多次加载同一个脚本。这有助

/p>

p style="text-indent:2em;">于减少页面加载时间，以及避免与其他主题和插件冲突。

/p>

p style="text-indent:2em;">2、使用实例

/p>

p style="text-indent:2em;">wordpress正确加载脚本的使用很简单，代码如下：

/p>

p style="text-indent:2em;"><?php

/p>

p style="text-indent:2em;">function wpb_adding_scripts(){

/p>

p style="text-indent:2em;">wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

/p>

p style="text-indent:2em;">wp_enqueue_script('my_amazing_script');

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">

/p>

p style="text-indent:2em;">add_action('wp_enqueue_scripts','wpb_adding_scripts');

/p>

p style="text-indent:2em;">?>

/p>

p style="text-indent:2em;">可以将以上代码放入你的插件文件中或者你主题的functions.php文件。

/p>

p style="text-indent:2em;">说明：

/p>

p style="text-indent:2em;">实例中首先通过函数wp_register_script(),这个函数接收5个参数：

/p>

p style="text-indent:2em;">$handle

/p>

p style="text-indent:2em;">(string)(必须)脚本名称.名称必须**在之后函数 wp_enqueue_script()会使用到该名称.

/p>

p style="text-indent:2em;">Default: None

/p>

p style="text-indent:2em;">$src

/p>

p style="text-indent:2em;">(string)(必须)脚本路径，可以使用**路径。

/p>

p style="text-indent:2em;">Default: None

/p>

p style="text-indent:2em;">$deps

/p>

p style="text-indent:2em;">(array)(可选)脚本依赖包，依赖包会在脚本加载之前预先加载。

/p>

p style="text-indent:2em;">Default: array()

/p>

p style="text-indent:2em;">$ver

/p>

p style="text-indent:2em;">(string)(可选)脚本版本控制。

/p>

p style="text-indent:2em;">Default: false

/p>

p style="text-indent:2em;">$in_footer

/p>

p style="text-indent:2em;">(boolean)(可选)定义脚本的位置，如果为true脚本会在页面底部加载，默认在head头部加载。

/p>

p style="text-indent:2em;">Default: false

/p>

p style="text-indent:2em;">当使用wp_register_script()函数注册脚本文件后，就可以使用函数wp_enqueue_script()函数来加载该注册的脚本文件。

/p>

p style="text-indent:2em;">也许有人会问为什么不直接加载脚本文件，而是先注册后加载，这不是多此一举吗。其实这主要是为了站点其他开发者在其他插件或者主题总方便引用核心脚本文件。

/p>

p style="text-indent:2em;">wordpress如何加载CSS样式文件

/p>

p style="text-indent:2em;">wordpress css样式文件的加载与以上介绍的脚本文件加载方式是一样的，如下实例：

/p>

p style="text-indent:2em;"><?php

/p>

p style="text-indent:2em;">function wpb_adding_styles(){

/p>

p style="text-indent:2em;">wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));

/p>

p style="text-indent:2em;">wp_enqueue_script('my_stylesheet');

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">

/p>

p style="text-indent:2em;">add_action('wp_enqueue_scripts','wpb_adding_styles');

/p>

p style="text-indent:2em;">?>

/p>

p style="text-indent:2em;">以上实例用了wp_register_script钩子来加载样式文件。

/p>

p style="text-indent:2em;">实例中使用了plugins_url()来获取样式文件的路径，这个一般在插件开发过程中使用的居多，如果主题中开发使用到

/p>

p style="text-indent:2em;">wp_register_script()函数则可以使用get_template_directory_uri()来获取样式文件路径，如果是子主题中

/p>

p style="text-indent:2em;">使用，则可以使用函数get_stylesheet_directory_uri()来获取路径，实例如下：

/p>

p style="text-indent:2em;"><?php

/p>

p style="text-indent:2em;">

/p>

p style="text-indent:2em;">function wpb_adding_scripts(){

/p>

p style="text-indent:2em;">wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

/p>

p style="text-indent:2em;">wp_enqueue_script('my_amazing_script');

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">

/p>

p style="text-indent:2em;">add_action('wp_enqueue_scripts','wpb_adding_scripts');

/p>

p style="text-indent:2em;">?>

/p>

p style="text-indent:2em;">现在许多WordPress网站都开始讲要正确加载 jQuery、Javascript和 CSS到你的WordPress网站。今天来一篇更详细讲解如何使用WordPress**推荐的方式来加载脚本/ CSS的文章。

/p>

p style="text-indent:2em;">有两种常用的 add_action钩子可以加载脚本和CSS到WordPress：

/p>

p style="text-indent:2em;">init：确保始终为您的网站头部加载脚本和CSS（如果使用home.php，index.php或一个模板文件），以及其他“前端”文章、页面和模板样式。

/p>

p style="text-indent:2em;">wp_enqueue_scripts：“适当”的钩子方法，并不总是有效的，根据你的WordPress设置。

/p>

p style="text-indent:2em;">下面的所有例子都在WordPress多站点模式、WordPress 3.4.2通过测试（如果不支持后续版本，请留言告知）

/p>

p style="text-indent:2em;">加载外部 jQuery库和主题自定义的脚本、样式

/p>

p style="text-indent:2em;">下面这个例子在 add_action钩子中使用 init。使用 init有两个原因，一是因为我们正在注销WordPress默认的jQuery库，然后加载谷歌的jQuery库；二是确保在WordPress的头部就加载脚本和CSS。

/p>

p style="text-indent:2em;">使用if(!is_admin())是为了确保这些脚本和css只在前端加载，不会再后台管理界面加载。

/p>

p style="text-indent:2em;">/** Google jQuery Library, Custom jQuery and CSS Files*/

/p>

p style="text-indent:2em;">function myScripts(){

/p>

p style="text-indent:2em;">wp_register_script('google',';);

/p>

p style="text-indent:2em;">wp_register_script('default', get_template_directory_uri().'/jquery.js');

/p>

p style="text-indent:2em;">wp_register_style('default', get_template_directory_uri().'/style.css');

/p>

p style="text-indent:2em;">if(!is_admin()){/** Load Scripts and Style on Website Only*/

/p>

p style="text-indent:2em;">wp_deregister_script('jquery');

/p>

p style="text-indent:2em;">wp_enqueue_script('google');

/p>

p style="text-indent:2em;">wp_enqueue_script('default');

/p>

p style="text-indent:2em;">wp_enqueue_style('default');

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('init','myScripts');

/p>

p style="text-indent:2em;">加载WP默认 jQuery库和主题自定义的脚本、样式

/p>

p style="text-indent:2em;">第3行：使用 array(‘jquery’)是为了告诉 WordPress这个 jquery.js是依赖WordPress的jQuery库文件，从而使 jquery.js在WordPress jQuery库文件后加载。

/p>

p style="text-indent:2em;">/** Add Custom jQuery and CSS files to a Theme*/

/p>

p style="text-indent:2em;">function myScripts(){

/p>

p style="text-indent:2em;">wp_register_script('default', get_template_directory_uri().'/jquery.js', array('jquery'),'');

/p>

p style="text-indent:2em;">wp_register_style('default', get_template_directory_uri().'/style.css');

/p>

p style="text-indent:2em;">if(!is_admin()){/** Load Scripts and Style on Website Only*/

/p>

p style="text-indent:2em;">wp_enqueue_script('default');

/p>

p style="text-indent:2em;">wp_enqueue_style('default');

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('init','myScripts');

/p>

p style="text-indent:2em;">加载 print.css到你的WordPress主题

/p>

p style="text-indent:2em;">第 3行：*后的‘print’是媒体屏幕调用，确保 print.css在网站的打印机中的文件加载时才加载。

/p>

p style="text-indent:2em;">/** Adding a Print Stylesheet to a Theme*/

/p>

p style="text-indent:2em;">function myPrintCss(){

/p>

p style="text-indent:2em;">wp_register_style('print', get_template_directory_uri().'/print.css','','','print');

/p>

p style="text-indent:2em;">if(!is_admin()){/** Load Scripts and Style on Website Only*/

/p>

p style="text-indent:2em;">wp_enqueue_style('print');

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('init','myPrintCss');

/p>

p style="text-indent:2em;">使用 wp_enqueue_scripts替换 init

/p>

p style="text-indent:2em;">如果你要在文章或页面加载**的脚本，那就应该使用 wp_enqueue_scripts替换 init。使用 wp_enqueue_scripts仅仅只会在前台加载脚本和CSS，不会在后台管理界面加载，所以没必要使用!is_admin()判断。

/p>

p style="text-indent:2em;">使用 is_single()只在文章加载脚本或CSS

/p>

p style="text-indent:2em;">第 3行的#替换为文章的ID就可以让脚本和css只加载到那篇文章。当然，如果直接使用 is_single()（不填ID），就会在所有文章加载脚本和CSS。

/p>

p style="text-indent:2em;">/** Adding Scripts To A Unique Post*/

/p>

p style="text-indent:2em;">function myScripts(){

/p>

p style="text-indent:2em;">if( is_single(#)){/** Load Scripts and Style on Posts Only*/

/p>

p style="text-indent:2em;">/** Add jQuery and/or CSS Enqueue*/

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('wp_enqueue_scripts','myScripts');

/p>

p style="text-indent:2em;">使用 is_page()只在页面加载脚本或CSS

/p>

p style="text-indent:2em;">第 3行的#替换为页面的ID就可以让脚本和css只加载到那个页面。当然，如果直接使用 is_single()（不填ID），就会在所有页面加载脚本和CSS。

/p>

p style="text-indent:2em;">/** Adding Scripts To A Unique Page*/

/p>

p style="text-indent:2em;">function myScripts(){

/p>

p style="text-indent:2em;">if( is_page(#)){/** Load Scripts and Style on Pages Only*/

/p>

p style="text-indent:2em;">/** Add jQuery and/or CSS Enqueue*/

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('wp_enqueue_scripts','myScripts');

/p>

p style="text-indent:2em;">使用 admin_enqueue_scripts加载脚本到后台

/p>

p style="text-indent:2em;">这个例子将在整个后台管理界面加载脚本和CSS。这个方法不推荐用在插件上，除非插件重建了整个后台管理区。

/p>

p style="text-indent:2em;">第 10行使用 admin_enqueue_scripts替换了 init或wp_enqueue_scripts

/p>

p style="text-indent:2em;">第 5、6行，如果你要自定义后台管理区，你可以需要禁用默认的WordPress CSS调用。

/p>

p style="text-indent:2em;">/** Adding Scripts To The WordPress Admin Area Only*/

/p>

p style="text-indent:2em;">function myAdminScripts(){

/p>

p style="text-indent:2em;">wp_register_script('default', get_template_directory_uri().'/jquery.js', array('jquery'),'');

/p>

p style="text-indent:2em;">wp_enqueue_script('default');

/p>

p style="text-indent:2em;">//wp_deregister_style('ie');/** removes ie stylesheet*/

/p>

p style="text-indent:2em;">//wp_deregister_style('colors');/** disables default css*/

/p>

p style="text-indent:2em;">wp_register_style('default', get_template_directory_uri().'/style.css', array(),'','all');

/p>

p style="text-indent:2em;">wp_enqueue_style('default');

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('admin_enqueue_scripts','myAdminScripts');

/p>

p style="text-indent:2em;">加载脚本和CSS到WordPress登录界面

/p>

p style="text-indent:2em;">第 6行：我无法弄清楚如何在在登录页面注册/排序 CSS文件，所以这行手动添加样式表。

/p>

p style="text-indent:2em;">第 10-14行：用来移除WordPress默认的样式表。

/p>

p style="text-indent:2em;">/** Adding Scripts To The WordPress Login Page*/

/p>

p style="text-indent:2em;">function myLoginScripts(){

/p>

p style="text-indent:2em;">wp_register_script('default', get_template_directory_uri().'/jquery.js', array('jquery'),'');

/p>

p style="text-indent:2em;">wp_enqueue_script('default');

/p>

p style="text-indent:2em;">?>

/p>

p style="text-indent:2em;"><link rel='stylesheet' id='default-css' href='<?php echo get_template_directory_uri().'/style.css';?>' type='text/css' media='all'/>

/p>

p style="text-indent:2em;"><?php}

/p>

p style="text-indent:2em;">add_action('login_enqueue_scripts','myLoginScripts');

/p>

p style="text-indent:2em;">/** Deregister the login css files*/

/p>

p style="text-indent:2em;">function removeScripts(){

/p>

p style="text-indent:2em;">wp_deregister_style('wp-admin');

/p>

p style="text-indent:2em;">wp_deregister_style('colors-fresh');

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('login_init','removeScripts');

/p>

p style="text-indent:2em;">将 jQuery库移动到页脚

/p>

p style="text-indent:2em;">你不能将WordPress默认的jQuery库移动到页面底部，但是你可以将自定义的jQuery或其他外部jQuery库（比如Google的）移动到底部。不要将CSS移动到页面底部。

/p>

p style="text-indent:2em;">第 3、4行：*后的‘true’告诉WordPress在页面底部加载这些脚本。

/p>

p style="text-indent:2em;">/** Moves jQuery to Footer*/

/p>

p style="text-indent:2em;">function footerScript(){

/p>

p style="text-indent:2em;">wp_register_script('jquery',(""), false,'', true);

/p>

p style="text-indent:2em;">wp_register_script('default', get_template_directory_uri().'/jquery.js', false,'', true);

/p>

p style="text-indent:2em;">if(!is_admin()){/** Load Scripts and Style on Website Only*/

/p>

p style="text-indent:2em;">wp_deregister_script('jquery');

/p>

p style="text-indent:2em;">wp_enqueue_script('jquery');

/p>

p style="text-indent:2em;">wp_enqueue_script('default');

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('init','footerScript');

/p>

p style="text-indent:2em;">根据不用的用户角色和功能加载jQuery和CSS

/p>

p style="text-indent:2em;">如果你的网站有作者、编辑和其他管理员，你可能需要通过 jQuery来为他们显示不同的信息。你需要使用 current_user_can确定登录的用户的角色和功能。

/p>

p style="text-indent:2em;">下面三个例子中，如果用户已经登录，将在整个网站加载这些脚本和CSS。使用!is_admin()包装 enqueue_script确保只在前台加载，或者在 add_action使用 admin_enqueue_scripts就可以确保只在后台管理区加载。

/p>

p style="text-indent:2em;">为可以“编辑文章”的管理员加载脚本和CSS

/p>

p style="text-indent:2em;">只对**管理员和网站管理员生效

/p>

p style="text-indent:2em;">/** Add CSS& jQuery based on Roles and Capabilities*/

/p>

p style="text-indent:2em;">function myScripts(){

/p>

p style="text-indent:2em;">if( current_user_can('edit_posts')){

/p>

p style="text-indent:2em;">/** Add jQuery and/or CSS Enqueue*/

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('init','myScripts');

/p>

p style="text-indent:2em;">为所有登录用户加载脚本和CSS

/p>

p style="text-indent:2em;">/** Admins/ Authors/ Contributors/ Subscribers*/

/p>

p style="text-indent:2em;">function myScripts(){

/p>

p style="text-indent:2em;">if( current_user_can('read')){

/p>

p style="text-indent:2em;">/** Add jQuery and/or CSS Enqueue*/

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('init','myScripts');

/p>

p style="text-indent:2em;">为管理员以外的已登录用户加载脚本和CSS

/p>

p style="text-indent:2em;">/** Disable for Super Admins/ Admins enable for Authors/ Contributors/ Subscribers*/

/p>

p style="text-indent:2em;">function myScripts(){

/p>

p style="text-indent:2em;">if( current_user_can('read')&&!current_user_can('edit_users')){

/p>

p style="text-indent:2em;">/** Add jQuery and/or CSS Enqueue*/

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">}

/p>

p style="text-indent:2em;">add_action('init','myScripts');

/p>

p style="text-indent:2em;">*后的提示

/p>

p style="text-indent:2em;">上面的很多例子如果使用相同的add_action，就可以被合并成一个单一的函数。

/p>

p style="text-indent:2em;">换句话说，您可以使用多个 if语句在一个函数中分裂了你的脚本和CSS调用，如：if_admin！if_admin，is_page，is_single和current_user_can的，因为每次使用相同的add_action的init。

/p>