So Fügen Sie eine Klasse, um Prev/Next auf WordPress Paginierung? (paginate_links)

Ich meine modifizierten WordPress functions.php um zu zeigen, eine Paginierung:

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

Die Ausgabe ist nahezu perfekt:

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

Ist es ein Weg, um fügen Sie eine Klasse, um die Prev und Next Listenelement 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>
InformationsquelleAutor dash | 2016-09-27
  1. 4

    Anstatt der Funktion direkt ausgegeben, man könnte die Liste der links als array zurückgegeben. Sie können dann auf den nächsten und vorherigen links mit Ihren jeweiligen Funktionen.

    $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;
    • Diese Lösung funktioniert wie ein Charme. Ich danke Ihnen sehr.
    InformationsquelleAutor bswatson
  2. 0

    Hier ist eine javascript (jQuery) Lösung. Nicht schön, aber es funktioniert:

    JS:

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

    HTML:

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

    Nur wickeln Sie den javascript-code in <script></script> - tags und fügen Sie Sie in der Nähe nach der paginate_links()Funktion.

    • Als ich versuche zu vermeiden, JavaScript, wo es möglich ist und nicht von jQuery implementiert, diese Lösung meine Anforderungen nicht erfüllt. Vielen Dank für Ihre Antwort sowieso.
    • Sie können versuchen type: 'array' - Gibt ein array mit den nummerierten link-Liste bietet volle Steuerung der Anzeige. (Oops, diese Lösung ist in der akzeptierten Antwort nicht gesehen )
    InformationsquelleAutor Andy Tschiersch
Schreibe einen Kommentar