WordPress Ajax加载更多帖子按钮

Question

所以几周前我几乎没有开始使用WordPress，所以我一直在学习，我正在尝试使用我正在处理的WordPress网站上的Ajax加载更多按钮，但是一切我试过以下也不会从tutorial到this发挥作用，我觉得我的问题源于我使用HTML5Blank主题。所以任何帮助都会非常感激，即使只是指向正确的方向！这是我的自定义博客模板代码供参考

以下是我按照此guide编写的一些编辑过的代码，并尝试使其与我的HTML5Blank主题一起使用

<?php get_header(); $cat_id = get_query_var('cat'); ?>

<main id="main" class="custom-blog-page ajax_posts" role="main">
    <div class="jumbotron">
    </div>

    <div class="clearfix">
        <section class="blogsidebar">
            <div class="blog-tittle">
                <h1>News &amp; Events </h1>
                <h3>articles.</h3>
            </div>
            <?php get_sidebar(); ?>
        </section>

        <section class="content">
            <div class="col-md-12 container-fluid">
                <?php 
                    $args = array(
                        'post_type'         => 'custom-post-type',
                        'order'             => 'DESC',
                        'posts_per_page'    => '3'
                        );              

                $the_query = new WP_Query( $args );
                if($the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); 
            ?>
            <article>

                <div class="feature-thumbnail"><?php the_post_thumbnail('thumbnail'); /* Thumbnail */ ?></div>

                <h5><a id="custom-post-type-<?php the_ID(); ?>" href="<?php the_permalink(); ?>" >

                    <div class="post-title"><?php the_title(); ?></div>
                    <div class="the-date"> <p>Posted on <?php the_weekday() ?> - <?php the_time( get_option( 'date_format' ) ); ?></p></div>

                </a></h5>
                <p><?php the_excerpt(); ?></p>

            </article>
            <?php if (($wp_query->current_post + 1) < ($wp_query->post_count)) {
                            echo '<div class="post-item-divider"></div>';
                }
            ?>
                <?php endwhile; ?>
                <?php endif; ?>
    </div>

        <div id="more_posts" data-category="<?php echo esc_attr($cat_id); ?>"><?php esc_html_e('Load More', 'html5blank') ?></div>


    </section>
    </div>
</main>

这是我在functions.php文件底部的代码

   $ajaxurl = '';
    if( in_array('sitepress-multilingual-cms/sitepress.php',    get_option('active_plugins')) ){
    $ajaxurl .= admin_url( 'admin-ajax.php?lang=' . ICL_LANGUAGE_CODE );
} else{
    $ajaxurl .= admin_url( 'admin-ajax.php');
}

wp_localize_script( 'html5blank-script', 'ajax_load_post', array(
    'expand'   => __( 'expand child menu', 'html5blank' ),
    'collapse' => __( 'collapse child menu', 'html5blank' ),
    'ajaxurl'  => $ajaxurl,
    'noposts'  => esc_html__('No older posts found', 'html5blank'),
    'loadmore' => esc_html__('Load more', 'html5blank')
) );

add_action('wp_ajax_nopriv_html5blank_more_post_ajax', 'html5blank_more_post_ajax');
add_action('wp_ajax_html5blank_more_post_ajax', 'html5blank_more_post_ajax');

if (!function_exists('html5blank_more_post_ajax')) {
    function html5blank_more_post_ajax(){

        $ppp     = (isset($_POST['ppp'])) ? $_POST['ppp'] : 3;
        $cat     = (isset($_POST['cat'])) ? $_POST['cat'] : 0;
        $offset  = (isset($_POST['offset'])) ? $_POST['offset'] : 0;

        $args = array(
            'post_type'      => 'custom-post-type',
            'posts_per_page' => $ppp,
            'cat'            => $cat,
            'offset'          => $offset,
        );

        $loop = new WP_Query($args);

        $out = '';

        if ($loop -> have_posts()) :
            while ($loop -> have_posts()) :
                $loop -> the_post();

                $category_out = array();
                $categories = get_the_category();
                foreach ($categories as $category_one) {
                    $category_out[] ='<a href="'.esc_url( get_category_link( $category_one->term_id ) ).'" class="'.strtolower($category_one->name).'">' .$category_one->name.'</a>';
                }
                $category_out = implode(', ', $category_out);

                $cat_out = (!empty($categories)) ? '<span class="cat-links"><span class="screen-reader-text">'.esc_html__('Categories', 'html5blank').'</span>'.$category_out.'</span>' : '';

                $out .= '<article id="post-'. get_the_ID().'" class="'. implode(' ', get_post_class()) .'">
                            <header class="entry-header">';
                        if ( is_sticky() && is_home() && ! is_paged() ){
                            $out .= '<span class="sticky-post">'. __( 'Featured', 'html5blank' ).'</span>';
                        }
                        $out .= '<h2 class="entry-title"><a href="'.esc_url( get_permalink() ).'" rel="bookmark">'.get_the_title().'</a></h2>';
                    $out .= '</header>'.
                             html5wp_excerpt() . '<a class="post-thumbnail" href="'.esc_url(get_permalink()).'" aria-hidden="true" style="opacity: 1;">'.get_the_post_thumbnail('', 'post-thumbnail', array( 'alt' => the_title_attribute (array('echo' => 0) ) ) ).'</a>';
                        $out .= '<div class="entry-content">'.get_the_content( sprintf(
                                        __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'html5blank' ),
                                        get_the_title()
                                    ) );
                        $out .= '</div>';
                        $out .= '<footer class="entry-footer">
                                <span class="byline">
                                    <span class="author vcard">'.get_avatar( get_the_author_meta( 'ID' ), 49 ).'
                                        <span class="screen-reader-text">'._x( 'Author', 'Used before post author name.', 'html5blank' ).'</span>
                                        <a class="url fn n" href="'.esc_url(get_the_author_meta( 'user_email' )).'">'.get_the_author_meta( 'display_name' ).'</a>
                                    </span>
                                </span>
                                <span class="posted-on">
                                    <span class="screen-reader-text">'.esc_html__('Posted On', 'html5blank').'</span>
                                    <a href="'.esc_url( get_permalink() ).'" rel="bookmark">
                                        <time class="entry-date published" datetime="'.get_the_date('c').'">'.get_the_date('F d, Y').'</time>
                                        <time class="updated" datetime="'.get_the_modified_date('c').'">'.get_the_modified_date('F d, Y').'</time>
                                    </a>
                                </span>
                                '.$cat_out.'
                                <span class="comments-link">
                                    <a href="'.esc_url(get_comments_link()).'">'.esc_html__('Leave a comment', 'html5blank').'<span class="screen-reader-text">'.esc_html__(' on ', 'html5blank'). get_the_title().'</span>
                                    </a>
                                </span>
                                <span class="edit-link">
                                    <a class="post-edit-link" href="'.esc_url(get_edit_post_link()).'">'.esc_html__('Edit', 'html5blank').'<span class="screen-reader-text"> "'.get_the_title().'"</span>
                                    </a>
                                </span>';
                        $out .= '</footer>
                        </article>';

            endwhile;
        endif;

        wp_reset_postdata();

        wp_die($out);
    }
}

此外，我不确定我是否应该在我的functions.php中使用此功能？因为当我把它放在那里我得到一个解析错误并完全崩溃我的网站

var $content = $('.ajax_posts');
var $loader = $('#more_posts');
var cat = $loader.data('category');
var ppp = 3;
var offset = $('#main').find('.post').length;

$loader.on( 'click', load_ajax_posts );

function load_ajax_posts() {
    if (!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))) {
        $.ajax({
            type: 'POST',
            dataType: 'html',
            url: ajax_load_post.ajaxurl,
            data: {
                'cat': cat,
                'ppp': ppp,
                'offset': offset,
                'action': 'html5blank_more_post_ajax'
            },
            beforeSend : function () {
                $loader.addClass('post_loading_loader').html('');
            },
            success: function (data) {
                var $data = $(data);
                if ($data.length) {
                    var $newElements = $data.css({ opacity: 0 });
                    $content.append($newElements);
                    $newElements.animate({ opacity: 1 });
                    $loader.removeClass('post_loading_loader').html(ajax_load_post.loadmore);
                } else {
                    $loader.removeClass('post_loading_loader').addClass('post_no_more_posts').html(ajax_load_post.noposts);
                }
            },
            error : function (jqXHR, textStatus, errorThrown) {
                $loader.html($.parseJSON(jqXHR.responseText) + ' :: ' + textStatus + ' :: ' + errorThrown);
                console.log(jqXHR);
            },
        });
    }
    offset += ppp;
    return false;
}

我在指南找到here之后得到了所有这些，但是当我点击加载更多按钮/文本时它将无法工作，没有任何事情发生。抱歉这个令人难以置信的漫长而凌乱的帖子！