Как изменить класс page-numbers в пагинации на page-link для Bootstrap

23 нояб. 2016 г., 22:10:35
Просмотры: 16.9K
Голосов: 3

Я использую следующий код (отсюда) для пагинации ссылок:

function custom_pagination() {
    global $wp_query;
    $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,
            'prev_next' => false,
            'type'  => 'array',
            'prev_next'   => TRUE,
            'prev_text'    => __('«'),
            'next_text'    => __('»'),
        ) );
        if( is_array( $pages ) ) {
            $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
            echo '<ul class="pagination">';
            foreach ( $pages as $page ) {
                    echo "<li>$page</li>";
            }
           echo '</ul>';
        }
}

Результат вызова echo custom_pagination();:

<ul class="pagination">
    <li class="page-item">
        <a class="page-numbers" href="example.com/page/1">1</a>          
    </li>
</ul>

Как я могу изменить вывод на следующий?:

<ul class="pagination">
    <li class="page-item">
        <a class="page-link" href="example.com/page/1">1</a>          
    </li>
</ul>

Я пытаюсь создать тему на Bootstrap, но не могу заменить класс page-numbers на класс Bootstrap page-link.

0
Все ответы на вопрос 6
6

Функция paginate_links(), расположенная в wp-includes/general-template.php, не позволяет настраивать определенные части HTML (например, класс page-numbers).

Простая замена строк не сработает из-за способа генерации классов, как показано в этом фрагменте кода из paginate_links():

    $page_links[] = '<a class="prev page-numbers" href="' . esc_url( apply_filters( 'paginate_links', $link ) ) . '">' . $args['prev_text'] . '</a>';
endif;
for ( $n = 1; $n <= $total; $n++ ) :
    if ( $n == $current ) :
        $page_links[] = "<span class='page-numbers current'>" . $args['before_page_number'] . number_format_i18n( $n ) . $args['after_page_number'] . "</span>";

Вот обновленная версия вашей функции custom_pagination(), которая использует DOMXpath для поиска элементов с классом page-numbers, после чего выполняется замена строк для изменения класса на page-link. Для лучшей совместимости с Bootstrap класс current также заменяется на active. В конце добавляется class="mynewclass" к элементу <li>, содержащему текущий элемент.

function wpse247219_custom_pagination() {
    global $wp_query;
    $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,
        'prev_next' => false,
        'type'  => 'array',
        'prev_next'   => true,
        'prev_text'    => __( '«', 'text-domain' ),
        'next_text'    => __( '»', 'text-domain'),
    ) );
    $output = '';

    if ( is_array( $pages ) ) {
        $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var( 'paged' );

        $output .=  '<ul class="pagination">';
        foreach ( $pages as $page ) {
            $output .= "<li>$page</li>";
        }
        $output .= '</ul>';

        // Создаем экземпляр DOMDocument 
        $dom = new \DOMDocument();

        // Загружаем $output в $dom, обрабатывая UTF-8, иначе
        // возникнут проблемы с UTF-8 символами.
        $dom->loadHTML( mb_convert_encoding( $output, 'HTML-ENTITIES', 'UTF-8' ) );

        // Создаем экземпляр DOMXpath и находим все элементы с классом 'page-numbers'
        $xpath = new \DOMXpath( $dom );

        // http://stackoverflow.com/a/26126336/3059883
        $page_numbers = $xpath->query( "//*[contains(concat(' ', normalize-space(@class), ' '), ' page-numbers ')]" );

        // Проходим по узлам $page_numbers...
        foreach ( $page_numbers as $page_numbers_item ) {

            // Добавляем class="mynewclass" к <li>, если его дочерний элемент содержит текущий элемент.
            $page_numbers_item_classes = explode( ' ', $page_numbers_item->attributes->item(0)->value );
            if ( in_array( 'current', $page_numbers_item_classes ) ) {          
                $list_item_attr_class = $dom->createAttribute( 'class' );
                $list_item_attr_class->value = 'mynewclass';
                $page_numbers_item->parentNode->appendChild( $list_item_attr_class );
            }

            // Заменяем класс 'current' на 'active'
            $page_numbers_item->attributes->item(0)->value = str_replace( 
                            'current',
                            'active',
                            $page_numbers_item->attributes->item(0)->value );

            // Заменяем класс 'page-numbers' на 'page-link'
            $page_numbers_item->attributes->item(0)->value = str_replace( 
                            'page-numbers',
                            'page-link',
                            $page_numbers_item->attributes->item(0)->value );
        }

        // Сохраняем обновленный HTML и выводим его.
        $output = $dom->saveHTML();
    }

    return $output;
}

Использование:

echo wpse247219_custom_pagination();

Сгенерированный HTML:

<ul class="pagination">
    <li class="mynewclass"><span class="page-link active">1</span></li>
    <li><a class="page-link" href="http://localhost/page/2/">2</a></li>
    <li><a class="page-link" href="http://localhost/page/3/">3</a></li>
    <li><span class="page-link dots">…</span></li>
    <li><a class="page-link" href="http://localhost/page/5/">5</a></li>
    <li><a class="next page-link" href="http://localhost/page/2/">»</a></li>
</ul>
24 нояб. 2016 г. 00:00:46
Комментарии

Этот код работает отлично, но последний вопрос: как мне изменить "$page_links[] = "<span class='page-numbers current'>' "? Я хочу заменить class='page-numbers current' на class='page-numbers active'.

Tom Tom
24 нояб. 2016 г. 05:19:34

Рад, что всё сработало! Я обновил свой ответ, заменив current на active :-)

Dave Romsey Dave Romsey
24 нояб. 2016 г. 07:31:53

Есть ли способ добавить класс только к <li>, когда я нахожусь на <span class="page-link active">1</span>? Например: <li class='mynewclass'><span class="page-link active">1</span></li>.

Tom Tom
24 нояб. 2016 г. 16:07:08

Это выполнимо. Обновил свой ответ, чтобы элемент <li>, содержащий текущий пункт, получал добавленный атрибут class="mynewclass".

Dave Romsey Dave Romsey
25 нояб. 2016 г. 04:57:16

Отлично! Теперь всё работает.

Tom Tom
25 нояб. 2016 г. 05:18:22

Есть ли у этого подхода недостатки с точки зрения скорости/производительности?

trainoasis trainoasis
22 июл. 2018 г. 12:20:13
Показать остальные 1 комментариев
0

Работа на сегодня, совместимость с WordPress 5.5.1 и Bootstrap 4:

        <?php
            $pagination = paginate_links( array(
              'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
              'format' => '?paged=%#%',
              'current' => max( 1, get_query_var('paged') ),
              'total' => $query_accueil->max_num_pages,
              'prev_text' => '<i class="fas fa-angle-double-left"></i>',
              'next_text' => '<i class="fas fa-angle-double-right"></i>',
              'type' => 'array'
            ) );
        ?>
        <?php if ( ! empty( $pagination ) ) : ?>
          <nav aria-label="Навигация по страницам">
            <ul class="pagination">
              <?php foreach ( $pagination as $key => $page_link ) : ?>
                <li class="page-item
                  <?php
                      $link = htmlspecialchars($page_link);
                      $link = str_replace( ' current', '', $link);
                      if ( strpos( $page_link, 'current' ) !== false ) { echo ' active'; }
                  ?>
                ">
                  <?php
                    if ( $link ) {
                      $link = str_replace( 'page-numbers', 'page-link', $link);
                    }
                    echo htmlspecialchars_decode($link);
                  ?>
                </li>
              <?php endforeach ?>
            </ul>
          </nav>
        <?php endif ?>
21 сент. 2020 г. 15:51:00
0

Исходя из этого анализа, похоже, что нет возможности передать класс через функцию paginate_links. Поэтому на основе функции custom_pagination вот как я бы её переписал:

function custom_pagination() {
    global $wp_query;

    // Не совсем понятно, почему эта строка изначально была внутри условия if...
    $paged = ( get_query_var('paged') ? get_query_var('paged') : 1 );

    $big = 999999999; // нужно очень большое число

    $pages = paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => $paged,
        'total' => $wp_query->max_num_pages,
        'prev_next' => false,
        'type'  => 'array',
        'prev_next'   => TRUE,
        'prev_text'    => __('«'), // Стрелка влево
        'next_text'    => __('»'), // Стрелка вправо
    ) );

    if( is_array( $pages ) ) {

        echo '<ul class="pagination">' .
                 str_replace( 'class="page-numbers"', 'class="page-link"', implode( '', $pages ) .
             '</ul>';

    }
}

Не тестировал этот код, дайте знать, если возникнут проблемы.

23 нояб. 2016 г. 22:50:40
0

В последней строке вашего кода забыта закрывающая скобка ). Вот правильная строка:

echo '<ul class="pagination">' . str_replace( 'class="page-numbers"', 'class="page-link"' ), implode( '', $pages ) . '</ul>';
23 мар. 2019 г. 14:32:11
0

Более простое решение с использованием jQuery

jQuery(document).ready(function ($) {

    $(".pagination .page-item .page-numbers").addClass("page-link");
    $(".pagination .page-item .page-link").removeClass("page-numbers");

});

Такой же подход можно использовать для других классов, таких как current и т.д.

23 мар. 2019 г. 15:34:47
0

Я знаю, что это старый вопрос, но самое простое решение, которое я нашел — это использование preg_replace:

$pages = paginate_links( array(
    ... // ваши существующие аргументы пагинации
) );

$pages = preg_replace('/page-numbers/', 'page-link', $pages);
23 дек. 2023 г. 19:23:01