Как скрыть пустую кнопку пагинации, когда нет предыдущей страницы

Содержание

Вопрос или проблема
Ответ или решение
Шаги по исправлению кода:
Заключение:

Вопрос или проблема

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

Я пытался нацелиться на это с помощью JS, экспериментировал с функцией в functions.php и несколькими другими вещами безрезультатно.

Вот мой код на странице functions.php

function pagination_nav() {
    global $wp_query;

    if ( $wp_query->max_num_pages > 1) { ?>
        <nav class="pagination" role="navigation">
            <div id="prv" class="button pag-btn nav-next"><?php previous_posts_link( 'Предыдущая' ); ?></div>
            <div id="nxt" class="button pag-btn nav-previous"><?php next_posts_link( 'Следующая' ); ?></div>
        </nav>
<?php }
}

Вот код, вызывающий функцию на моей шаблонной странице

    <div class="pag-container">
        <?php pagination_nav(); ?>
    </div>

Вот мой scss

.pag-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;

    .pagination{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 64%;

        .pag-btn{
            width: 25%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image:linear-gradient(to bottom, $dark-green, $light-green);
            margin: 0rem 1rem;
        }

        a{
            color: white;
            font-size: 1.3rem;
        }
    }
}

И для большей уверенности вот JS, который я пробовал

const prvBtn = document.getElementById('prv').innerHTML;
const nxtBtn = document.getElementById('nxt').innerHTML;

function hidePagBttns() {
    if (prvBtn === '') {
        prvBtn.style.display = 'none';
    } else {
        if (nxtBtn === '') {
            nxtBtn.style.display = 'none';
        }
    }
}

     <nav class="pagination" role="navigation">
        <?php if( get_previous_posts_link() ) { ?>
        <div id="prv" class="button pag-btn nav-next"><?php previous_posts_link( 'Предыдущая' ); ?></div>
        <?php } 
        if( get_next_posts_link() ) { ?>
        <div id="nxt" class="button pag-btn nav-previous"><?php next_posts_link( 'Следующая' ); ?></div>
        <?php } ?>
    </nav>

https://developer.wordpress.org/reference/functions/previous_posts_link/
https://developer.wordpress.org/reference/functions/get_previous_posts_link/

Ответ или решение

Чтобы скрыть пустую кнопку пагинации в случае отсутствия предыдущей или следующей страницы, вам необходимо внести небольшие изменения в код вашей функции pagination_nav в файле functions.php. Вместо того чтобы выводить кнопки вне зависимости от наличия текста, вы можете использовать условные проверки для отображения кнопок только в случае наличия соответствующих ссылок.

Шаги по исправлению кода:

Использование условных операторов в функции пагинации:
Скорректируйте вашу функцию pagination_nav, чтобы она проверяла наличие предыдущей и следующей ссылки перед их выводом. Это предотвратит создание пустых кнопок.

Вот измененный вариант вашего кода:
```
function pagination_nav() {
   global $wp_query;

   // Проверяем, есть ли больше одной страницы
   if ($wp_query->max_num_pages > 1) { ?>
       <nav class="pagination" role="navigation">
           <?php if (get_previous_posts_link()) { ?>
               <div id="prv" class="button pag-btn nav-next">
                   <?php previous_posts_link('Previous'); ?>
               </div>
           <?php } ?>
           <?php if (get_next_posts_link()) { ?>
               <div id="nxt" class="button pag-btn nav-previous">
                   <?php next_posts_link('Next'); ?>
               </div>
           <?php } ?>
       </nav>
   <?php }
}
```
В этом коде мы используем функцию get_previous_posts_link() и get_next_posts_link() для проверки существования ссылок, прежде чем генерировать соответствующие блоки.
Удаление ненужного JavaScript кода:
Поскольку мы теперь управляем отображением кнопок непосредственно через PHP, JavaScript уже не нужен. Вы можете удалить любой JS-код, который вы использовали для проверки наличия текста в кнопках, так как это теперь обработано на уровне сервера.
Проверка стилей SCSS:
Убедитесь, что ваши стили SCSS по-прежнему применяются. Поскольку кнопки не будут отображаться, если нет соответствующих ссылок, убедитесь, что они не создают пробелы в разметке. Ваши текущие стили выглядят хорошо, и в этом случае ничего менять не нужно.

Заключение:

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

Если у вас возникнут дополнительные вопросы или потребуется дальнейшая помощь, не стесняйтесь обращаться!