Tableless - Desenvolvimento inteligente com Padrões Web

28/04/2008
Na Prática

O LOOP do WordPress

O WordPress tem vários segredos… um dos segredos mais interessantes é o Loop. O Loop é usado no WordPress para mostrar os posts e páginas do site. O WordPress procura pelas páginas ou posts publicados no sistema e exibe seu …

Por

O WordPress tem vários segredos… um dos segredos mais interessantes é o Loop.

O Loop é usado no WordPress para mostrar os posts e páginas do site. O WordPress procura pelas páginas ou posts publicados no sistema e exibe seu conteúdo na página de acordo com os critérios que especificamos com as Template Tags. Qualquer código HTML ou PHP colocado no Loop será repetido em cada um dos posts exibidos.

O loop deve ser colocado no index.php e em qualquer outro arquivo do template que é utilizado para exibir informações de páginas ou posts.

1
2
3
<php while (have_posts()) : the_post(); ?>
   <!-- Template Tags e conteúdo -->
<php endwhile; ?>

Os passos são os seguintes:

  1. Primeiro o have_posts() checa se há posts para serem exibidos.
  2. Se houverem posts, o Loop começa. Enquanto o loop continuar a executar, tudo o que você colocar dentro dele será repetido para cada um dos posts exibidos. Por exemplo: links de comentários, data, autor, e etc.
  3. Se não houverem mais posts, a função have_posts() retorna false e então o loop pára de ser executado.

Dentro deste while vai sua estrutura com as Template Tags. Fica mais ou menos assim:

1
2
3
<php while (have_posts()) : the_post(); ?>
    <?php the_content(); ?>
<?php endwhile; ?>

A Template Tag the_content() exibe o conteúdo do post. Vamos rechear mais este código:

1
2
3
4
5
6
<php while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div id="texto">
        <?php the_content(); ?>
    </div>
<?php endwhile; ?>

Agora o conteúdo fica dentro de um div específico chamado #texto. E o Título do post foi colocado dentro de uma tag apropriada, H1.

Dentro deste loop você coloca tudo quanto é objeto que você queira que se repita em cada um dos posts que forem exibidos. Normalmente: data, autor, número de comentários, links para feeds ou qualquer outro elemento normal em blogs.

1
2
3
4
5
6
7
<php while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div id="texto">
        <?php the_content(); ?>
       <small><?php the_time('F jS, Y') ?> por <?php the_author() ?> </small>
    </div>
<?php endwhile; ?>

Esse código puxa do banco: título do post, o conteúdo do post, o dia que foi publicado e o nome do autor. Recheando com mais códigos para inserir uma sidebar, cabeçalho e rodapé, já começamos a montar a estrutura de um site de verdade. Mesmo assim, o principal da informação do site, foi feito nestas poucas linhas.

Se quiser, pegue o arquivo de exemplo aqui.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • Fernando

    Parabéns pelo artigo Diego, é muito legal passar esses fundamentos do WordPress, principalmente para os desenvolvedores perderem o medo de criar seus próprios templates.

    Abraços.

  • http://www.netlus.com.br Rafael Dourado

    Poderia complementar com um if (have_posts())

  • http://www.screencaster.com.br Inside

    Por isso que eu amo o WordPress =]

    []‘s

  • http://floripasom.com Acelio Filho

    Acho que agora vou me aventurar neste wordpress…

    Xi, caras…

    Este menu novo achei importante, mas deu pau no IE… Corta algumas partes de palavras no texto…

    Desmontou o layout e o menu na base da página ficou em duas linhas…

  • http://dgmike.wordpress.com DGmike

    Sei, sei… ando um pouco sumido da comunidade, mas pretendo aparecer de vez em quando…

    ótimo artigo sobre o WordPress. Semana pasada comecei a me aventurar no WordPress e estou implementando um site institucional com matérias que serão publicadas por várias pessoas e administrado por outras (o wordpress permite isso de forma muito interessante para pequenos sites, veja o client-side do Elcio).

    Foi muito simples de implementar e valeu a pena, agora só me faltam alguns ajustes sobre o layout (css das internas e talz) mas ao todo, acho que vou levar uns três dias de trabalho para montar o site completo (incluindo inserção de conteudo).

    Só tenho uma questão sobre o post e acho que, como estamos no tableless.com.br posso questionar isto. O the_loop imprimirá varias vezes o #texto mas, se não me engano, um determinado id só pode aparecer uma vez na página. Assim, que tal trocar o id do exemplo do tutorial por class? Assim ficaria mais semântico e correto.

  • http://www.codesignville.com Pedro Assumpção

    Post simples e útil,
    parabéns.
    Pedro
    Codesignville.com

  • http://www.brasdev.com Tiago Curcio

    Post muito útil Diego,
    Parabéns

  • http://www.recoha.com Renan Hagiwara

    Hoje pude perceber tudo isso dai… acabo de terminar a edição do meu novo blog e o tema default que não é mais default porque refiz todo o CSS e também alguns pedaços do código, deu um pouco de trabalho, pois até entender toda essa estrutura de Loop do WordPress!

    ps. vi este post um pouco tarde! hehehe
    Vlw

  • http://deolhosabertos.corpodebombeiros.org Passageirodealgumtrem

    Fiz coisas no meu tema que, se precisasse refazer pra consertar, não conseguiría… duplicação de loops chamando querys criadas por mim, randomização de chamadas de post sem duplicação… nem sei direito … no codex, conseguí o código pra daptar, pra poder criar minha query e chamar o loop duas vezes na index, uma para stickys estilo “notas do editor”, outro pros posts comuns… foi uma barra interpretar, mas depois de um monte de testes, ewrros, loops falsos, página que não carrega, loops que sumiam sozinhos, deu certo. Mas o caminho é esse; vc podia postar algo a respeito de trazer loops na index, mais de um.
    Abraço

    Gian

  • http://www.dicasdeempregos.com.br Daniel Ideriba

    Olá Diego!

    Li seu post e achei em explicativo! Parabéns.
    No mini-Loop do WordPress dá também para fazer um filtro mais especifico dos posts, exemplo:

    por

    No caso eu coloquei o query_post para ele filtrar postagens somente da categoria de ID=6

    Mais explicações sobre o query_posts no CODEX:http://codex.wordpress.org/User:JamesVL/query_posts

    Como feito nos sites que desenvolvi:
    http://www.guiamba.com.br
    http://www.brasildestinos.com.br

    Abraços

  • karuta

    Minha dúvida maior é o seguinte, já tenho um site desenvolvido em ASP, e meu cliente tem um sistema de NEWS muito antigo… ele gostaria de usar a administracao do WORDPRESS para publicar suas matérias e colocar dentro de uma tabela do site só as publicacões… será que existe como fazer?

  • http://twitter.com/ateliedaweb Marco Frasson

    Muito bom o tópico :D

    Só uma dúvida, como colocar o loop em outra página fora a index?

    Já coloquei esse código nela, fiz um template de página, mas nada :(

  • http://flaviowd.wordpress.com Flávio Araújo

    Olá pessoal,

    estava passando por aqui para deixar estes posts de referencia a uma amiga, e percebi que os códigos de exemplo sumiram da exibição ;)

  • Abiloaldo

    me ajudou, obrigado ^^

  • Pingback: Iniciando desenvolvimento de sites com WordPress – Parte I | Tableless | Tableless