首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为Wordpress创建具有ajax和自定义帖子类型的loadmore?

为Wordpress创建具有ajax和自定义帖子类型的loadmore可以通过以下步骤实现:

  1. 首先,你需要在functions.php文件中注册一个自定义的Ajax处理函数。这个函数将处理loadmore按钮的点击事件,并返回更多的帖子内容。你可以使用wp_ajax_wp_ajax_nopriv_钩子来注册这个函数,分别用于已登录用户和未登录用户。
代码语言:txt
复制
// functions.php

// Ajax处理函数
function loadmore_ajax_handler() {
    // 获取传递的参数
    $offset = $_POST['offset'];
    $posts_per_page = $_POST['posts_per_page'];

    // 根据参数获取更多的帖子
    $args = array(
        'post_type' => 'your_custom_post_type',
        'posts_per_page' => $posts_per_page,
        'offset' => $offset
    );
    $query = new WP_Query($args);

    // 构建帖子内容的HTML
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // 输出帖子内容
            // ...
        }
    }

    wp_reset_postdata();

    die(); // 终止脚本执行
}

// 注册Ajax处理函数
add_action('wp_ajax_loadmore', 'loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmore', 'loadmore_ajax_handler');
  1. 在你的主题模板文件中,添加一个loadmore按钮和一个用于显示帖子内容的容器。当点击loadmore按钮时,通过Ajax请求调用上述注册的处理函数,获取更多的帖子内容,并将其插入到帖子内容容器中。
代码语言:txt
复制
<!-- index.php 或其他模板文件 -->

<div id="posts-container">
    <!-- 显示初始的帖子内容 -->
    <?php
    $args = array(
        'post_type' => 'your_custom_post_type',
        'posts_per_page' => 5 // 初始显示的帖子数量
    );
    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // 输出帖子内容
            // ...
        }
    }

    wp_reset_postdata();
    ?>
</div>

<button id="loadmore">加载更多</button>

<script>
jQuery(function($) {
    var offset = <?php echo $query->post_count; ?>; // 初始帖子数量
    var postsPerPage = 5; // 每次加载的帖子数量

    $('#loadmore').click(function() {
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'loadmore',
                offset: offset,
                posts_per_page: postsPerPage
            },
            success: function(response) {
                // 将返回的帖子内容插入到容器中
                $('#posts-container').append(response);

                // 更新偏移量
                offset += postsPerPage;
            }
        });
    });
});
</script>

以上代码中,your_custom_post_type需要替换为你自定义的帖子类型。你可以根据需要修改每次加载的帖子数量、按钮文本等。

这样,当点击loadmore按钮时,将通过Ajax请求调用loadmore_ajax_handler函数,获取更多的帖子内容,并将其插入到帖子内容容器中,实现了具有ajax和自定义帖子类型的loadmore功能。

注意:以上代码仅为示例,具体实现可能需要根据你的主题和需求进行适当调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券