在 WordPress 插件中使用 JavaScript 和 CSS

优质

小牛编辑

128浏览

2023-12-01

现今的许多插件对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-plugindirectory/js/script.js

让我们做一些假设：

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

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

wp_register_script('my_script_handle','http://yourdomain.com/wp-content/plugins/your-plugindirectory/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函数就将你所有的脚本装载。

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

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

JavaScript的例子

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

文件将会放下下列地址：http://yourdomain.com/wp-content/plugins /devlounge-pluginseries/js/devlounge-plugin-series.js
这个文件依赖于prototype
版本是1.0

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

function addHeaderCode() {
    if (function_exists('wp_enqueue_script')) {
        wp_enqueue_script('devlounge_plugin_series', get_bloginfo('wpurl') . '/wpcontent/
        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-pluginseries/css/devlounge-plugin-series.css
我在这个CSS 文件中指定了一个ID 叫做 #devlounge-link
你已经添加了下面的代码在文章的末尾：<a href="#" id="devlounge-link">取得博客留言的数量</a>

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

#devlounge-link{
    background-color:#006;
    color:#fff;
}

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

function addHeaderCode() {
    echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') . '/wpcontent/
    plugins/devlounge-plugin-series/css/devlounge-plugin-series.css" />' . "\n";
    if (function_exists('wp_enqueue_script')) {
        wp_enqueue_script('devlounge_plugin_series', get_bloginfo('wpurl') . '/wpcontent/
        plugins/devlounge-plugin-series/js/devlounge-plugin-series.js', array('prototype'), '0.1');
    }
    $devOptions = $this->getAdminOptions();
    if ($devOptions['show_header'] == "false") { return; }
}

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