Question

我创建了一个循环，基本上可以获得所有“特色图片”（发布缩略图）＆amp;我的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但它对我不起作用，我不确定它是否因为使用JQuery解决方案进行PHP循环不是最好的解决方案。

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

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

1 个答案: