Как изменить класс page-numbers в пагинации на page-link для Bootstrap
Я использую следующий код (отсюда) для пагинации ссылок:
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
.

Функция 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>

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

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

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

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

Работа на сегодня, совместимость с 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 ?>

Исходя из этого анализа, похоже, что нет возможности передать класс через функцию 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>';
}
}
Не тестировал этот код, дайте знать, если возникнут проблемы.

Более простое решение с использованием jQuery
jQuery(document).ready(function ($) {
$(".pagination .page-item .page-numbers").addClass("page-link");
$(".pagination .page-item .page-link").removeClass("page-numbers");
});
Такой же подход можно использовать для других классов, таких как current
и т.д.

Я знаю, что это старый вопрос, но самое простое решение, которое я нашел — это использование preg_replace
:
$pages = paginate_links( array(
... // ваши существующие аргументы пагинации
) );
$pages = preg_replace('/page-numbers/', 'page-link', $pages);
