Как заставить the_posts_pagination выглядеть как мой шаблон?

Во-первых, я попытался создать пользовательскую пагинацию, но не смог разобраться с частью .. и удалением последних чисел, поэтому решил использовать стандартную пагинацию WordPress. Но сейчас я застрял, не зная, что делать? Это то, что я написал в своей функции, выглядит довольно просто.

function pagination(){
    the_posts_pagination( array(
    'mid_size' => 2,
    'prev_text' => __( 'Previous', 'homekong' ),
    'next_text' => __( 'Next', 'homekong' ),
) );    
}

Это создало другой вид пагинации, чем мне нужно. Это то, что мне на самом деле нужно

<div class="paginations">
    <nav class="page-navigation ">
        <ul class="pagination">
            <li class="page-item"><span aria-current="page" class="page-numbers page-link prev ">ПРЕДЫДУЩИЙ</span></li>
            <li class="page-item"><a class="page-numbers page-link current" href="#">1</a></li>
            <li class="page-item"><a class="page-numbers page-link" href="#">2</a></li>
            <li class="page-item"><a class="next page-numbers page-link" href="#">ДАЛЕЕ</a></li>
        </ul>
    </nav>
</div>

Я пытался исследовать и много искать, но не могу понять, как я могу изменить свою стандартную пагинацию на это. Пожалуйста, помогите мне

function pagination_bar($posts_per_page) {
$published_posts = wp_count_posts()->publish;
$total_pages = ceil($published_posts / $posts_per_page); 
if ($total_pages > 1){
    $current_page = max(1, get_query_var('paged')); 
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => '?paged=%#%',
        'current' => $current_page,
        'total' => $total_pages,
    ));
 } }

Разместите приведенный выше код в function.php .

<?php pagination_bar($post_details['posts_per_page']); ?>

Вышеуказанный вызов функции – это то место, где вам нужно отобразить пагинацию.

Затем, используя wp_query, получите все сообщения, как в примере

<?php           
       if ( get_query_var('paged') ) $paged = get_query_var('paged');
       if ( get_query_var('page') ) $paged = get_query_var('page');
       $post_details = array('post_type'=> 'post','paged'=>$paged,'numberposts' => -1,'posts_per_page' => 2);
       $custom_query = new WP_Query( $post_details );
    ?>

Чтобы сделать the_posts_pagination в WordPress похожей на ваш шаблон, вам нужно будет применить пользовательские стили CSS к ссылкам и элементам пагинации. Вот пошаговое руководство, как этого достичь:

1. Проверьте элемент пагинации: Сначала вы должны определить CSS классы и HTML структуру элемента пагинации, который вы хотите стилизовать. Вы можете сделать это, щелкнув правой кнопкой мыши на пагинации и выбрав “Просмотреть код” в вашем веб-браузере. Это откроет инструменты разработчика браузера, где вы можете изучить HTML структуру и CSS классы.

2. Добавьте пользовательский CSS:

   • Перейдите в панель управления WordPress.
   • Перейдите в “Внешний вид” > “Настроить.”
   • В зависимости от вашей темы WordPress, вы можете увидеть опцию “Дополнительный CSS” или “Пользовательский CSS”. Нажмите на нее.

3. Напишите пользовательский CSS: Напишите пользовательские правила CSS для стилизации элементов пагинации в соответствии с дизайном вашего шаблона. Например, вы можете изменить шрифт, цвета, отступы, поля и границы, чтобы они соответствовали вашему шаблону. Вот пример того, как вы можете стилизовать ссылки пагинации:

/* Измените стили ссылок */
.pagination a {
    color: #000; /* Ваш желаемый цвет текста */
    background-color: #f0f0f0; /* Ваш желаемый цвет фона */
    padding: 5px 10px; /* Регулируйте отступы по мере необходимости */
    border-radius: 5px; /* Добавьте округлые углы */
    margin: 5px; /* Регулируйте поля по мере необходимости */
}

/* Стилизуйте ссылку текущей страницы по-другому */
.pagination .current {
    font-weight: bold;
    background-color: #333; /* Ваш желаемый цвет фона для текущей страницы */
    color: #fff; /* Ваш желаемый цвет текста для текущей страницы */
}

/* Стилизуйте навигационные стрелки, если ваша пагинация их включает */
.pagination .next,
.pagination .prev {
    /* Ваши стили для ссылок Далее и Назад */
}

4. Предварительный просмотр и сохранение: По мере написания пользовательского CSS используйте функцию предварительного просмотра в реальном времени, чтобы увидеть, как ваши изменения влияют на пагинацию. Как только вы будете довольны внешним видом, нажмите кнопку “Опубликовать” или “Сохранить”, чтобы применить изменения.

5. Проверьте адаптивность: Убедитесь, что ваши пользовательские стили хорошо работают на разных размерах экранов и устройствах. Используйте медиазапросы для корректировки стилей при необходимости.

6. Очистите кэш: Если ваши изменения не сразу видны на фронтальной части, очистите любые плагины кэширования или серверное кэширование, которые вы могли включить.

Имейте в виду, что конкретные CSS классы и HTML структура элементов пагинации могут варьироваться в зависимости от вашей темы WordPress. Обязательно проверьте HTML пагинации вашей темы, чтобы точно нацелиться на элементы, которые вы хотите стилизовать.