WordPress主题开发教程 16_完成首页

大家好！又到 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

下周见，朋友们！