php - 如何在 Wordpress 中使用图像 ID 数组显示分页图像？

Question

编辑: 我有一个代码，此代码显示 meta_post ，从 meta_post 我将使用 wp_get_attachment_image 显示图像，每个帖子都有一个 value_gallery code> 在 1 个数组中，数组的值为 id-attr image ， 1 value_gallery 有 2 个或多个以逗号分隔的 id-attr ，所以我想要使​​帖子分页，但我不知道如何制作它，我在 single-gallery.php 上制作此代码，

我想让这段代码像 this ，但是这段代码仍然只是显示“未找到”，如果有人可以帮助我，我会非常高兴

注意:meta_value value_gallery 的值是数组 ex : array(1) { [0]=> string(29) "1402,1435,1398,1434,1434,1434"} 感谢您的关注

已编辑: 从这段代码中，我尝试每页显示 meta_post (例如:每页 4 个)并尝试进行分页，更新代码:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $ids = get_the_ID();
    $args = array('paged' => $paged ,  'post__in' => array($ids));
    $the_query = new WP_Query($args);
if (have_posts()) :
while (have_posts()) : the_post();
     $metas = get_post_meta(get_the_ID(),'value_gallery',false);
            foreach ($metas as $meta) {
                $key_val = explode(",", $meta);
                $image_chunk = array_chunk($key_val, 3);
                $page = get_query_var('page');
                $page = $page > 1 ? $page - 1 : 0 ;
                if (isset($key_val[$page])) {
                    foreach ($image_chunk[$page] as $image) {
                        echo "<div class='col-lg-4'>".
                        wp_get_attachment_image($image,"cherry-thumb-a") ."</div>";
                    }
                }
            }
endwhile;
 $big = 9999;
 echo paginate_links( array(
   'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
   'format' => '?paged=%#%',
   'current' => max( 1, get_query_var('paged') ),
   'total' => $the_query->max_num_pages
    ) );
   wp_reset_postdata();
endif;

更新2 我会再次解释这个问题 所以我试图制作一个画廊帖子，一个画廊帖子有一个 meta_post ，其值为 1 个数组 ex:array(1) { [0]=> string(29) "1402, 1435,1398,1434,1434,1434"} 所以这个值是 image 的 id-attr ，我将尝试为 this meta_post 进行分页

更新3 这是我试图用这段代码做的说明

Answer 1

试试这个 JavaScript 分页，会容易得多。

<div id="gallery_items" class="row">  <!-- gallery div -->
<?php
$gallery_value = get_post_meta(get_the_ID(), 'value_gallery', false)[0];
$split_images = explode(",", $gallery_value); 

$imgcnt = 0;
$hideclass = '';
foreach ( $split_images as $image ) { 
    $imgcnt++;
    if($imgcnt > 4) $hideclass = ' hidden'; //hide divs greater than 4, even though pagination script handles this
    echo "<div class='col-lg-4$hideclass'>".wp_get_attachment_image($image,"cherry-thumb-a") ."</div>";
}
?>
</div>
<div id="page_navigation"></div> <!-- pagination div -->

添加此 JS(分页脚本归功于 Karpov Systems )。

/* * * * * * * * * * * * * * * * *
* Pagination Function
* * * * * * * * * * * * * * * * */
var Pagination = {

    code: '',

    // converting initialize data
    Extend: function(data) {
        data = data || {};
        Pagination.size = data.size || 300;
        Pagination.page = data.page || 1;
        Pagination.step = data.step || 3;
    },

    // add pages by number (from [s] to [f])
    Add: function(s, f) {
        for (var i = s; i < f; i++) {
            Pagination.code += '<a>' + i + '</a>';
        }
    },

    // add last page with separator
    Last: function() {
        Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
    },

    // add first page with separator
    First: function() {
        Pagination.code += '<a>1</a><i>...</i>';
    },

    // change page
    Click: function() {
        Pagination.page = +this.innerHTML;
        Pagination.Start();
    },

    // previous page
    Prev: function() {
        Pagination.page--;
        if (Pagination.page < 1) {
            Pagination.page = 1;
        }
        Pagination.Start();
    },

    // next page
    Next: function() {
        Pagination.page++;
        if (Pagination.page > Pagination.size) {
            Pagination.page = Pagination.size;
        }
        Pagination.Start();
    },

    // binding pages
    Bind: function() {
        var a = Pagination.e.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
            a[i].addEventListener('click', Pagination.Click, false);
        }
    },

    // write pagination
    Finish: function() {
        Pagination.e.innerHTML = Pagination.code;
        Pagination.code = '';
        Pagination.Bind();
    },

    // find pagination type
    Start: function() {
        goToPage(Pagination.page-1);
        if (Pagination.size < Pagination.step * 2 + 6) {
            Pagination.Add(1, Pagination.size + 1);
        }
        else if (Pagination.page < Pagination.step * 2 + 1) {
            Pagination.Add(1, Pagination.step * 2 + 4);
            Pagination.Last();
        }
        else if (Pagination.page > Pagination.size - Pagination.step * 2) {
            Pagination.First();
            Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
        }
        else {
            Pagination.First();
            Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
            Pagination.Last();
        }
        Pagination.Finish();
    },

    // binding buttons
    Buttons: function(e) {
        var nav = e.getElementsByTagName('a');
        nav[0].addEventListener('click', Pagination.Prev, false);
        nav[1].addEventListener('click', Pagination.Next, false);
    },

    // create skeleton
    Create: function(e) {

        var html = [
            '<a>&#9668;</a>', // previous button
            '<span></span>',  // pagination container
            '<a>&#9658;</a>'  // next button
        ];

        e.innerHTML = html.join('');
        Pagination.e = e.getElementsByTagName('span')[0];
        Pagination.Buttons(e);
    },

    // init
    Init: function(e, data) {
        Pagination.Extend(data);
        Pagination.Create(e);
        Pagination.Start();
    }
};

/* * * * * * * * * * * * * * * * *
* Other Functions
* * * * * * * * * * * * * * * * */

var show_per_page = 4;
function showPagination() {
    //getting the amount of elements inside content div
    var number_of_items = jQuery('#gallery_items .col-lg-4').length;
    //calculate the number of pages we are going to have
    var number_of_pages = Math.ceil(number_of_items/show_per_page);

    if(eval(number_of_pages)>1) {
        //set the value of our hidden input fields
        var pg=1;
        Pagination.Init(document.getElementById('page_navigation'), {
            size: number_of_pages, // pages size
            page: pg,  // selected page
            step: 2   // pages before and after current
        });

        //hide all the elements inside content div
        jQuery('#gallery_items .col-lg-4').css('display', 'none');

        //and show the first n (show_per_page) elements
        jQuery('#gallery_items .col-lg-4').slice(0, show_per_page).css('display', 'block');
    }
    else {
        if(eval(number_of_items)>0) {
            jQuery('#gallery_items .col-lg-4').css('display', 'block');
            jQuery('#page_navigation').html('');
        }
        else
            jQuery('#page_navigation').html('<p class="red_font">No Images.</p>');
    }
};

function goToPage(page_num) {
    //get the element number where to start the slice from
    start_from = page_num * show_per_page;

    //get the element number where to end the slice
    end_on = start_from + show_per_page;

    //hide all children elements of content div, get specific items and show them
    jQuery('#gallery_items .col-lg-4').css('display', 'none').slice(start_from, end_on).css('display', 'block');

    //remove previous active & add active to current
    jQuery('#page_navigation .page_link').removeClass('active_page');
    jQuery('.page_link[longdesc=' + page_num +']').addClass('active_page');

    //scroll to top
    jQuery('html, body').animate({
        scrollTop: eval(jQuery("#gallery_items").offset().top)-50
    }, 750);
}

jQuery(document).ready(function(){
    showPagination();
});

希望这能解决您的问题。