WordPress如何配置AJAX以支持点击加载更多?

WordPress 配置 AJAX 支持点击加载更多内容通常涉及到前端 JavaScript 和服务器端的配合。以下是基本步骤:

  1. 安装插件:你可以选择一个现成的插件如 "Advanced Custom Fields" 或者 "WP Infinite Scroll",它们已经内置了 AJAX 功能,简化了设置过程。

    function load_more_posts() {
    if ( ! current_user_can( 'edit_posts' ) ) {
    wp_die( -1 ); // 检查权限,仅允许有编辑权限的用户访问
    }

    args = array( 'post_type' => 'your_post_type', 'posts_per_page' => 5, // 加载的数量 'paged' => isset( _POST['page_num'] ) ? absint( _POST['page_num'] ) : 1, 'offset' => ( paged - 1 ) * posts_per_page ); new_query = new WP_Query( $args );

    if ( new_query->have_posts() ) { ob_start(); while ( new_query->have_posts() ) {
    new_query->the_post(); // 输出文章内容... } wp_reset_postdata(); output = ob_get_clean();
    } else {
    output = __( 'No more posts to load.' ); } die( json_encode( output ) );
    }
    add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
    add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );

https://so.csdn.net/chat?utm_source=vip_chatgpt_common_pc_toolbar&spm=1030.2200.3001.10025

相关推荐
J***Q29221 小时前
Vue数据可视化
前端·vue.js·信息可视化
ttod_qzstudio1 天前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
芳草萋萋鹦鹉洲哦1 天前
【elemen/js】阻塞UI线程导致的开关卡顿如何优化
开发语言·javascript·ui
_大龄1 天前
前端解析excel
前端·excel
1***s6321 天前
Vue图像处理开发
javascript·vue.js·ecmascript
槁***耿1 天前
JavaScript在Node.js中的事件发射器
开发语言·javascript·node.js
一叶茶1 天前
移动端平板打开的三种模式。
前端·javascript
前端大卫1 天前
一文搞懂 Webpack 分包:async、initial 与 all 的区别【附源码】
前端
U***49831 天前
JavaScript在Node.js中的Strapi
开发语言·javascript·node.js
Want5951 天前
HTML音乐圣诞树
前端·html