Изменение класса списка пагинации

11 дек. 2013 г., 10:41:13
Просмотры: 64.6K
Голосов: 21

Функция paginate_links() возвращает неупорядоченный список с классом "page-numbers". Как можно изменить этот класс?

РЕДАКТИРОВАТЬ

В настоящее время я использую следующий временный метод.

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

Есть ли способ лучше?

3
Комментарии

Я нашел краткое руководство по этому поводу, и, судя по всему, вы используете класс темы bootstrap, так что думаю, это поможет! http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/

Erik Larsson Erik Larsson
4 мар. 2014 г. 23:06:40

@ErikLarsson Ссылка не работает.

MastaBaba MastaBaba
16 сент. 2017 г. 02:39:21

Я создал PHP-класс, который может быть полезен, когда вам нужно задать имена классов для HTML-тегов LI и A. https://gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f

pixeline pixeline
9 дек. 2016 г. 01:12:39
Все ответы на вопрос 4
1
18

Я также искал такое же решение для использования с Bootstrap-пагинацией,

приведенный ниже код работает на 100% в моей теме.

function bittersweet_pagination() {

global $wp_query;

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

$big = 999999999; // нужно маловероятное целое число

$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>';
        }
}

используйте функцию для вызова в index.php, например: <?php bittersweet_pagination(); ?> или в любом другом файле. Я также переопределил некоторые стили Bootstrap, возможно, это вам поможет.

.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;
}
24 июн. 2014 г. 19:27:43
Комментарии

Вы можете немного улучшить производительность, поскольку этот запрос будет выполняться каждый раз при генерации страницы, даже когда пагинация не требуется. Добавьте: if ( $wp_query->max_num_pages <= 1 ) return; после вашего global $wp_query в начале функции.

pixeline pixeline
8 дек. 2016 г. 22:59:45
0
12

paginate_links() не предоставляет параметра и нет хуков - см. исходный код - для изменения классов. Это означает, что вы можете сделать так, как вы уже сделали, или создать свою собственную функцию пагинации на основе paginate_links().

11 дек. 2013 г. 12:01:06
0

Еще один вариант, не упомянутый здесь, — это копирование стилей в классы пагинации WordPress вместо изменения класса, назначенного элементу.

Если вы используете Bootstrap и собираете все с помощью Sass, то вы можете легко применить стили с помощью директивы @extend.

ul.page-numbers {
    @extend .pagination;
    > li {
        > a, > span {
            &.page-numbers {
                @extend .page-link
                &:focus, :hover {
                    /* Дополнительные стили для hover/focus здесь */
                }
            }
        }
    }
}

Это может быть актуально в некоторых ситуациях, но я считаю, что код из исходного вопроса является лучшим решением для большинства случаев.

15 янв. 2019 г. 07:43:09
0

Если вы хотите просто заменить строки для перехода в обещанную землю Bootstrap, вот что может вам помочь.

function bootstrap_pagination()
{
    global $wp_query;
    $big = 999999999;
    $listString = paginate_links(array(
        'base' => str_replace($big, '%#%', get_pagenum_link($big)),
        'format' => '?paged=%#%',
        'current' => max(1, get_query_var('paged')),
        'total' => $wp_query->max_num_pages,
        'prev_text'    => __('← Назад'),
        'next_text'    => __('Вперёд →'),
        'type'  => 'list',

    ));
    
    $listString = str_replace("<ul class='page-numbers'>", '<ul class="pagination">', $listString);
    $listString = str_replace('page-numbers', 'page-link', $listString);
    $listString = str_replace('<li>', '<li class="page-item">', $listString);
    $listString = str_replace(
        '<li class="page-item"><span aria-current="page" class="page-link current">',
        '<li class="page-item active"><span aria-current="page" class="page-link">',
        $listString
    );


    echo $listString;

}
26 янв. 2023 г. 00:00:46