大家好!又到 WordPress 主题开发课程的时间了。
我们的 the_first 主题已经完成的七七八八了,以后就是修修补补的事儿了。这次课程我们先把首页完成。现在首页还差一块:
首先是顶部的 tab,在后台-首页设置中,有如下配置:
顶部tab就是显示这里设置的分类,如果这里设置为空,则直接显示所有的分类:
/**
* 首页显示分类
*/
function the_first_nav_catsegories()
{
$home_cat_show = the_first_option('home_cat_show');
$categories = [];
if (!empty($home_cat_show)) {
$include = implode(",", $home_cat_show);
$args = ['include' => $include];
$result = get_categories($args);
foreach ($home_cat_show as $cat_id) {
foreach ($result as $cat) {
if ($cat_id == $cat->term_id) {
$categories[] = $cat;
}
}
}
} else {
$categories = get_categories();
}
return $categories;
}
<ul class="tab_nav">
<li class="tab-nav-li tabNav_active" data-catid="">
<text>全部</text>
</li>
<?php $categories = the_first_nav_catsegories();
foreach ($categories as $cat) : ?>
<li class="tab-nav-li" data-catid="<?php echo $cat->term_id; ?>">
<text><?php echo $cat->name; ?></text>
</li>
<?php endforeach; ?>
</ul>
使用 WP_Query 查询文章,之前已经说过多次了,这里就不再啰嗦了。这里需要说明一下的是,在 WordPress 中 AJAX 的使用方法。
// 注册AJAX回调函数
add_action('wp_ajax_nopriv_ajax_more_posts', 'the_first_theme_more_posts');
add_action('wp_ajax_ajax_more_posts', 'the_first_theme_more_posts');
function the_first_theme_more_posts() {
// 在这里查询文章,并返回
}
这可以理解为一种固定写法:
add_action('wp_ajax_nopriv_【唯一标识】', '【回调函数名称】');
add_action('wp_ajax_【唯一标识】', '【回调函数名称】');
带不带 nopriv 的区别就是是不是会检验权限,我们咱先不管它,就按这个固定模式写即可。
相关的代码都放在 fun-ajax.php 中,然后在 functions.php 中引用即可。
其中需要说明的是,查询置顶文章的方法。
/**
* 获取置顶的文章
*/
function _the_first_theme_get_stick_posts()
{
$stickies = get_option('sticky_posts');
if (!is_array($stickies) || empty($stickies)) {
return [];
}
$query = new WP_Query();
$result = $query->query([
'post__in' => $stickies,
]);
$posts = [];
foreach ($result as $post) {
$item = _the_first_theme_format_post($post);
$item['stick'] = 1;
$posts[] = $item;
}
return $posts;
}
使用 get_option('sticky_posts') 获取置顶文章的ID数组,然后,在WP_Query中使用参数 post__in 查询相应文章。虽然还有其它查询置顶文章的方法,不过用起来还是这种方式比较靠谱。
AJAX的回调已经好了,现在还需要使用 JavaScript 调用:
$.post("/wp-admin/admin-ajax.php",
{
action: 'ajax_more_posts',
catid: catid_value,
start: start_value
},
function (data, status) {
});
上面代码中 url /wp-admin/admin-ajax.php 是固定的,只要是按照 WordPress 中的规则注册的 AJAX 回调,请求 url 都是:/wp-admin/admin-ajax.php
还需要一个固定的参数:action,也就是之前注册 AJAX 使用的唯一标识。
其他的就和一般的 AJAX 一样了。
这里我们用到了 JQuery,还记得在 WordPress 中如何引入 Javascript 吗?
在 functions.php 的函数 the_first_scripts() 中,添加下面的代码:
wp_enqueue_script('jquery');
这次的代码多,但大多数都不是 WordPress 中特有的知识点,就没有多啰嗦了,大家去看代码就可以了。最新的代码依旧上传在:
https://gitee.com/zhuige_com/course_jiangqie_theme
https://github.com/zhuige-com/course_jiangqie_theme
下周见,朋友们!
暂无评论,抢个沙发...