Question

这已接近我所需要的。它从$ files（get_post_meta）中分出5个结果并创建页面，但图像在所有页面上都是相同的图像。我超出了我的大脑界限。

function gallery_loop() {

if( get_query_var('page') ) {
    $page = get_query_var( 'page' );
} else {
    $page = 1;
}


$img_size = 'portfolio-catalog';


$files = get_post_meta(get_the_ID(), '_cmb_gallery_images', true);
$limit = 5;
$total = count( $files );
$pages = ceil( $total / $limit );

$curr_page = isset($_GET['page']);
$offset = ($curr_page - 1) * $limit;


$items_array = array_chunk((array) $files, $limit, true); 

$files_array = array_slice($items_array, $offset, true); // this is showing the same 5 items on all the pages

foreach ($files_array as $files) {

    echo '<div style="border:1px solid red;">'; //BEGIN "page" so I can see if they are splitting correctly

    foreach ($files as $attachment_id => $attachment_url) {

    $page=1;

        echo '<div class="file-list-image">';
        echo wp_get_attachment_image($attachment_id, $img_size);
        echo '</div>';

    $page++;


    } // end $files as $attachment_id => $attachment_url

    echo '</div>'; //END "page" so I can see if they are splitting correctly


} // end foreach $files_array as $files



//the correct amount of pages are showing up but the items are all the same
 echo paginate_links( array(
    'base' => get_permalink() . '%#%' . '/',
    'format' => '?page=%#%',
    'current' => $page,
    'total' => $pages
  ) );


}
// end function

Answer 1

这样的事情应该可以解决问题。

<强> PHP

<?php

$files_array=array_chunk((array) $files, 10, true); //10 is an amount per page here
foreach ($files_array as $files)
{
    $page=1;
    echo '<div data-imgpage="' . $page . '" class="images_page' . (($page > 1) ? 'hidden_class' : '') . '">';
    foreach ($files as $attachment_id => $attachment_url)
    {
        echo '<div class="file-list-image">';
        echo wp_get_attachment_image($attachment_id, $img_size);
        echo '</div>';
    }
    echo '</div>';
    $page++;
}

// now create some pagination if needed
echo ((count($files_array) > 1) ? '<div class="pagination_container">' . create_pagination(1, count($files_array)) . '</div>' : '');

function create_pagination($current_page, $limit)
{
    $first=((($current_page - 2) > 0) ? $current_page - 2 : 1);
    $last=((($current_page + 2) < $limit) ? $current_page + 2 : $limit);
    $html='<ul data-imglisting-pagination-max="' . $limit . '">';
    if ($first > 1)
    {
        $html .= '<li data-imglisting-pagination-page="1" data-imglisting-pagination-action="active"><span class="page_class">1</span></li>';
        $html .= '<li data-imglisting-pagination-action="disabled" class="disabled_page_class"><span>...</span></li>';
    }
    for ($i=$first; $i <= $last; $i ++)
    {
        $html .= '<li data-imglisting-pagination-page="' . $i . '" data-imglisting-pagination-action="active" ' . (($current_page == $i) ? 'class="active_page_class"' : "" ) . '><span class="page_class">' . $i . '</span></li>';
    }
    if ($last < $limit)
    {
        $html .= '<li data-imglisting-pagination-action="disabled" class="disabled_page_class"><span>...</span></li>';
        $html .= '<li data-imglisting-pagination-page="' . $limit . '" data-imglisting-pagination-action="active"><span class="page_class">' . $limit . '</span></li>';
    }
    $html .= '</ul>';

    return $html;
}

<强> JS

jQuery(document).ready(function ($)
{
    var current_page = 1;
    bind_stuff();
    function bind_stuff()
    {
        $('[data-imglisting-pagination-action="active"]').unbind('click');
        $('[data-imglisting-pagination-action="active"]').click(function ()
        {
            if (current_page != $(this).attr('data-imglisting-pagination-page'))
            {
                current_page = $(this).attr('data-imglisting-pagination-page');
                $('[data-imglisting-pagination-action="active"]').removeClass('active_page_class');
                $('[data-imgpage]').hide();
                $('[data-imgpage="' + current_page + '"]').show();
                $(this).addClass('active_page_class');
                $('.pagination_container').html(build_pagination(current_page, parseInt($('data-imglisting-pagination-max').attr('data-imglisting-pagination-max'))));
                bindStuff();
            }
        });
    }
});
function build_pagination(current, limit)
{
    var first = (((current - 2) > 0) ? current - 2 : 1);
    var last = (((current + 2) < limit) ? current + 2 : limit);
    output = '<ul data-imglisting-pagination-max="' + limit + '">';
    if (first > 1)
    {
        output = output + '<li data-imglisting-pagination-page="1" data-imglisting-pagination-action="active"><span class="page_class">1</span></li>';
        output = output + '<li data-imglisting-pagination-action="disabled" class="disabled_page_class"><span>...</span></li>';
    }
    for (i = first; i <= last; i++)
    {
        output = output + '<li data-imglisting-pagination-page="' + i + '" data-imglisting-pagination-action="active" ' + ((current == i) ? 'class="active_page_class"' : "") + '><span class="page_class">' + i + '</span></li>';
    }
    if (last < limit)
    {
        output = output + '<li data-imglisting-pagination-action="disabled" class="disabled_page_class"><span>...</span></li>';
        output = output + '<li data-imglisting-pagination-page="' + limit + '" data-imglisting-pagination-action="active"><span class="page_class">' + limit + '</span></li>';
    }
    output = output + '</ul>';
    return output;
}

CMB2 Filelist类型分页结果（使用get_post_meta）

1 个答案: