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）在标签上没有相同的类，您可以使用以下代码：

  jQuery(".st").each(function(){
      var s = jQuery(this).find(".st-collapse").is(":visible");
      if(s){
        jQuery(this).find(".st-heading").removeClass("wew");
      }else{
        jQuery(this).find(".st-heading").addClass("wew1");
      }
    });

通过这个你会得到这个HTML：

$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>";

或者您可以参考this链接。

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()。

Wordpress paginate_links - 如何自定义其html？

2 个答案: