Вопрос или проблема
Я хочу изменить вывод wp_link_pages.
Основное, что мне нужно, это показать кнопки “Предыдущая” и “Следующая” и текущую страницу/общее число страниц. Я создал кнопки “Предыдущая” и “Следующая”. Теперь между ними я хочу добавить текущую страницу и общее количество страниц.
Вот мой код
wp_link_pages( array(
'before' => '<div class="page-links">' . __(''),
'after' => '</div>',
'next_or_number' => 'next',
'nextpagelink' => __('Следующая'),
'previouspagelink' => __('Предыдущая'),
'pagelink' => '%',
'echo' => 1,
) );
Я не уверен, что делать. Эффект, который я хочу получить, как на изображении ниже.
Вы используете неправильную функцию, пожалуйста, проверьте эту ссылку https://codex.wordpress.org/Function_Reference/paginate_links
Как вы можете видеть, ваш код должен быть следующим
global $wp_query;
$big = 999999999; // нужно маловероятное целое число
echo 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,
'next_text' => '<i class="fa fa-angle-right"></i>',
'prev_text' => '<i class="fa fa-angle-left"></i>'
) );
если вы используете пользовательский запрос с WP_Query() ваш код должен быть похожим на:
$query_post = new WP_Query(array(
...
'paged' => get_query_var('paged'),
...
));
$big = 999999999; // нужно маловероятное целое число
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $query_post->max_num_pages,
'next_text' => '<i class="fa fa-angle-right"></i>',
'prev_text' => '<i class="fa fa-angle-left"></i>'
) );
+1 за ответ Артуро (у меня недостаточно репутации, чтобы голосовать). Я просто использовал его решение в проекте.
Вот некоторые правила стилей, чтобы немного улучшить это. Это было с Elementor на Twenty-Twenty, так что ваш опыт может отличаться. Обратите внимание, что я добавил div с названием класса custom-pagination-container вокруг div pagination.
<style>
.custom-pagination-container {
display: flex;
}
.pagination {
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
order: 1;
font-size: 15px;
}
.pagination a,
.pagination .current {
margin: 0;
}
.pagination a:hover {
background: none;
}
.pagination .next,
.pagination a,
.pagination .prev,
.pagination span {
display: inline-block;
float: none;
}
.pagination .dots {
vertical-align: sub;
margin-bottom: 0;
}
Ответ или решение
Как отобразить кнопки "Предыдущая", "Следующая" и номера страниц с помощью функции wp_link_pages
В WordPress для навигации по страницам постов, которые разбиты на несколько страниц, можно использовать функцию wp_link_pages, однако для отображения кнопок "Предыдущая" и "Следующая", а также номера текущей страницы и общего количества страниц, лучше использовать функцию paginate_links.
В данной статье мы рассмотрим, как правильно реализовать данную функциональность, чтобы ваши пользователи могли легко перемещаться между страницами.
Шаг 1: Использование функции paginate_links
Вместо wp_link_pages, для достижения вашей цели, вы можете использовать следующий код:
global $wp_query;
$big = 999999999; // Необходимое нечетное число
echo 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,
'next_text' => '<i class="fa fa-angle-right"></i>',
'prev_text' => '<i class="fa fa-angle-left"></i>'
) );Если вы используете пользовательский запрос с помощью WP_Query, ваш код будет выглядеть следующим образом:
$query_post = new WP_Query(array(
// Ваши параметры запроса,
'paged' => get_query_var('paged'),
));
$big = 999999999; // Необходимое нечетное число
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $query_post->max_num_pages,
'next_text' => '<i class="fa fa-angle-right"></i>',
'prev_text' => '<i class="fa fa-angle-left"></i>'
) );Шаг 2: Добавление информации о текущей странице и количестве страниц
Чтобы включить текущую страницу и общее количество страниц между кнопками "Предыдущая" и "Следующая", необходимо немного модифицировать код. Вам нужно использовать sprintf для форматирования строки вывода:
global $wp_query;
$current_page = max(1, get_query_var('paged'));
$total_pages = $wp_query->max_num_pages;
echo '<div class="custom-pagination-container">';
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => $current_page,
'total' => $total_pages,
'next_text' => '<i class="fa fa-angle-right"></i>',
'prev_text' => '<i class="fa fa-angle-left"></i>',
) );
echo sprintf(__('Страница %s из %s'), $current_page, $total_pages);
echo '</div>';Шаг 3: Стилизация ссылок и кнопок
Для лучшего восприятия вашего пользовательского интерфейса, вы можете добавить некоторые CSS-стили. Ниже приведён пример правил стилей, которые вы можете использовать:
.custom-pagination-container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
}
.pagination {
display: flex;
justify-content: center;
font-size: 15px;
}
.pagination a,
.pagination .current {
margin: 0 5px;
}
.pagination a:hover {
background-color: #f2f2f2;
}
.pagination .next,
.pagination a,
.pagination .prev,
.pagination span {
display: inline-block;
}Заключение
Следуя данным инструкциям, вы сможете создать функциональную навигацию с кнопками "Следующая" и "Предыдущая", а также отображение номера текущей страницы и общего количества страниц. Это значительно улучшит пользовательский опыт на вашем сайте WordPress. Не забывайте адаптировать стили под ваш дизайн и тестировать навигацию на различных устройствах для обеспечения правильного отображения.