Php 如何在带有下拉过滤器的归档页面上添加ajax加载更多按钮+；搜索栏

我想添加一个ajax加载更多按钮来加载归档页面上的更多帖子。 我有一个显示所有新闻帖子的归档页面。我们可以使用类别下拉列表和搜索栏过滤结果。 那边一切正常

为了做到这一点，我使用了一个教程，并根据我的案例进行了调整

我在functions.php中创建了一个短代码：

//新闻过滤器的快捷码
函数my\u ajax\u filter\u search\u scripts（）{
wp_enqueue_脚本（'my_ajax_filter_search'，get_stylesheet_directory_uri（）。/filter js.js'，array（），'1.0'，true）；
wp_本地化_脚本（'my_ajax_filter_search'，'ajax_url'，admin_url（'admin-ajax.php'）；
}
函数my\u ajax\u filter\u search\u shortcode（）{
my_ajax_filter_search_scripts（）；
ob_start（）；？>
(function($){

    $(document).ready(function() {
        var mafs = $("#my-ajax-filter-search"); 
        var mafsForm = mafs.find("form"); 
        
        mafsForm.on('change', function() {
            submitForm();
        });
        mafsForm.keypress(function() {
            submitForm();
        });
        mafsForm.submit(function(e) {
            e.preventDefault(); 
        });
        

        function submitForm() {

            if(mafsForm.find("#search").val().length !== 0) {
                var search = mafsForm.find("#search").val();
            }
            if(mafsForm.find("#catNews").val().length !== 0) {
                var catNews = mafsForm.find("#catNews").val();
            }
                
            var data = {
                action : "my_ajax_filter_search",
                search : search,
                catNews : catNews
            }
            
            $.ajax({
                url : ajax_url,
                data : data,
                success : function(response) {
                    mafs.find("div#ajax_fitler_search_results").empty();
                    if(response !== "No data.") {
                        for(var i = 0 ;  i < response.length ; i++) {
                            var html  = "<div class='news-component'>";
                            html += "       <div class='list-item news-list-item'>";
                            html += "           <a class='news-link' href='" + response[i].permalink + "' title='More'>";
                            html += "               <div class='news-content'>";
                            html += "                   <div class='inner-content'>";
                            html += "                       <div class='image-wrapper'>";
                            html += "                           <div class='image-news' style=\"background-image: url('" + response[i].featureImg + "');\"></div>";
                            html += "                       </div>";
                            html += "                       <div class='content-wrapper'>";
                            html += "                           <div>";
                            html += "                               <span class='title'>" + response[i].title + "</span>";
                            html += "                               <span class='date'>" + response[i].date + "</span>";
                            html += "                               <span class='news-cats'>" + response[i].catNews + "</span>";
                            html += "                           </div>";
                            html += "                           <p>" + response[i].content + "</p>";
                            html += "                       </div>";
                            html += "                   </div>";
                            html += "               </div>";
                            html += "               <button class='btn news-btn btn-orange' type='button'> &gt; More</button>";
                            html += "           </a>";
                            html += "      </div>";
                            html += "  </div>";
                            mafs.find("div#ajax_fitler_search_results").append(html);
                        }
                    } else {
                        var html  = "<div class='no-result'>No results found for your search criteria</div>";
                        mafs.find("div#ajax_fitler_search_results").append(html);
                    }
                },
                error: function(jqxhr, status, exception) {
                    console.log('Exception:', exception);
                }
            });
        };
        mafsForm.trigger('change');
    });

})( jQuery );