4
respostas

Paginando os imóveis

Gostaria de fazer uma melhoria na index. Como a lista é pequena, não tem problema agora em mostrar tudo o que está cadastrado, mas, se eu tiver uns 100 ou 200 imóveis, ficaria melhor fazer uma paginação nos resultados!

Como eu posso fazer isso no Wordpress?

No PHP eu consigo fazer da seguinte forma: Eu conto o total de registros e divido pela quantidade de registros que eu quero por página, com isso eu consigo fazer aquela barra no final com o número das páginas.

Na hora de filtrar, se estivermos usando MySQL, trabalho com o LIMIT para pegar os registros da página selecionada.

4 respostas

Oi Daniel, tudo bem? Apesar de você poder fazer tudo isso manualmente, não recomendo.

Existem centenas de plugin para paginação no WordPress. Recomendo fortemente que use um desses ao invés de construir tudo manualmente.

Abraço =)

Olá Wanderson!

Você tem razão. Fazer a paginação pelo Wordpress deu mais trabalho do que seria fazer pelo PHP. Poderia ter pesquisado por um plugin, mas se eu fizer desta forma eu deixo de me divertir :-)

Eu achei vários tutoriais, mas nenhum era do jeito que eu queria, então eu fiz adaptações até chegar no formato desejado.

Vou compartilhar o que eu fiz:

Na index, fiz a seguinte alteração antes de montar a lista:

//Paginacao
        $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;



        $args = array(
        'post_type' => 'imovel',
        'tax_query' => $taxQuery,
        'posts_per_page' => 3,
        'paged' => $paged
        );

No meu arquivo functions.php, fiz uma função personalizada

function paginar_resultados($query) {

      //Se tiver apenas 1 pagina de resultados, nao imprimir
    if ($query->max_num_pages < 2 ) {
        return;
    }

    $paged        = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;
    $pagenum_link = html_entity_decode( get_pagenum_link() );
    $query_args   = array();
    $url_parts    = explode( '?', $pagenum_link );

    if ( isset( $url_parts[1] ) ) {
        wp_parse_str( $url_parts[1], $query_args );
    }

    $pagenum_link = remove_query_arg( array_keys( $query_args ), $pagenum_link );
    $pagenum_link = trailingslashit( $pagenum_link ) . '%_%';

    $format  = $GLOBALS['wp_rewrite']->using_index_permalinks() && ! strpos( $pagenum_link, 'index.php' ) ? 'index.php/' : '';
    $format .= $GLOBALS['wp_rewrite']->using_permalinks() ? user_trailingslashit( 'page/%#%', 'paged' ) : '?paged=%#%';

    // Criar os links.
    $links = paginate_links( array(
        'base'     => $pagenum_link,
        'format'   => $format,
        'total'    => $query->max_num_pages,
        'current'  => $paged,
        'mid_size' => 3,
        'add_args' => array_map( 'urlencode', $query_args ),
        'prev_text' => __( '&larr; Anterior' ),
        'next_text' => __( 'Proximo &rarr;'),
        'type'      => 'list',
    ) );

    $paginador = "";
    if ( $links ) :


    $paginador .= '<nav class="navigation paging-navigation" role="navigation">';

    $paginador .= $links;
    $paginador .= '<h1 class="screen-reader-text">Pagina ' . $paged . ' de ' . $query->max_num_pages . '</h1>';
    $paginador .= '</nav>';

    endif;

    return $paginador;
}

Voltando ao index.php, inseri o comando para chamar o paginador no final da lista, passando como parâmetro a variável com o conteúdo atual da página.

<?php
if (function_exists(paginar_resultados)) {
    echo paginar_resultados($loop);
}
?>

Para finalizar, precisa estilizar. Segue um exemplo para inserir no arquivo CSS. Mantive os comentários em inglês do original já que eu não fiz nenhum ajuste


/* The containing box with a nice white background */
.paging-navigation {
    font-family: sans-serif;
    padding: 1em;
    background: #fff;
    background: hsl(0, 0%, 100%);
}

/* Remove bullets and list indentation */
.paging-navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Make the list items appear horizontally */
.paging-navigation li {
    display: inline;
}

/* Give each link and the current item some padding to make them easy to click */
a.page-numbers,
span.page-numbers {
    padding: .3em .7em;
    color: #333;
    color: hsl(0, 0%, 20%);
}

/* Link hover state */
a:hover.page-numbers {
    color: #000;
    color: hsl(0, 0%, 0%);
}

/* Current page bold and dark */
.paging-navigation .current {
    font-weight: bold;
    color: #000;
    color: hsl(0, 0%, 0%);
}

Hahaha, que bom que conseguiu! Enquanto estamos aprendendo é por passar por desafios assim, mas na produção de sites no geral, você usará mais plugins do que efetivamente criar códigos como esse.

Plugins existem com esta finalidade, para que você se preocupe com o que realmente importa. Seu código provavelmente vai ser utilizado em outros projetos, seria uma boa começar a pensar em como você poderia torna-lo independente do tema e talvez até criar um plugin. Seria um outro passo no seu desafio! =)

Nossa! Eu estava tendo muita dificuldade para paginar aqui, nenhum plugin estava funcionando. Post muito útil, Daniel, muito obrigada!