php - 将 ajax 加载更多按钮添加到我的首页

标签 php html ajax wordpress pagination

我正在为我的网站使用预制的 wordpress 主题。但是，我想制作一个自定义的 front-page.php，所以我做了，但现在的问题是我无法弄清楚如何向其添加 ajax 加载更多按钮。我的主题已经使用了 ajax 加载更多按钮，所以我认为添加它会很简单。但我想我可能在错误的地方添加了代码，或者我的查询搞砸了？

谁能帮我添加这个加载更多按钮？

我的自定义 front-page.php

<?php 

    get_header(); 
    get_template_part ('inc/carousel'); 

    $the_query = new WP_Query( [ 
        'posts_per_page' => 13, 
        'paged' => get_query_var('paged', 1) 
    ] ); 

    if ( $the_query->have_posts() ) { ?> 
        <div id="ajax"> 
        <?php 
            $i = 0; 
            $j = 0; 
            while ( $the_query->have_posts() ) { 
                $the_query->the_post(); 

                if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> 
                    <div class="row"> 
                        <article <?php post_class( 'col-sm-12 col-md-12' ); ?>> 
                            <div class="large-front-container"> 
                                <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
                            </div> 
                            <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                            <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
                            <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
                            <div class="front-page-post-info"> 
                                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
                                <?php get_template_part( 'front-shop-the-post' ); ?> 
                                <?php get_template_part( 'share-buttons' ); ?> 
                                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
                            </div> 
                        </article> 
                    </div> 
                <?php } else { // Small posts ?> 
                    <?php if($j % 2 === 0) echo '<div class="row">'; ?> 
                        <article <?php post_class( 'col-sm-6 col-md-6' ); ?>> 
                            <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
                            <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                            <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
                            <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
                            <div class="front-page-post-info"> 
                                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                                <?php get_template_part( 'front-shop-the-post' ); ?>
                                <?php get_template_part( 'share-buttons' ); ?>
                                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
                            </div>
                        </article> 
                <?php $j++; if($j % 2 === 0) echo '</div>'; ?> 
        <?php 
        } 
        $i++; 
        }?> 
        </div> 
    <?php
    } 
    get_footer();

我在主题中找到的 post-nav.php 代码

<div class="row pagination-below"><div class="col-md-12">
    <?php 
    $pagination_type = novablog_getVariable('pagination_type') ? novablog_getVariable('pagination_type') : 'pagnum';
    if($pagination_type=='pagnum') :

        the_posts_pagination( array(
            'mid_size' => 3,
            'type' => 'list',
            'prev_text'          => theme_locals("prev"),
            'next_text'          => theme_locals("next")
        ) );
    endif;

    global $wp_query;
    if ( $wp_query->max_num_pages > 1 && $pagination_type=='paglink' ) : ?>
        <div class="paglink">
            <span class="pull-left"><?php previous_posts_link(theme_locals("newer")) ?></span>       
            <span class="pull-right"><?php next_posts_link(theme_locals("older")) ?></span>
        </div>
    <?php endif; ?>

    <?php
        if ( $wp_query->max_num_pages > 1 && $pagination_type=='loadmore' or $wp_query->max_num_pages > 1 && $pagination_type=='infinite' ) { 
            $all_num_pages = $wp_query -> max_num_pages;
            $next_page_url = novablog_next_page($all_num_pages);
    ?>
            <div class="ajax-pagination-container">
              <a href="<?php echo esc_url($next_page_url); ?>" id="ajax-load-more-posts-button"></a>
            </div>
    <?php } ?>
</div></div>

这是加载更多按钮在我的本地主机上的显示方式 enter image description here

我希望我的首页帖子布局看起来像的示例。连续 1 个帖子，连续 2 行 2 个帖子，连续 1 个帖子，依此类推。然后每 15 个帖子后，加载更多按钮就会出现。 enter image description here

这是 chrome 开发人员在我检查加载更多按钮时的样子 enter image description here

最佳答案

将此添加到 front-page.php

<?php

get_header();
get_template_part ('inc/carousel');

?>


<script>
    var now=2; // when click start in page 2

    jQuery(document).on('click', '#load_more_btn', function () {

        jQuery.ajax({
            type: "POST",
            url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php",
            data: {
                action: 'my_load_more_function', // the name of the function in functions.php
                paged: now, // set the page to get the ajax request
                posts_per_page: 15  //number of post to get (use 1 for testing)
            },
            success: function (data) {

            if(data!=0){
                jQuery("#ajax").append(data);  // put the content into ajax container
                now=now+1; // add 1 to next page
            }else{
                jQuery("#load_more_btn").hide();
                jQuery("#content-load-more-btn").html("<h4>No more results</h4>");
            }
            },
            error: function (errorThrown) {
                alert(errorThrown); // only for debuggin
            }
        });
    });
</script>

<section id="ajax"><!-- i have to change div to section, maybe a extra div declare -->
<?php

$the_query = new WP_Query( [
    'posts_per_page' => 15, // i use 1 for testing
    'orderby'=>'title', // add order for prevent duplicity
    'order'=>'ASC',
    'paged' => get_query_var('paged', 1) //page number 1 on load
] );

if ($the_query->have_posts()) {

        $i = 0;
        $j = 0;
        while ($the_query->have_posts()) {
            $the_query->the_post();

            if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
                <div class="row">
                    <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
                        <div class="large-front-container">
                            <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
                        </div>
                        <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                        <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                        <div class="front-page-post-info">
                            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                            <?php get_template_part( 'front-shop-the-post' ); ?>
                            <?php get_template_part( 'share-buttons' ); ?>
                            <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                        </div>
                    </article>
                </div>
            <?php } else { // Small posts ?>
                <?php if($j % 2 === 0){ echo '<div class="row">';} ?>
                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                    <div class="front-page-post-info">
                        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                        <?php get_template_part( 'front-shop-the-post' ); ?>
                        <?php get_template_part( 'share-buttons' ); ?>
                        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                    </div>
                </article>
                <?php $j++; if($j % 2 === 0){ echo '</div>';}?>
                <?php
            }
            $i++;
        }?>
    <?php
}?>
</section>
<div id="content-load-more-btn">
<button id="load_more_btn">Load More</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
</div>
<?php
get_footer();

然后在 functions.php 中添加以下代码:

add_action('wp_ajax_my_load_more_function', 'my_load_more_function');
add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function');

function my_load_more_function() {

    $query = new WP_Query( [
        'posts_per_page' => $_POST["posts_per_page"],
        'orderby'=>'title',
        'order'=>'ASC',
        'paged' => get_query_var('paged', $_POST["paged"])
    ] );


    if ($query->have_posts()) {

        $i = 0;
        $j = 0;

        while ($query->have_posts()) {
                $query->the_post();

            if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
                <div class="row">
                    <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
                        <div class="large-front-container">
                            <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
                        </div>
                        <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                        <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                        <div class="front-page-post-info">
                            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                            <?php get_template_part( 'front-shop-the-post' ); ?>
                            <?php get_template_part( 'share-buttons' ); ?>
                            <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                        </div>
                    </article>
                </div>
            <?php } else { // Small posts ?>
                <?php if($j % 2 === 0) echo '<div class="row">'; ?>
                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                    <div class="front-page-post-info">
                        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                        <?php get_template_part( 'front-shop-the-post' ); ?>
                        <?php get_template_part( 'share-buttons' ); ?>
                        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                    </div>
                </article>
                <?php $j++; if($j % 2 === 0) echo '</div>'; ?>
                <?php
            }
            $i++;

        }
        wp_reset_query();
    }else{
        return 0;
    }

    exit;
}

我认为您在 front-page.php 中的循环设置有问题需要解决，在 posts-per-page 参数中，显示 posts-per-page + 1 个结果。

如果这解决了您的问题，请告诉我。

关于php - 将 ajax 加载更多按钮添加到我的首页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45392448/

上一篇：php - 如何在 Box-API 中使用应用程序用户 ID 创建访问 token ？

下一篇：php - 如何在 iOS 中使用 POST 请求向 SendGrid 发送照片电子邮件附件？

相关文章：

php - Codeigniter - 限制从 URL 调用直接访问 Controller 功能

javascript - 从 AJAX 发送的数组中正确提取 bool 值

php - 无法使用 WordPress wp_posts 表添加外键

jquery - WordPress 类别菜单 jQuery/CSS 悬停

javascript - Spotify Api Ajax Post请求使用 'ajax-request' Node 包获取 token

jquery - JSON 是如何工作的？如果我执行返回类型为 json 的 jquery $.post ，数据如何返回？

php - xml中具有相同名称的多个节点

html - 如何将 div 与另一个 'inline-block' 中的 'div' 属性对齐？

javascript - 如何在React JS中同时调用多个ajax(并异步获取结果)？

javascript - 保护 javascript 文件中使用的数据

©2024 IT工具网  联系我们