By

分析

button click 导致 callback,传递到 callback 的参数怎么来的?

    <?php if( get_comment_pages_count() > 1 ){ ?>
    <div class="comment-nav text-center pt-3 pt-md-4">
        <div class="post-loading"><span></span><span></span><span></span><span></span><span></span></div>
        <button
            data-page="comments"
            data-query="<?php the_ID(); ?>"
            data-action="ajax_load_posts"
            data-paged="<?php echo get_next_page_number(); ?>"
            data-commentcount="<?php echo get_comment_pages_count(); ?>"
            data-commentspage="<?php echo get_option( 'default_comments_page' );?>"
            data-append="comment-list"
            class="btn btn-secondary dposts-ajax-load">加载更多</button>
    </div>
    <?php } ?>

在 h5 里元素想自定义属性都可以用data-*:

<div
  id="testDiv"
  data-cname="张三"
  data-e-name="zhangsan"
  data-myName="my name is zs."
>
  测试在元素上存储一个key-value
</div>

jquery 可以取到这些 data,也可以改变:

var name = "#testDiv".data("cname");

再来分析传递到 js 的参数:

papge:comments表示是评论;
query: 表示当前文章的id
paged: 表示下1页的index;
commentcount: 表示评论有多少页;
commentspage:表示１页多少个评论，这是个系统参数，后台设置
append:表示具体到１条评论的模板class, 也就是comment-list.php定义的那个;

comment1s_per_page和default_comments_page:(newest)对应的设置: Screenshot from 2019-03-11 20-43-25-ab8c6d3d-eb60-4c0d-9c12-8cc2a3b443b4

实际最有用的就是 paged.为实现这个功能.先看看涉及的 api:

//根据per_page设置的page大小，返回总页数,默认由系统的comments_per_page决定.
function get_comment_pages_count( $comments = null, $per_page = null, $threaded){}
//获取当前评论所在的pgage
function get_page_of_comment( $comment_ID, $args = array() )

实现逻辑

1 评论数目<10; 直接全部加载;
2 评论>10; 先加载１页,记current page index =0;
3 滑动底时,js拿到最后1条评论的class value,类似"comment-id-123"
  ajax把这个值发送，后台通过get_comment_pages_count,得到paged number; 计算下１page的评论数据，返回dom data;
  ajax respond append数据到末尾;

Read More

By

wordpress 引入 js 脚本

https://www.solagirl.net/wordpress-ways-to-load-js-css.html

function wpzan_scripts(){
    wp_enqueue_style( 'wp-zan-0.0.10', wpzan_css_url('wp-zan-0.0.10'), array()
    , WPZAN_VERSION );
    wp_enqueue_script( 'wp-zan-0.0.10',  wpzan_js_url('wp-zan-0.0.10'), array()
    , WPZAN_VERSION );
    //给上面enqueue加载的js传递1个对象,wpzan_ajax_url，它的值就是1个字符串.
    wp_localize_script( 'wp-zan-0.0.10', 'wpzan_ajax_url', WPZAN_ADMIN_URL . "admin-ajax.php");
}

js 如何使用该对象?就是 jquery ajax post 时的 url:

jQuery.post(wpzan_ajax_url, {
    "action": "wpzan",
    "post_id": post_id,
    "user_id": user_id
}, function(result) { //console.log(result);
//...
}

后台 hook

action=wpzan:
登录用户: wp_ajax_wpzan
未登录用户: wp_ajax_nopriv_wpzan

后台处理逻辑通过 hook 函数:

add_action( 'wp_ajax_wpzan', 'wpzan_callback');
//未登录用户
add_action( 'wp_ajax_nopriv_wpzan', 'wpzan_callback');

对于登录用户，后台界面已经自动赋值了一个 js 全局变量 ajaxurl,因此,在上述情况下,js 代码中可以直接引用此全局变量作为 ajax 的请求路径.

未登录仍然只能用上面的方法传递 url 到 js 对象里.

通过 url 参数控制是否加载 js

    if ( isset( $_GET['goto_comments']) ) {
        $flag = $_GET['goto_comments'];
        ff_log($flag );
        wp_register_script( 'goto-comments', get_template_directory_uri()
         . '/core/functions/goto/goto-comments.js', array(), THEME_VERSION);
        wp_enqueue_script('goto-comments');
    } else {
        wp_dequeue_script('goto-comments');
    }

Read More