Wordpress主题网(WordPress主题开发教程 8_引入JavaScript和CSS)

大家好！我又来了！感谢大家一路相伴！上次我们聊了“后台配置数据 -> 读取数据 -> 前端显示数据”这个套路。本来是打算说一下首页幻灯片的：

但是，幻灯片这个小功能要用到 JavaScript在 WordPress 主题开发中，使用 JavaScript 并不能随心所欲，想怎么用就怎么用，而是最好遵守一定的规则因为，WordPress 主题不是一个独立完成的系统，而是需要 WordPress 宿主才能运行的。

WordPress本身就已经引入了非常多的 JavaScript，比如 JQuery 等如果，我们再引入 JQuery 可能会造成一些bug聊到这里，最近AI辅助编程非常火，不如我们先问问AI，对在WordPress中使用 JavaScript 有什么建议吧。

不得不说，AI 的这个回答，起码可以打90分它给出的两种方式都是好的，而且还指出了为什么常规方式不好的原因我们也不指望AI 能直接给出能上线使用的代码，能够给出正确的建议就已经非常好了程序员都知道：一开始思路就是对的，能节省多少时间。

在 WordPress 中，有一对儿专门管理 JavaScript 的函数：wp_register_script( string $handle, string|false $src, string[] $deps =

array(), string|bool|null $ver = false, array|bool $args = array() ): boolwp_enqueue_script( string $handle,

string $src = ”, string[] $deps = array(), string|bool|null $ver = false, array|bool $args = array() )

两个函数的关系，类似与定义变量-wp_register_script，使用变量-wp_enqueue_script这样的好处也类似变量，可以重复使用WordPress 就已经使用 wp_register_script。

注册了很多 JavaScript，如果需要只需要直接使用就可以完整的列表可参考 WordPress 文档：https://developer.wordpress.org/reference/functions/wp_enqueue_script/。

比如，我们要使用 jQuery，就只要使用下面的代码：wp_enqueue_script(jquery);就可以使用 WordPress 本身自带的 jQuery 了首页幻灯片用到了一个第三方库：lb.js。

将其放到主题目录下的 js/llib 中，按 WordPress 推荐的方式，应该这样：functionthe_first_scripts(){ $url = get_template_directory_uri();

wp_register_script(lib-script, $url . /js/lib/lb.js, [], 0.3);if (is_home()) { wp_enqueue_script(

lib-script); }}add_action(wp_enqueue_scripts, the_first_scripts);刷新首页，我们可以在代码中看到：

有些朋友可能注意到，我们使用了 is_home 判断是否引入 lib.js这样我们可以只在首页引入 lib.js，因为其他页面我们用不到 lib.js现在我们已经掌握了足够的知识点去完成首页幻灯片功能了。

1. 在后台配置好

2. 在 inc/admin-options.php 中查看对应配置项的 key：home_slide 和 home_slide_ad3. 在 index.php 的第17行，及第41行，读取配置项并显示

($home_slide as $slide) {if ($slide[image][url]) { $slides[] = [title => $slide[title],image => $slide[

image][url],url => $slide[url] ]; } }}if (empty($slides)) { $slides[] = [title => 请在后台设置幻灯片

,image => get_stylesheet_directory_uri() . /images/slide.png,url => https://www.zhuige.com/product ];

}?>

class="lb-content">

target="_blank">