Wordpress paginate_links - 如何自定義其 html？

Question

使用以下 WP 代碼：

echo paginate_links(array(
    'base' => get_pagenum_link(1) . '%_%',
    'format' => '/page/%#%',
    'current' => $current_page,
    'total' => $total_pages,
    'prev_text'    => __('«'),
    'next_text'    => __('»'),
));

我會得到這個 HTML：

<span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://xxx/page/2'>2</a>
<a class='page-numbers' href='http://xxxx/page/3'>3</a>
<a class="next page-numbers" href="http://xxx/page/2">»</a>

但是我如何自定義它以便我可以獲得：

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

有任何想法嗎？

Answer 1

如果你想要簡單的無序列表（ul）標簽與導航（nav）沒有相同的標簽類，你可以使用下面的代碼：

$pagination = paginate_links(array(
                    'base' => get_pagenum_link(1) . '%_%',
                    'format' => '/page/%#%',
                    'current' => $current_page,
                    'total' => $total_pages,
                    'prev_text'    => __('«'),
                    'next_text'    => __('»'),
                    'type' => 'list'
                ));
echo "<nav>".$pagination."</nav>";

通過這個你會得到這個 HTML：

<nav>
        <ul class="page-numbers">
                <li><span class="page-numbers current">1</span></li>
                <li><a class="page-numbers" href="http://xxx/page/2">2</a></li>
                <li><a class="page-numbers" href="http://xxx/page/3">3</a></li>
                <li><a class="next page-numbers" href="http://xxx/page/2">»</a></li>
        </ul>
</nav>

或者你可以參考這個鏈接。

Answer 2

盡管此方法不能僅通過傳遞參數來工作，但可以進行調整以符合您的要求。

在你的functions.php

 function yourtheme_paging_nav() { 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 '<div><ul class="your-class">' . "\\n"; /** Previous Post Link */ if ( get_previous_posts_link() ) printf( '<li><a href="%s"><spanclass"prev-class"></span></a></li>' . "\\n", get_previous_posts_page_link() ); /** Link to first page, plus ellipses if necessary */ if ( ! in_array( 1, $links ) ) { $class = 1 == $paged ? ' class="active"' : ''; printf( '<li%s><a href="%s">%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="active"' : ''; printf( '<li%s><a href="%s">%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="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\\n", $class, esc_url( get_pagenum_link( $max ) ), $max ); } /** Next Post Link */ if ( get_next_posts_link() ) printf( '<li><a href="%s"><span class="next-class"></span></a></li>' . "\\n", get_next_posts_page_link() ); echo '</ul></div>' . "\\n"; }

現在您可以簡單地調用news_paging_nav()來顯示分頁鏈接。

Answer 3

我正在使用新的Bootstrap V5 ，我正在使用這個函數來呈現分頁部分：

/**
 *
 * Shows the pagination numbers of the blog posts
 *
 */

function mb_render_posts_pagination($pages = '', $range = 2)
{
  global $wp_query;
  global $paged;

  $showitems = ($range * 2) + 1;
  if (empty($paged)) {
    $paged = 1;
  }

  $pages = $wp_query->max_num_pages;
  if ($pages == '' || !$pages) {
    $pages = 1;
  }

  // Show the pagination section if we have more than one page
  if (1 != $pages) {
    echo '<nav aria-label="..."><ul class="pagination">';

    if ($paged > 2 && $paged > $range + 1 && $showitems < $pages) {
      echo "<li><a href='" . get_pagenum_link(1) . "'>&laquo;</a></li>";
    }

    if ($paged > 1 && $showitems < $pages) {
      echo "<li><a href='" . get_pagenum_link($paged - 1) . "'>&lsaquo;</a></li>";
    }

    for ($i = 1; $i <= $pages; $i++) {
      if (1 != $pages && (!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems)) {
        echo ($paged == $i) ? "<li class='page-item active' aria-current='page'><span class='page-link'>" . $i . "</span></li>" : "<li class='page-item'><a class='page-link' href='" . get_pagenum_link($i) . "'>" . $i . "</a></li>";
      }
    }

    if ($paged < $pages && $showitems < $pages) {
      echo "<li><a href='" . get_pagenum_link($paged + 1) . "'>&rsaquo;</a></li>";
    }

    if ($paged < $pages - 1 && $paged + $range - 1 < $pages && $showitems < $pages) {
      echo "<li><a href='" . get_pagenum_link($pages) . "'>&raquo;</a></li>";
    }

    echo "</ul></nav>";
  }
}