插件开发全攻略（10）---在你的WordPress插件中使用Javascript和CSS

发表于 分类于 ， 阅读次数： 本文字数： 924 阅读时长 ≈ 3 分钟

现今的许多插件对javascript和层叠样式表依赖更多了。将你插件中的javascript和css放置到分离的文件中是非常重要的，那样做会使插件维护起来更加容易。此系列中的这个部分将介绍怎样在你的插件中加载javascript和CSS文件。

添加你的javascript

你的插件可能需要装载prototype类库，或者一个自定义的脚本。这一节将向你展示几个WordPress函数，它们可以帮助你装载脚本，并且避免脚本冲突。

wp_register_script函数

wp_register_script函数允许你注册要调用的脚本，并且允许你设定先决条件。比如说，如果你的脚本需要prototype事先加载，那么你可以通过这个函数来指定。

这里是wp_register_script函数的参数：wp_register_script($handle,$src,$deps=array(),$ver=false);

  • handle是一个独一无二的名字，后面会用此名字引用你的脚本。这个参数是必须的。
  • src是你的javascript文件的绝对路径。这个参数是必须的。
  • deps是一个依赖数组。比如说，如果你的脚本需要使用prototype，你要把它罗列在这里。这个参数是可选的。
  • ver是一个字符串，标明了脚本的版本。这个变量是可选的。

举个例子，如果你有一个脚本要装载：http://yourdomain.com/wp-content/plugins/your-plugin-directory/js/script.js

让我们做一些假设：

  • 你希望handle的名字为“my_script_handle”。
  • 你的脚本依赖于prototype类库
  • 你的版本是1.0

你将在你的插件代码初始化调用那个函数，或者在wp_head action之后调用：

1
2
3

wp_register_script('my_script_handle','http://yourdomain.com/wp-content/plugins/your-plugin-directory/js/script.js', array('prototype'),'1.0');

wp_enqueue_script函数

wp_enqueue_script函数除了src参数是可选的以外，其他与wp_register_script是一样的。如果提供一个src，入队函数会_自动地注册_脚本，因此使用wp_register_script函数并不是必须的。然而，wp_register_script函数允许你手动注册你的脚本，这样，你可以仅使用一次wp_enqueue_script函数就将你所有的脚本装载。

如果我们像上一个例子中那样调用脚本，那么看起来像下面的样子：

1
2
3

wp_enqueue_script('my_script_handle','http://yourdomain.com/wp-content/plugins/your-plugin-directory/js/script.js', array('prototype'),'1.0');

一个javascript的例子

对于Devlounge Plugin Series插件，我们将添加一个javascript文件，后面的文章中会用它。使用这个文件的目的，就是为了说明怎样使用wp_enqueue_script函数。

你可能会回忆起，这个系列文章早期的一篇文章中，我们添加了一个action叫wp_head。那个action添加后，会调用一个函数，叫做addHeaderCode。让我们来修改这个函数，添加我们新的javascript：

1
2
3
4
5
6
7

function addHeaderCode() {
            if (function_exists('wp_enqueue_script')) {
                wp_enqueue_script('devlounge_plugin_series', get_bloginfo('wpurl') . '/wp-content/plugins/devlounge-plugin-series/js/devlounge-plugin-series.js', array('prototype'), '0.1');
            }
            $devOptions = $this->getAdminOptions();
            if ($devOptions['show_header'] == "false") { return; }

           

上述代码的工作如下：

首先，检查wp_enqueue_script函数的存在性
然后调用该函数
我们使用 get_bloginfo(‘wpurl’) 来得到WordPress安装根目录，然后手写路径中剩下的部分

加载层叠样式表

我已经往我的样式目录里面添加了一个新的样式表。这里是我们的一些前提：

这个文件存储在下列位置：http://yourdomain.com/wp-content/plugins/devlounge-plugin-series/css/devlounge-plugin-series.css
我在这个CSS文件中指定了一个ID叫做#devlounge-link
你已经添加了下面的代码 在文章的末尾：取得博客留言的数量

在样式表文件中，我已经添加了下面的ID：

1
2
3
4
#devlounge-link{
background-color:#006;
color:#fff;
}

在插件中添加样式表，就和在addHeaderCode函数中添加一行代码一样简单：

1
2
3
4
5
6
7
8
function addHeaderCode() {
            echo '' . "\n";
            if (function_exists('wp_enqueue_script')) {
                wp_enqueue_script('devlounge_plugin_series', get_bloginfo('wpurl') . '/wp-content/plugins/devlounge-plugin-series/js/devlounge-plugin-series.js', array('prototype'), '0.1');
            }
            $devOptions = $this->getAdminOptions();
            if ($devOptions['show_header'] == "false") { return; }

           

在第2行，我只是简单地打印出了新的样式表。