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
Paginatione o métodopost_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>«</span>
</a>
<a class="prev" href="https://dominio.ext/?pg=8" title="Página anterior">
<span>‹</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>›</span>
</a>
<a class="last-page" href="https://dominio.ext/?pg=14" title="Última página">
<span>»</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
.currentidentifica a página atualmente ativa. - A classe
.disabledé adicionada automaticamente quando não existem páginas anteriores ou posteriores disponíveis para navegação.