大家好！我又来了！感谢大家一路相伴！
上次我们聊了“后台配置数据 -> 读取数据 -> 前端显示数据”这个套路。本来是打算说一下首页幻灯片的：
但是，幻灯片这个小功能要用到 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() ): bool
wp_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 推荐的方式，应该这样：
function the_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_ad
3. 在 index.php 的第17行，及第41行，读取配置项并显示
<!--幻灯片-->
<?php
$home_slide = the_first_option('home_slide');
$slides = [];
if (is_array($home_slide)) {
foreach ($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'
];
}
?>
<div class="column xs-12 sm-12 md-9 mb-20-xs mb-0-md">
<div class="lb-box" id="lb-1">
<!-- 轮播内容 -->
<div class="lb-content">
<?php foreach ($slides as $slide) : ?>
<div class="lb-item active">
<a href="<?php echo $slide['url'] ?>" target="_blank">
<img alt="picture loss" src="<?php echo $slide['image'] ?>" />
<div>
<h2><?php echo $slide['title'] ?></h2>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
<!-- 轮播标志 -->
<ol class="lb-sign">
<?php for ($i = 1; $i <= count($slides); $i++) :
if ($i == 1) echo '<li class="active">' . $i . '</li>';
else echo '<li>' . $i . '</li>';
endfor; ?>
</ol>
<!-- 轮播控件 -->
<div class="lb-ctrl left">＜</div>
<div class="lb-ctrl right">＞</div>
</div>
</div>
<!--小图区-->
<?php
$home_slide_ad = the_first_option('home_slide_ad');
$slide_ads = [];
if (is_array($home_slide_ad)) {
foreach ($home_slide_ad as $slide_ad) {
if ($slide_ad['image']['url']) {
$slide_ads[] = [
'title' => $slide_ad['title'],
'image' => $slide_ad['image']['url'],
'url' => $slide_ad['url']
];
}
}
}
if (empty($slide_ads)) {
$slide_ads = [
[
'title' => '请在后台设置',
'image' => get_stylesheet_directory_uri() . '/images/jiangqie.png',
'url' => 'https://www.zhuige.com'
],
[
'title' => '请在后台设置',
'image' => get_stylesheet_directory_uri() . '/images/jiangqie.png',
'url' => 'https://www.zhuige.com'
],
];
}
?>
<div class="column xs-12 sm-12 md-3">
<!-- row start-->
<div class="row d-flex flex-wrap lb-side">
<!--小图区块-->
<?php foreach ($slide_ads as $slide_ad) : ?>
<div class="column xs-6 sm-6 md-12 mb-20">
<figure class="relative">
<div>
<a href="<?php echo $slide_ad['url'] ?>" target="_blank">
<img alt="picture loss" src="<?php echo $slide_ad['image'] ?>" />
</a>
</div>
<figcaption class="absolute bottom left">
<a href="<?php echo $slide_ad['url'] ?>" target="_blank">
<span class="title"><?php echo $slide_ad['title'] ?></span>
</a>
</figcaption>
</figure>
</div>
<?php endforeach; ?>
</div>
</div>一些细节问题，大家一看代码就明白了，就不啰嗦了。现在需要关注的是，这个幻灯片没有动起来，点击也没有反应。
之前引入了 lib.js，还需要调用一下。我们把调用的代码放到一个新的js文件：index.js，然后引入。代码如下：
function the_first_scripts()
{
$url = get_template_directory_uri();
wp_register_script('lib-script', $url . '/js/lib/lb.js', [], '0.1');
wp_register_script('the-index-script', $url . '/js/index.js', ['lib-script'], '0.1', true);
if (is_home()) {
wp_enqueue_script('lib-script');
wp_enqueue_script('the-index-script');
}
}
add_action('wp_enqueue_scripts', 'the_first_scripts');注意：因为，需要依赖 lib.js ，以及期望 index.js 在页面尾部加载；所以，wp_register_script 第四个参数和第六个参数做了相应的设置。
在 index.js 中，放入以下代码：
/**
* 首页幻灯片
*/
{
window.onload = function () {
const options = {
id: 'lb-1', // 轮播盒ID
speed: 600, // 轮播速度(ms)
delay: 3000, // 轮播延迟(ms)
direction: 'left', // 图片滑动方向
moniterKeyEvent: true, // 是否监听键盘事件
moniterTouchEvent: true // 是否监听屏幕滑动事件
}
const lb = new Lb(options);
lb.start();
}
}OK！首页幻灯片的功能就算完成了。
说到 JavaScript，就不能不提 CSS。WordPress 也提供了两个函数：
wp_register_style( string $handle, string|false $src, string[] $deps = array(), string|bool|null $ver = false, string $media = ‘all’ ): bool
wp_enqueue_style( string $handle, string $src = ”, string[] $deps = array(), string|bool|null $ver = false, string $media = ‘all’ )像孪生兄弟一样的两对函数，用法也是一模一样的。感兴趣的朋友可以自己试一试用这种方式引入 style.css。
这次的内容就这么多了，里面有大段的代码，还是需要稍微花点时间去看一下的。
之前，我们提到了 is_home 函数，在 WordPress 中有大量类似功能的函数。WordPress 称之为：Conditional Tags。下次我们就聊这个了。
再见！
暂无评论，抢个沙发...