Ändern der Paginierungslistenklasse


16

paginate_links()Die Funktion gibt eine ungeordnete Liste mit der Klasse "Seitenzahlen" zurück. Wie kann ich diese Klasse ändern?

BEARBEITEN

Derzeit verwende ich die unten stehende Pflaster-Methode.

$return = paginate_links( $arg );
echo str_replace( "<ul class='page-numbers'>", '<ul class="pagination">', $return );

Gibt es einen besseren Weg?


1
Ich habe ein kurzes Tutorial zu diesem Thema gefunden und was ich sehen kann, ist, dass Sie die Bootstrap-Themenklasse verwenden, damit ich denke, dass dies helfen wird! http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/
Erik Larsson

Ich habe eine PHP-Klasse erstellt, die nützlich ist, wenn Sie die Klassennamen LI und A html tags festlegen müssen. gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f
Pixeline

@ErikLarsson Link ist kaputt.
MastaBaba

Antworten:


11

paginate_links()bietet keinen Parameter an und es gibt keine Hooks - siehe Quelle -, um die Klasse (n) zu ändern. Das heißt, Sie können es so tun, wie Sie es getan haben, oder Sie erstellen Ihre eigene Paginierungsfunktion basierend auf paginate_links().


14

Ich suchte auch nach der gleichen Lösung, um sie mit Bootstrap-Paginierungslinks zu verwenden.

Der folgende Code funktioniert zu 100% in meinem Theme.

function bittersweet_pagination() {

global $wp_query;

if ( $wp_query->max_num_pages <= 1 ) return; 

$big = 999999999; // need an unlikely integer

$pages = paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $wp_query->max_num_pages,
        'type'  => 'array',
    ) );
    if( is_array( $pages ) ) {
        $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
        echo '<div class="pagination-wrap"><ul class="pagination">';
        foreach ( $pages as $page ) {
                echo "<li>$page</li>";
        }
       echo '</ul></div>';
        }
}

benutze die Funktion um zB index.php aufzurufen; <?php bittersweet_pagination(); ?>oder eine andere Datei. Ich habe auch ein Bootstrap-Styling überschrieben, das Ihnen vielleicht hilft.

.pagination-wrap {
    clear: both;
    display: block;
    overflow: hidden;
    text-align: center;
}
.pagination-wrap .pagination {
    margin-bottom: 0;
    margin-top: 0;
}
.pagination-wrap .pagination > li:first-child > a, 
.pagination-wrap .pagination > li:first-child > span {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
.pagination-wrap .pagination > li:last-child > a, 
.pagination-wrap .pagination > li:last-child > span {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.pagination-wrap .pagination > li > a,
.pagination-wrap .pagination > li > span {
    background-color: #4FBEBA;
    border: 1px solid #1BA5A0;
    padding: 10px 15px;
    font-weight: bold;
    color: #FFFFFF;
}
.pagination-wrap .pagination > li > a:hover, 
.pagination-wrap .pagination > li > span:hover, 
.pagination-wrap .pagination > li > a:focus, 
.pagination-wrap .pagination > li > span:focus {
    background-color: #1BA5A0;
    border-color: #189690;
}
.pagination-wrap .pagination .current {
    background-color: #1BA5A0;
    border-color: #189690;
}
.pagination-wrap .pagination .current:hover,
.pagination-wrap .pagination .current span:hover {
    background-color: #189690;
    border-color: #148781;
}

1
Sie können die Leistung etwas verbessern, da diese Abfrage jedes Mal aufgerufen wird, wenn eine Seite generiert wird, auch wenn keine Paginierung erforderlich ist. add: `` `if ($ wp_query-> max_num_pages <= 1) return; `` `nach Ihrer globalen $ wp_query am Anfang der Funktion.
Pixeline

4

Dafür müssen Sie den Parameter type verwenden

$links = paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $posts_array->max_num_pages,
    'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
    'next_text'          => __( 'Next page', 'twentyfifteen' ),
    'type' => 'list'
) );
   echo $links

0

Eine andere Option, die hier nicht erwähnt wird, ist das Kopieren der Stile in die WordPress-Paginierungsklassen, anstatt die dem Element zugewiesene Klasse zu ändern.

Wenn Sie Bootstrap verwenden und alles mit sass bündeln, können Sie die Stile einfach mit der @extendDirektive anwenden .

ul.page-numbers {
    @extend .pagination;
    > li {
        > a, > span {
            &.page-numbers {
                @extend .page-link
                &:focus, :hover {
                    /* Additional hover/focus styles here */
                }
            }
        }
    }
}

Dies mag für einige Situationen relevant sein, aber ich bin der Meinung, dass der Code in der ursprünglichen Frage die beste Lösung für die meisten Anwendungen ist.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.