如何在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的）解决方案。不是很好，但它的工作原理：

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

<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>

只是包装的JavaScript代码<script></script>标签和paginate_links()功能后，附近的插入。