Wordpress/PHP 循环，显示前 3 个项目，然后单击加载更多

Question

我创建了一个循环，基本上从我的 WordPress 主题中的每个页面获取所有“特色图片”（发布缩略图）和页面标题，并将它们显示在首页上。效果很好，这是目前的代码：

<?php $args = array(
'sort_order' => 'asc',
'sort_column' => 'menu_order',
'hierarchical' => 1,
'exclude' => '',
'include' => '',
'meta_key' => '',
'meta_value' => '',
'authors' => '',
'child_of' => $post->ID,
'parent' => -1,
'exclude_tree' => '',
'number' => '',
'offset' => 0,
'post_type' => 'page',
'post_status' => 'publish'
); 
$pages = get_pages($args); 
?>  

<section id="blog"> 
   <div class="posts">
    <?php foreach ( $pages as $page ) : ?>
    <?php
        $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' );
    ?>
        <div class="small post" style="background-image: url( '<?php echo $background[0]; ?>' );">

            <a href="<?php the_permalink( $page->ID ); ?>">
                <span class="inside">   
                    <h2><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h2>
                </span>
            </a>
        </div>
    <?php endforeach; ?>
    </div>
</section>

问题： 因为我的网站上有 10 多个页面，所以此代码一次输出所有特色图像。太多了。

我需要什么： 我想将循环播放的内容限制为 3 张精选图片，然后能够单击“查看更多”以加载另外“x”张精选图片。

我在这里找到了我需要的完美示例：jQuery load first 3 elements, click "load more" to display next 5 elements 但它对我不起作用，我不确定是不是因为对 PHP 循环使用 JQuery 解决方案不是最好的解决方案。

Answer 1

在 WordPress 中 get_pages() 添加 number 设置要列出的页数。这会导致定义 SQL LIMIT 值。默认为无限制。 和查看更多您需要使用 ajax 和 jQuery

请查看以下代码

在您的页面中添加此代码以显示页面列表

<?php
$args = array(
'sort_order' => 'asc',
'sort_column' => 'menu_order',
'hierarchical' => 1,
'exclude' => '',
'include' => '',
'meta_key' => '',
'meta_value' => '',
'authors' => '',
'child_of' => $post->ID,
'parent' => -1,
'exclude_tree' => '',
'number' => 3,
'offset' => 0,
'post_type' => 'page',
'post_status' => 'publish'
); 
$pages = get_pages($args); 
?>
<section id="blog"> pages
   <div class="posts" id="addviewmoredata">
    <?php foreach ( $pages as $page ) : ?>
    <?php
        $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' );
    ?>
        <div class="small post" style="background-image: url( '<?php echo $background[0]; ?>' );">

            <a href="<?php the_permalink( $page->ID ); ?>">
                <span class="inside">   
                    <h2><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h2>
                </span>
            </a>
        </div>
    <?php endforeach; ?>
    </div>
    <div><a href="#" id="viewmore" data-id="2">View More</a></div>
</section>

在您的页面中添加此 jQuery 代码以显示页面列表

<script>
jQuery(document).ready(function(){
    jQuery(document).on("click","#viewmore",function(){
        var page=jQuery(this).attr("data-id");
        jQuery.ajax('<?php echo admin_url('admin-ajax.php'); ?>', {
            type: "POST",
            data: {
                action:'custom_load_more',
                page:page,
                'postid':'<?php echo $post->ID; ?>',
            },
            cache: false,
            success: function (response) {
                //alert(response);
                if(response!="")
                {
                    jQuery("#addviewmoredata").append(response);

                    page++;

                    jQuery("#viewmore").attr("data-id",page);
                }
                else
                {
                    jQuery("#viewmore").remove();
                }
            },
            error: function (error) {
                if (typeof console === "object") {
                    console.log(error);
                }
            },
            complete: function () {
            }
        }); 
    });

});
</script>

将此代码添加到您的 function.php 文件中。

function custom_load_more_callback( )
{

        global $wpdb;
        $paged = ( $_REQUEST['page'] ) ? $_REQUEST['page'] : 1; 
        $offset = ($paged - 1) * 3 + 1;

        $args = array(
        'sort_order' => 'asc',
        'sort_column' => 'menu_order',
        'hierarchical' => 1,
        'exclude' => '',
        'include' => '',
        'meta_key' => '',
        'meta_value' => '',
        'authors' => '',
        'child_of' => $_REQUEST['postid'],
        'parent' => -1,
        'exclude_tree' => '',
        'number' => 3,
        'offset' => $offset,
        'post_type' => 'page',
        'post_status' => 'publish'
        ); 
        $pages = get_pages($args); 

        ?>  
            <?php if(count($pages)){

            foreach ( $pages as $page ) : ?>
            <?php
                $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' );
            ?>
                <div class="small post" style="background-image: url( '<?php echo $background[0]; ?>' );">

                    <a href="<?php the_permalink( $page->ID ); ?>">
                        <span class="inside">   
                            <h2><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h2>
                        </span>
                    </a>
                </div>
            <?php endforeach; } ?>



<?php
die();
}
add_action('wp_ajax_custom_load_more', 'custom_load_more_callback'); // Logged-in users
add_action('wp_ajax_nopriv_custom_load_more', 'custom_load_more_callback'); // Guest users