Pular para o conteúdo principal

post_paginator()

Exibe a navegação de páginas para listagens de postagens.

Parâmetros: Nenhum.

Retorno: void
Imprime diretamente a estrutura HTML da paginação.

Exemplo de uso:

<?php endwhile; ?>

<?php posts_paginator() ?>

Notas:

  • A função utiliza internamente a classe Pagination e o método post_paginator().
  • A paginação utiliza o parâmetro $_GET['pg'] para identificar a página atual.
  • A estrutura HTML contém classes CSS prontas para estilização da navegação.

Estrutura HTML

A função gera uma estrutura HTML semelhante ao exemplo abaixo:

<nav id="pagination">
    <div class="total-page">9 / 14</div>

    <a class="first-page" href="https://dominio.ext/" title="Primeira página">
        <span>&laquo;</span>
    </a>

    <a class="prev" href="https://dominio.ext/?pg=8" title="Página anterior">
        <span>&lsaquo;</span>
    </a>

    <div class="numeric-pagination">
        <a href="https://dominio.ext/?pg=7"><span>7</span></a>

        <a href="https://dominio.ext/?pg=8"><span>8</span></a>

        <a class="current" href="https://dominio.ext/?pg=9" title="Página atual" onclick="return false;">
            <span>9</span>
        </a>

        <a href="https://dominio.ext/?pg=10"><span>10</span></a>

        <a href="https://dominio.ext/?pg=11"><span>11</span></a>
    </div>

    <a class="next" href="https://dominio.ext/?pg=10" title="Próxima página">
        <span>&rsaquo;</span>
    </a>

    <a class="last-page" href="https://dominio.ext/?pg=14" title="Última página">
        <span>&raquo;</span>
    </a>
</nav>

CSS básico

Exemplo simples de estilização:

#pagination {
    text-align: center;
    margin: 15px auto 0;
}
.total-page {
    margin-bottom: 12px;
}
.numeric-pagination {
    display: inline-block;
    margin: 0 13px;
}
#pagination a {
    display: inline-block;
    text-decoration: none;
}
#pagination a span {
    display: flex;
    width: 33px;
    height: 33px;
    margin: 0 2px;
    align-items: center;
    justify-content: center;
}

Observações:

  • A classe .current identifica a página atualmente ativa.
  • A classe .disabled é adicionada automaticamente quando não existem páginas anteriores ou posteriores disponíveis para navegação.