Bootstrap acf wp與get_posts分頁

Question

我有這個問題創建一個導航，與我的get_posts（$ args）作出反應。試過了所有的東西，我在網上找到的所有解決方案都是用wp查詢完成的。

我使用ACF和Bootstrap，所以我真的想堅持get_posts。

這裏的代碼是我目前的代碼，完美的作品只顯示5篇文章。但是，如何爲分頁創建導航？

<div class="articles"> 
    <?php 
    $args = array( //'numberposts' => -1 
        'orderby' => 'post_date', 
        'order' => 'DESC', 
        'post_type' => 'post', 
        'post_status' => 'publish', 
        'posts_per_page' => 5, 
        'paged' => $paged,); 
    $posts= get_posts($args); 
    if ($posts) : 
     $counter = 1; 
     foreach ($posts as $p) : 
     $classCount = 'post-'.$counter; 
     if($classCount == 'post-1') : echo '<div class="mediumPost col-xs-12 col-sm-6 col-md-6 col-lg-6">'; 
     elseif($classCount == 'post-2' || $classCount == 'post-3') : echo '<div class="smallPost col-xs-12 col-sm-6 col-md-6 col-lg-6">'; 
     elseif($classCount == 'post-4') : echo '<div class="largePost col-xs-12 col-sm-12 col-md-12 col-lg-12">'; 
     elseif($classCount == 'post-5') : echo '<div class="mediumPost col-xs-12 col-sm-6 col-md-6 col-lg-6">'; 
     elseif($classCount == 'post-6' || $classCount == 'post-7') : echo '<div class="smallPost col-xs-12 col-sm-6 col-md-6 col-lg-6">'; 
     else : echo '<div class="smallPost col-xs-12 col-sm-6 col-md-6 col-lg-6">'; 
     endif; ?> 
      <?php $postImg = get_field('post_image', $p->ID); if(!empty($postImg)): ?> 
       <img src="<?php echo $postImg['url']; ?>" alt="<?php if(!empty($postImg['alt'])): echo $postImg['alt']; else : echo the_title(); endif; ?>" /> 
      <?php endif; ?> 
      <div class="iconBox"> 
       <?php $getIcon = get_field('post_type', $p->ID); ?> 
       <?php $catIcon = get_field($getIcon, 132); ?> 
        <?php if(!empty($catIcon)): ?> 
         <img class="iconImg" src="<?php echo $catIcon['url']; ?>" alt="<?php if(!empty($catIcon['alt'])): echo $catIcon['alt']; else : echo the_title(); endif; ?>" /> 
        <?php endif; ?> 
      </div> 
      <?php $categories = get_the_category($p->ID); 
      $category_id = $categories[0]->cat_ID; ?>     
      <?php if($category_id == 9) : ?> 
      <h4 data-toggle="modal" data-target="#myModal-<?php echo $counter ?>"><?php echo get_the_title($p->ID); ?></h4> 
      <span class="articles-btn" data-toggle="modal" data-target="#myModal-<?php echo $counter ?>">Watch link</span> 
      <!-- Modal --> 
      <div class="modal fade" id="myModal-<?php echo $counter ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
       <div class="modal-dialog modal-lg"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
          <h5 class="modal-title" id="myModalLabel"><?php echo get_the_title($p->ID); ?></h5> 
         </div> 
         <div class="modal-body"> 
          <div class="embed-container"> 
           <?php // get iframe HTML 
           $iframe = get_field('post_embed', $p->ID); 
           // use preg_match to find iframe src 
           preg_match('/src="(.+?)"/', $iframe, $matches); 
           $src = $matches[1]; 
           // add extra params to iframe src 
           $params = array(
            'controls' => 1, 
            'hd'  => 1, 
            'autohide' => 1 
           ); 
           $new_src = add_query_arg($params, $src); 
           $iframe = str_replace($src, $new_src, $iframe); 
           // add extra attributes to iframe html 
           $attributes = 'frameborder="0"'; 
           $iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe); ?> 
           <?php echo $iframe; ?> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <?php else : ?> 
       <a href="<?php echo get_permalink($p->ID); ?>"><h4><?php echo get_the_title($p->ID); ?></h4></a> 
       <a href="<?php echo get_permalink($p->ID); ?>"><span class="articles-btn">READ MORE</span></a> 
      <?php endif; ?> 
     </div> <!--postSize div--> 
     <?php $counter++; if (11 === $counter) $counter = 1; endforeach; wp_reset_postdata();?> 
    <?php endif; ?> 
</div> 

Answer 1

複製此功能在您的functions.php

function custom_pagination($numpages = '', $pagerange = '', $paged='') { 

    if (empty($pagerange)) { 
    $pagerange = 2; 
    } 

    /** 
    * This first part of our function is a fallback 
    * for custom pagination inside a regular loop that 
    * uses the global $paged and global $wp_query variables. 
    * 
    * It's good because we can now override default pagination 
    * in our theme, and use this function in default queries 
    * and custom queries. 
    */ 
    global $paged; 
    if (empty($paged)) { 
    $paged = 1; 
    } 
    if ($numpages == '') { 
    global $wp_query; 
    $numpages = $wp_query->max_num_pages; 
    if(!$numpages) { 
     $numpages = 1; 
    } 
    } 

    /** 
    * We construct the pagination arguments to enter into our paginate_links 
    * function. 
    */ 
    $pagination_args = array(
    'base'   => get_pagenum_link(1) . '%_%', 
    'format'   => 'page/%#%', 
    'total'   => $numpages, 
    'current'   => $paged, 
    'show_all'  => False, 
    'end_size'  => 1, 
    'mid_size'  => $pagerange, 
    'prev_next'  => True, 
    'prev_text'  => __('«'), 
    'next_text'  => __('»'), 
    'type'   => 'plain', 
    'add_args'  => false, 
    'add_fragment' => '' 
); 

    $paginate_links = paginate_links($pagination_args); 

    if ($paginate_links) { 
    echo "<nav class='custom-pagination'>"; 
     echo "<span class='page-numbers page-num'>Page " . $paged . " of " . $numpages . "</span> "; 
     echo $paginate_links; 
    echo "</nav>"; 
    } 

} 

在你的CSS將這個

.custom-pagination span, 
.custom-pagination a { 
    display: inline-block; 
    padding: 2px 10px; 
} 
.custom-pagination a { 
    background-color: #ebebeb; 
    color: #ff3c50; 
} 
.custom-pagination a:hover { 
    background-color: #ff3c50; 
    color: #fff; 
} 
.custom-pagination span.page-num { 
    margin-right: 10px; 
    padding: 0; 
} 
.custom-pagination span.dots { 
    padding: 0; 
    color: gainsboro; 
} 
.custom-pagination span.current { 
    background-color: #ff3c50; 
    color: #fff; 
} 

在get_posts（）

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 

將這個上面你的參數列表

在獲得帖子後循環底部貼這個

<?php 
     if (function_exists(custom_pagination)) { 
     custom_pagination(count($posts) ,"",$paged); 
     } 
    ?>