如何在Wordpress分页上添加上一个/下一个类？ （paginate_links）

Question

我修改了我的Wordpress functions.php以显示分页：

<?php echo paginate_links( array(
    'prev_text'          => __('Previous Page'),
    'next_text'          => __('Next Page'),
    'type'               => 'list'
) ); ?>

输出几近完美：

<ul class="page-numbers">
    <li>
        <span class="page-numbers current">1</span>
    </li>
    <li>
        <a class="page-numbers" href="https://domain.tld/page/2/">2</a>
    </li>
    …
    <li>
        <a class="page-numbers" href="https://domain.tld/page/10/">10</a>
    </li>
    <li>
        <a class="next page-numbers" href="https://domain.tld/page/2/">Next Page</a>
    </li>
</ul>

有没有办法在Prev和Next列表项li中添加一个类？

    <li class="prev-list-item">
        <a class="prev page-numbers" href="http://domain.tld/page/1/">Previous Page</a>
    </li>

＆安培;

    <li class="next-list-item">
        <a class="next page-numbers" href="http://domain.tld/page/2/">Next Page</a>
    </li>

Answer 1

您可以将链接列表作为数组返回，而不是直接输出函数。然后，您可以使用各自的功能来定位下一个和上一个链接。

$links = paginate_links( array(
  'prev_next'          => false,
  'type'               => 'array'
) );

if ( $links ) :

    echo '<ul class="page-numbers">';

    // get_previous_posts_link will return a string or void if no link is set.
    if ( $prev_posts_link = get_previous_posts_link( __( 'Previous Page' ) ) ) :
        echo '<li class="prev-list-item">';
        echo $prev_posts_link;
        echo '</li>';
    endif;

    echo '<li>';
    echo join( '</li><li>', $links );
    echo '</li>';

    // get_next_posts_link will return a string or void if no link is set.
    if ( $next_posts_link = get_next_posts_link( __( 'Next Page' ) ) ) :
        echo '<li class="next-list-item">';
        echo $next_posts_link;
        echo '</li>';
    endif;
    echo '</ul>';
endif;

Answer 2

这是一个javascript（jQuery）解决方案。不好，但它有效：

＆＃13;

＆＃13;

(function ( $ ) {
 
  $('ul.page-numbers li a').each(function() {
    var $this = $(this);
    if ( $this.hasClass('prev') ) $this.parent('li').addClass('prev-list-item');
    if ( $this.hasClass('next') ) $this.parent('li').addClass('next-list-item');      
  });
 
}( jQuery ));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="page-numbers">
    <li>
        <span class="page-numbers current">1</span>
    </li>
    <li>
        <a class="page-numbers" href="https://domain.tld/page/2/">2</a>
    </li>
    …
    <li>
        <a class="page-numbers" href="https://domain.tld/page/10/">10</a>
    </li>
    <li>
        <a class="next page-numbers" href="https://domain.tld/page/2/">Next Page</a>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

将javascript代码包装在<script></script>标记中，然后在paginate_links()函数后将其插入附近。