我正在尝试添加wp-link-pages 功能到我的帖子中，我将图片拆分为多个页面。我已经有了next和prev按钮，其功能是用javascript编写的。如果我想从图1跳到图14，我觉得很难。所以我不知道如何实现这个wordpress，因为我是一个傻瓜。下面是我用来将帖子图像拆分为多个页面的代码。

<?php 
                        global $post;
                        if (has_post_thumbnail( $post->ID ) )
                        {
                            $id = get_post_thumbnail_id( $post->ID );
                            $exclude = $id;
                        }
                        $attachments = get_children( array(\'post_parent\' => $post->ID,
                        \'post_status\' => \'inherit\', \'post_type\' => \'attachment\', \'order\' => \'DESC\',
                        \'orderby\'  => \'menu_order DESC\', \'exclude\' => $exclude) );

                        $imgid = 1;

                        foreach($attachments as $attachment){

                            ?>
                                <div class="comix" style="display:none; margin:0 auto; position:absolute;"><h2>Page <?php echo $imgid; ?></h2><img src="<?php echo $attachment->guid;?>" style="margin:0 auto;" /><br /><p><?php echo $attachment->post_content;?></p></div>

                            <?
                            $imgid++;
                        }

                    ?>

我有这个导航

 <div class="navigation" style="bottom:100px;"><a href="#" class="prev" ><img src="<?php echo get_template_directory_uri();?>/images/arrow-prev1.png" style="2px solid #EE1C25 ; width: 100px; height: 100px;"  /></a><div style="float:right; cursor:pointer;"><a href="#" class="next" ><img src="<?php echo get_template_directory_uri();?>/images/arrow-next1.png" style="2px solid #EE1C25 ; width: 100px; height: 100px;" /></a></div><div class="clear"></div></div>

其功能由以下javascript提供

 <script>
    jQuery(document).ready(function($){
        //comicles
        nextClicked = false;
        prevClicked = false;
        $(\'.getstarted-content > div.comix\').hide();
        $(\'.getstarted-content > div.comix:first-child\').fadeIn();
        $(\'.getstarted-content > div.comix:first-child\').addClass(\'activeComicle\');
        var Height = $(\'.activeComicle > img\').css(\'height\');
        $(\'ul.getstarted li\').click(function(){             
            $gscontent = $(\'img\', this).attr(\'class\');
            $(\'.getstarted-content > div.comix\').fadeOut();
            $(\'.getstarted-content > div.comix\').removeClass(\'activeComicle\');
            $(\'.getstarted-content div#\'+$gscontent+"").fadeIn();
            $(\'.getstarted-content div#\'+$gscontent+"").addClass(\'activeComicle\');

        });
        $(\'.prev\').hide();


        $(\'.prev\').click(function(){
            if(prevClicked == false){
                prevClicked = true;$(\'.getstarted-content > div.comix\').fadeOut();              
                obj = $(\'div.activeComicle\').prev();
                $(obj).fadeIn();
                $(\'.getstarted-content > div.comix\').removeClass(\'activeComicle\');
                $(obj).addClass(\'activeComicle\');

                $(\'.next\').show();

                if($(obj).prev().html() == null || $(obj).prev().html()==\'\'){
                    $(\'.prev\').hide();
                }
                var Height = $(\'.activeComicle > img\').height();
                $(\'#photos\').css(\'height\', \'\'+(Height+75)+\'\');
                prevClicked = false;
            }
            //prevcheck();
            //nextcheck();
            window.scrollTo(0,0);
            return false;
        });
        $(\'.next\').click(function(){
            if(nextClicked == false){
                nextClicked = true;
                $(\'.getstarted-content > div.comix\').fadeOut();             
                obj = $(\'div.activeComicle\').next();
                $(obj).fadeIn();
                $(\'.getstarted-content > div.comix\').removeClass(\'activeComicle\');
                $(obj).addClass(\'activeComicle\');
                $(\'.prev\').show();
                if($(obj).next().html() == null || $(obj).next().html()==\'\'){
                    $(\'.next\').hide();
                }
                $(\'#photos\').height($(\'.activeComicle  > img\').height()+75);
                nextClicked = false;
            }
            window.scrollTo(0,0);
            return false;
        });


        setTimeout(init, 2000);



    });
    function init(){
            jQuery(\'#photos\').css(\'visibility\', \'visible\');
            jQuery(\'#loading\').css(\'visibility\', \'hidden\');
            jQuery(\'#photos\').height(jQuery(\'.activeComicle > img\').height() + 75);
    }
</script>

我正在努力实现以下目标

<< Previous Page | 1 | 2 | 3 | 4 | Next Page >> 

我希望我是清楚的。任何帮助都将不胜感激。

<script>
$(document).on("scroll mousedown DOMMouseScroll mousewheel keydown", function (e) {
    if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel") {
        $(\'html,body\').stop();
    }
});


pageSize = 1;

showPage = function(page) {
    $(".comix").hide();
    $(".comix").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();

    });        
}

showPage(1)

$("#pagin li").click(function() {
    $("#pagin li").removeClass("current");
    $(this).addClass("current");
                $(\'html, body\').animate({scrollTop: $(".single-post-content").offset().top}, 400);

    showPage(parseInt($(this).text())) 
});

    $(\'#pagin li\').each(function(i) {
    if ( i === 1 ) {
       $(this).addClass(\'current\');
    }
});

var $first = $(\'li:first\', \'ol\'),
    $last = $(\'li:last\', \'ol\');

$(document).keydown(function(e){
    if (e.keyCode === 39) { 
        var $next, $selected = $(".current");
            $next = $selected.next(\'li\').length ? $selected.next(\'li\') : $first;
            $selected.removeClass("current");
            $next.addClass("current");
            $(\'html, body\').animate({scrollTop: $(".single-post-content").offset().top}, 400);
            showPage(parseInt($next.text())) 
    }
});


$(document).keydown(function(e){
    if (e.keyCode === 37) { 
            var $prev, $selected = $(".current");

            $prev = $selected.prev(\'li\').length ? $selected.prev(\'li\') : $last;
            $selected.removeClass("current");
            $prev.addClass("current");
            $(\'html, body\').animate({scrollTop: $(".single-post-content").offset().top}, 400);
            showPage(parseInt($prev.text())) 

}
    });


</script>