堆栈内存溢出
  简体   繁体   English

如何在 Wordpress 中将分页添加到博客页面

[英]How to add Pagination to a blog page in Wordpress

 原文  2021-01-04 03:17:53  9   2    php/ html/ wordpress/ pagination

问题描述

I need to insert a pagination to the post instead of the load more button and I don't know how how to do it.我需要在帖子中插入分页而不是加载更多按钮，我不知道该怎么做。 I require pagination of Next & Previous or numbers.我需要下一个和上一个或数字的分页。

Here's our dev work, but I don't know where to start or where I should put this example.这是我们的开发工作，但我不知道从哪里开始，也不知道应该把这个例子放在哪里。

<?php
/*
 * Template Name: Blog
 * description: >-
  Page template without sidebar
 */

get_header(); ?>

<body class=" pageHeader--gray">
    <div class="wrapper">
      <div class="content">
        <div class="pageHeader">
          <div class="container animate">
            <h1 class="pageHeader__title"><?php the_field('title'); ?>
            </h1>
          </div>
          <div class="pageHeader__background">
            <svg xmlns="http://www.w3.org/2000/svg" width="1920" viewBox="0 0 1920 126">
              <path fill="#FFF" fill-rule="evenodd" d="M9.09494702e-13,7.95807864e-13 L1920,7.95807864e-13 L1920,22.1174168 C1622.41146,91.3724723 1302.41146,126 960,126 C617.588542,126 297.588542,91.3724723 9.09494702e-13,22.1174168 L9.09494702e-13,7.95807864e-13 Z" transform="rotate(180 960 63)"></path>
            </svg>
          </div>
          <div class="pageHeader__decor animate animate--wrapper">
            <div class="pageHeader__decor-1 animate__child">
            </div>
            <div class="pageHeader__decor-2 animate__child">
            </div>
          </div>
        </div>
        <div class="blog">
          <div class="container">
            <div class="blog__tags animate">
              <?php
                $categories = get_categories( array(
                    'orderby' => 'name',
                    'order'   => 'ASC'
                ) );

                $active = "";
                if ( null == @$_GET['category_id'] ) {
                  $active = "active";
                }
                echo '<a class="blog__tag '.$active.'" href="'. site_url() .'/blog">All Categories</a>';
                foreach( $categories as $category ) {
                  $active = "";

                  if ( $category->name == @$_GET['category_id']) {
                    $active = "active";
                  }
                  echo '<a class="blog__tag '.$active.'" href="'. site_url() .'/blog?category_id='.$category->name.'">'.$category->name.'</a>';
                }
              ?>
            </div>
            <div class="blog__wrapper">
              <?php

                $args = array(
                  'posts_per_page' => 1,
                  'post__in' => get_option( 'sticky_posts' ),
                  'ignore_sticky_posts' => 1,
                  'category_name' => @$_GET['category_id']
                );
                $sticky_query = new WP_Query( $args );

                while ( $sticky_query->have_posts() ) : $sticky_query->the_post();

                ?>
                  <a class="newsCard newsCard--big animate" href="<?php the_permalink(); ?>">
                    <?php if (has_post_thumbnail( get_the_ID() ) ): ?>
                      <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' ); ?>
                      <div class="newsCard__image"><img src="<?php echo $image[0]; ?>" alt=""/></div>
                    <?php endif; ?>
                    <div class="newsCard__content">
                      <div class="newsCard__tag">
                        <?php 
                          $categories="";
                          foreach((get_the_category()) as $category){
                            $categories = $category->name.",";
                          }
                          echo substr($categories, 0, -1);
                        ?>
                      </div>
                      <div class="newsCard__title"><?php the_title(); ?>
                      </div>
                      <div class="newsCard__description"><?php the_excerpt(); ?>
                      </div>
                      <div class="newsCard__link">Learn more
                        <div class="newsCard__link-icon">
                        </div>
                      </div>
                    </div>
                  </a>
                <?php
                endwhile;

                wp_reset_postdata();
              ?>

              <?php
                $load = 0;
                $total_post =wp_count_posts()->publish;
                if (null !== @$_GET['load']){
                  $load = $_GET['load'];
                }
                $i = 6 + $load;
              ?>
              <?php 
                // the query
                $wpb_all_query = new WP_Query(array(
                  'post_type'=>'post',
                  'post_status'=>'publish',
                  'posts_per_page'=>$i,
                  'ignore_sticky_posts' => 1,
                  'category_name' => @$_GET['category_id']
                ));
                $count = $wpb_all_query->found_posts;
              ?>
             
              <?php if ( $wpb_all_query->have_posts() ) : ?>
             
                <!-- the loop -->
                <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
                  <a class="newsCard newsCard animate" href="<?php the_permalink(); ?>">
                    <?php if (has_post_thumbnail( get_the_ID() ) ): ?>
                      <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' ); ?>
                      <div class="newsCard__image"><img src="<?php echo $image[0]; ?>" alt=""/></div>
                    <?php endif; ?>
                    <div class="newsCard__content">
                      <div class="newsCard__tag">
                        <?php 
                          $categories="";
                          foreach((get_the_category()) as $category){
                            $categories = $category->name.",";
                          }
                          echo substr($categories, 0, -1);
                        ?>
                      </div>
                      <div class="newsCard__title"><?php the_title(); ?>
                      </div>
                      <div class="newsCard__description"><?php the_excerpt(); ?>
                      </div>
                      <div class="newsCard__link">Learn more
                        <div class="newsCard__link-icon">
                        </div>
                      </div>
                    </div>
                  </a>
                <?php endwhile; ?>
                <!-- end of the loop -->
             
              <?php wp_reset_postdata(); ?>
             
              <?php else : ?>
                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
              <?php endif; ?>
            </div>
            <?php if( null == @$_GET['load'] && $count > 6 ) : ?>
              <div class="blog__button animate">
                <?php 
                  if ( null == @$_GET['category_id'] ) {
                ?>
                    <a class="btn" href="<?php echo site_url(); ?>/blog?load=<?php echo $load + $total_post; ?>"><?php the_field('load_more_button_label'); ?></a>
                <?php
                  } else {
                ?>
                    <a class="btn" href="<?php echo site_url(); ?>/blog?category_id=<?php echo $_GET['category_id']; ?>&load=<?php echo $load + $total_post; ?>"><?php the_field('load_more_button_label'); ?></a>
                <?php
                  }
                ?>
              </div>
            <?php endif; ?>
          </div>
        </div>
        <div class="achievments">
          <div class="container">
            <div class="blockTitle blockTitle--center blockTitle--small">
              <h2><?php the_field('achievement_title'); ?></h2>
            </div>
            <div class="rewardsCards2 animate animate--wrapper">
              <?php 
                // the query
                $wpb_all_query = new WP_Query(array(
                  'post_type'=>'achievement_cpt',
                  'post_status'=>'publish',
                  'posts_per_page'=>-1,
                  // 'ignore_sticky_posts' => 1,
                  // 'meta_key' => 'departament',
                  // 'meta_value' => 'Information Technology and Security'
                  ));
              ?>
             

              <?php if ( $wpb_all_query->have_posts() ) : ?>
                 <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
                  <div class="rewardsCards2__item animate__child"><img src="<?php echo get_field('image', get_the_ID()); ?>" alt=""/>
                    <div class="rewardsCards2__tooltip">
                      <div class="rewardsCards2__tooltip-logo"><img src="<?php echo get_field('image', get_the_ID()); ?>" alt=""/>
                      </div>
                      <div class="rewardsCards2__tooltip-content">
                        <div class="rewardsCards2__tooltip-title"><?php echo get_field('title', get_the_ID());?>
                        </div>
                        <div class="rewardsCards2__tooltip-description"><?php echo get_field('content', get_the_ID());?> 
                        </div><a class="rewardsCards2__tooltip-link" href="<?php echo get_field('url',get_the_ID());?>">Read More</a>
                      </div>
                    </div>
                  </div>
                <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
              <?php else : ?>
                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
              <?php endif; ?>
            </div>
          </div>
        </div>
        <?php get_footer('phone'); ?>
      </div>
  </body>

<?php get_footer(); ?>

2 个解决方案

解决方案1
 0 已采纳  2021-01-08 14:46:46

So I'm not going to repeat what's already said in the article , but I hope these help you:所以我不会重复文章中已经说过的话，但我希望这些对你有帮助：

  1. Remove the $load (or $_GET['load'] ) and $i part:删除$load （或$_GET['load'] ）和$i部分：

     // Find and remove this: $load = 0; $total_post =wp_count_posts()->publish; if (null;== @$_GET['load']){ $load = $_GET['load']; } $i = 2 + $load;

  2. Add paged in the first // the query .在第一个// the query中添加paged 。 We also set a static posts_per_page , although you may make it dynamic later.我们还设置了 static posts_per_page ，尽管您可以稍后将其设为动态。

     // Find and replace this: // the query $wpb_all_query = new WP_Query(array( 'post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>$i, 'ignore_sticky_posts' => 1, 'category_name' => @$_GET['category_id'], )); $count = $wpb_all_query->found_posts; // With this one: // the query $wpb_all_query = new WP_Query(array( 'post_type'=>'post', 'post_status'=>'publish', // Set a static posts_per_page value. 'posts_per_page'=> 6, 'ignore_sticky_posts' => 1, 'category_name' => @$_GET['category_id'], // Add the "paged" arg. 'paged' => max( get_query_var( 'paged' ), 1 ), )); // The $count is not needed (anymore).

After that, find and replace this:之后，找到并替换它：

            <?php if( null == @$_GET['load'] && $count > 6 ) : ?>
              <div class="blog__button animate">
                <?php 
                  if ( null == @$_GET['category_id'] ) {
                ?>
                    <a class="btn" href="<?php echo site_url(); ?>/blog?load=<?php echo $load + $total_post; ?>"><?php the_field('load_more_button_label'); ?></a>
                <?php
                  } else {
                ?>
                    <a class="btn" href="<?php echo site_url(); ?>/blog?category_id=<?php echo $_GET['category_id']; ?>&load=<?php echo $load + $total_post; ?>"><?php the_field('load_more_button_label'); ?></a>
                <?php
                  }
                ?>
              </div>
            <?php endif; ?>

With one of the following, whichever you prefer (either simple or numerical pagination):使用以下选项之一，无论您喜欢哪种方式（简单或数字分页）：

1) Simple previous-and-next Pagination 1）简单的前后分页

Here, we are using previous_posts_link() and next_posts_link() .在这里，我们使用previous_posts_link()和next_posts_link() 。

<?php
if ( $wpb_all_query->max_num_pages > 1 ) :
    $paged = max( get_query_var( 'paged' ), 1 );
?>
    <div class="simple-pagination"><?php
        previous_posts_link( '&larr; Older Posts' );

        if ( $paged > 1 && $paged < $wpb_all_query->max_num_pages ) {
            echo ' <span class="sep">&bull;</span> ';
        }

        next_posts_link( 'Newer Posts &rarr;', $wpb_all_query->max_num_pages );
    ?></div>
<?php endif; ?>

2) Numerical Pagination 2）数字分页

Here, we are using paginate_links() — please check the function reference for more details on the parameters.在这里，我们使用paginate_links() — 请查看 function 参考以获取有关参数的更多详细信息。

<?php
$links = paginate_links( array(
    'total'     => $wpb_all_query->max_num_pages,
    'prev_text' => '&larr; Older Posts',
    'next_text' => 'Newer Posts &rarr;',
) );

if ( $links ) {
    echo "<div class='numeric-pagination'>$links</div>";
}
?>

Two important things to note:需要注意的两个重要事项：

  1. In your new WP_Query() call, the args need to have the paged arg so that WordPress knows the current page number and then retrieves only the posts for that specific page.在您的new WP_Query()调用中，args 需要具有paged arg 以便 WordPress 知道当前页码，然后仅检索该特定页面的帖子。

  2. With next_posts_link() and paginate_links() , you need to pass the $wpb_all_query->max_num_pages which is the total number of pages for your custom WordPress query ( WP_Query ).使用next_posts_link()和paginate_links() ，您需要传递$wpb_all_query->max_num_pages ，这是您的自定义WordPress 查询 ( WP_Query ) 的总页数。

That's all, and once again, I hope this answer helps and note that I used only basic HTML in my examples above, so just modify it to your liking.就是这样，再次，我希望这个答案有所帮助，并注意我在上面的示例中只使用了基本的 HTML，所以只需根据自己的喜好进行修改。

解决方案2
 0  

Paste this code in functions.php将此代码粘贴到functions.php

<?php
//Custom pagination
function the_pagination() {
if( is_singular() )
return;
global $wp_query;
/** Stop execution if there's only 1 page */
if( $wp_query->max_num_pages <= 1 )
return;
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max   = intval( $wp_query->max_num_pages );
/** Add current page to the array */
if ( $paged >= 1 )
$links[] = $paged;
/** Add the pages around the current page to the array */
if ( $paged >= 3 ) {
$links[] = $paged - 1;
$links[] = $paged - 2;
}
if ( ( $paged + 2 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}

  echo '<ul class="pagination " itemscope itemtype="http://schema.org/SiteNavigationElement/Pagination">' . "\n";
    /** Previous Post Link */
    if ( get_previous_posts_link() )
    printf( ' <li class="page-item">%s</li>
    ' . "\n", get_previous_posts_link('
    <span aria-hidden="true" class="page-link ripple">&laquo;</span>
    <span class="sr-only">Previous</span>
    ') );
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
    $class = 1 == $paged ? '  class="page-item active"' : '';
    printf( '<li%s class="page-item"><a href="%s" class="page-link ripple" itemprop="relatedLink/pagination">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
    if ( ! in_array( 2, $links ) )
    echo '<li>…</li>';
    }
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort( $links );
    foreach ( (array) $links as $link ) {
    $class = $paged == $link ? '  class="page-item active"' : '';
    printf( '<li%s class="page-item"><a href="%s" class="page-link ripple" itemprop="relatedLink/pagination">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
    }
    /** Link to last page, plus ellipses if necessary */
    if ( ! in_array( $max, $links ) ) {
    if ( ! in_array( $max - 1, $links ) )
    echo '<li>…</li>' . "\n";
    $class = $paged == $max ? '  class="page-item active"' : '';
    printf( '<li%s class="page-item"><a href="%s" class="page-link ripple" itemprop="relatedLink/pagination">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
    }
    /** Next Post Link */
    if ( get_next_posts_link() )
    printf( '<li class="page-item ">%s</li>
    ' . "\n", get_next_posts_link('<span aria-hidden="true" class="page-link ripple">&raquo;</span>
    <span class="sr-only">Next</span>') );
  echo '</ul>' . "\n";


}
?>

And use <?php the_pagination(); ?>并使用<?php the_pagination(); ?> <?php the_pagination(); ?> where you want the pagination <?php the_pagination(); ?>你想要分页的地方

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在我的Wordpress主题中，如何为博客页面添加分页？ - In my Wordpress theme, how can I add pagination for the blog page? 分页在Wordpress中的静态博客页面中不起作用 - Pagination is not working in static blog page in Wordpress 向我的自定义wordpress博客页面添加分页 - Adding a pagination to my custom wordpress blog page 我的自定义博客页面模板 Wordpress 上的分页 - Pagination on my custom blog page template Wordpress Wordpress（PHP）上的自定义博客页面-分页 - Custom blog page on Wordpress (PHP) - Pagination 如何通过分页向Wordpress页面添加自定义ID？ - How to add a custom ID to a Wordpress page with pagination? 如何在wordpress中为作者页面添加分页 - how add pagination to author page in wordpress 在自定义博客页面模板中添加分页 - Add Pagination in custom Blog page template Wordpress-如何使用空白主题将博客模板添加到页面 - Wordpress - How to add a blog template to a page using a blank theme 如何在 wordpress 的博客列表页面上添加 static 文本？ - how to add a static text on the blog list page of wordpress?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM