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

江河/ 07月15日/ WordPress/ 浏览 559

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


下周见,朋友们!



发表评论

暂无评论,抢个沙发...

客服 工单